Confirm Your Layout
- Banner: The desktop product title is above the featured product image. Learn More
- Default: The desktop product title is to the right of the featured product image
How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Products
- Default product
- Left column, access content blocks using black arrow next 'Product pages'
Recommended reading
In this section...
- Tag Filters
- Price
- ShopPay installments
- SKU and vendor
- Availability
- Line item properties
- Buy Buttons
- Store pickup
- Product description
- Product rating
- Text
- Liquid
- Tooltip
- Image
- Icons
Tag Filters
Some Content Blocks can be 'assigned' to a specific product or products using tags. Example: If you want to display a Size Chart specifically for Female Tank Tops, you could tag each product 'Female Tank Top' and add 'Female Tank Top' to the filter input
Price
Show divider
Add padding and a dividing line below the element
ShopPay installments
Shop Pay offers customers the option to pay in full at checkout, or to split their purchase into 4 equal, interest-free installment payments for orders between 50 USD and 1000 USD. Learn More
Show divider
Add padding and a dividing line below the element
SKU and vendor
Show product vendor
The vendor title will display. The title will be linked to the default collection page or to a collection created using the vendor name.
Show product SKU
If a product or variant has an associated SKU, it will display
Show divider
Add padding and a dividing line below the element
Availability
Show product availability
Display the number of remaining items in stock to create a sense of urgency in your customers shopping. This requires you to track the stock of the product or variant and not check 'Continue selling when out of stock'. Available default messaging:
- Only X left!
- Available Now!
- Sold Out
Inventory transfers can also be automatically displayed underneath the product availability. Learn more about transfers from suppliers
Minimum number of products remaining to display remaining stock
Sets the minimum number of products needed before the 'Only X left! message appears. Example, if there are 10 products in stock, setting this to 15 would display 'Only 10 left!', but setting it to 5 would display 'Available Now!'
Show divider
Add padding and a dividing line below the element
Line item properties
Line item properties are used to collect customization information for an item added to the cart. This information can be collected from the buyer on the product page.
Show divider
Add padding and a dividing line below the element
Checkbox
Add an option for users to agree to
Radio label
Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Radio options' text will be used as the label in the email
Radio options
Separate options with a comma to create multiple radio buttons. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed
Text label
Add a label above the text input. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Text placeholder' text will be used as the label in the email
Text placeholder
The initial text the users sees within the input.
Select dropdown label
Add a label above the field. This text also acts as the label for the text in the email you receive. If left blank, the field with be removed and the 'Select dropdown placeholder' text will be used as the label in the email
Select dropdown placeholder
The initial text the users sees within the field.
Select dropdown options
Separate options with a comma to create dropdown selections. Example: Option 1, Option 2, Option 3. If left blank, the field & label with be removed
Tag filter
Assign to a product via an existing product tag
Buy Buttons
Show single option variant
By default, if there is only 1 option to a variant, the dropdown will not display. Since there is no choice for the customer to make, this option is removed. Check the box to display the single option dropdown.
Variant options
Choose how to display various variants:
- All buttons: EVERY variant will be displayed as block buttons
- Color buttons: Only COLOR variants will be displayed as block buttons
- Size buttons: Only SIZE variants will be displayed as block buttons
- Color and SIZE buttons: Only COLOR and SIZE variants will be displayed as block buttons
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color
- All Dropdowns: EVERY variant will be displayed in a dropdown
Color buttons
Choose how the color will be displayed:
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
- Variant image: Display the variant image associated with the variant. If an image is not available, it will default to the color
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color
- Custom image: Create your own image to associate with the variant:
- Images MUST be a PNG, not a JPEG
- The file name MUST match the variant title. Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
- Recommended image size is 140 x 140px
- Upload the file to Settings > Files
Show product quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Show dynamic checkout button
Dynamic checkout buttons allow customers to skip the cart and go directly to the checkout using a variety of payment options
Store pickup
Displays option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. Learn more
Product description
This will add the product description to the form information. If the description contain h6 tabs, only the content before h6 will display. Consider disabling the description in the tabs below
Show divider
Add padding and a dividing line below the element
Product rating
Display the product rating based on reviews collected from review apps
Show divider
Add padding and a dividing line below the element
Text
A text block for metafields and basic text formatting including bold, italic & linked text
Text style
Style the text based on 1 of 5 theme styles
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
Liquid
Custom liquid
Add app snippets or other Liquid code to create advanced customizations.
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
Tooltip
Tooltips add an icon next to the variant title to allow users to display more information about the variant in a pop up.
Variant title
Assign to a variant by its title, ie Size or Color
Text or HTML
Add simple text or formatted HTML to provide extra information for the variant
Tag filter
Assign to a product via an existing product tag
Image
Image
Select an image to be used in your product options. A max width of 480px is recommended
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
Icons
Icon blocks add trust icons or required text & links to your product page. Add up to 3 per block. You can view the icons on the 'What Icons are Included?' FAQ page
Tag filter
Assign to a product via an existing product tag
Show divider
Add padding and a dividing line below the element
Icons #1-3
Select an icon to be used from the preset list
Custom icon
An alternative to using a pre-set icon is the image picker
Icon color
Preferred color of the icon. Defaults to the color assigned to the Headers
Icon highlight color
Some icons have elements that can be assigned a different color. Defaults to the color assigned to the Buttons
Text
A text block for basic formatting including bold, italic & linked text
Enable pop up window
Allow Page content to be displayed in a pop up window. This could be useful for size charts, contact information or Policy pages. If selected, any links added to the Text block above will be ignored
Pop up information
Select a Page to display within the pop up