Product Page Variables for Javascript

Learn how to display content based on Customer Group here.

Overview

If you need to display dynamic product information or load dynamic info into javascript, You can use the Product HTML Block and accompanying variables.

Adding Code With Variables to a Category Page

Step 1: Drag the Product HTML block into your Product Template

Step 2: Insert variables into your HTML or Javascript snippets.

<p>I'm Product HTML. Click here to edit my code with product details.</p>
<ul>
	<li>product id: [product.id]</li>
	<li>product sku: [product.sku]</li>
	<li>product name: [product.name]</li>
	<li>product description: [product.description]</li>
	<li>product price: [product.price]</li>
	<li>product qty: [product.qty]</li>
	<li>product url: [product.url]</li>
	<li>product image: [product.image]</li>
</ul>

Custom Product Attributes

Your custom product attributes can be used in a Product HTML Block.

Make sure Visible on Storefront Product Page is checked off. Then copy the attribute's code to add it to your theme.

[product.attribute_code]

Replace the attribute_code with the actual code for your attribute found in the attribute options.

HTML Variables

Any variables in the Global HTML Variables can be used in this area.