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
- Breadcrumbs
- Title
- Vendor, SKU and barcode
- Product rating
- Price
- ShopPay installments
- Availability
- Line item properties
- Variant picker
- Tooltip
- Quantity
- Buy Buttons
- Free shipping messaging
- Store pickup
- Product description
- Button
- Text
- Custom Liquid
- Image
- Icons
- Divider
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
Breadcrumbs
Display a site navigation showing visitors where they are on a site's hierarchy of content. Stores with a large number of collections can use a menu to relate sub-collections that will display on each page.
Show divider
Add padding and a dividing line below the element
Title
Use h1 tag
For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Show divider
Add padding and a dividing line below the element
Vendor, SKU, and barcode
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 product barcode
If a product or variant has an associated barcode, it will display
Show divider
Add padding and a dividing line below the element
Product rating
Display the product rating based on reviews collected from review apps
Note: Requires a product review app, and metafield definitions for 'reviews.rating_count' and 'reviews.rating'
Show divider
Add padding and a dividing line below the element
Price
Price size
Set the price size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Show tax and shipping message
If taxes are included or there is a shipping policy, a message may display
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
Availability
Display the number of remaining items in stock to create a sense of urgency in your customers shopping. Messaging depends on whether you track the stock of the product or variant and check 'Continue selling when out of stock'. Available default messaging:
- In stock!
- 'Continue selling': In stock!
- 'Track Quantity': Only X in stock!
- 'Continue selling / Track quantity / Quantity > 0': X in stock! Additional is backordered
- 'Continue selling / Track quantity / Quantity < 1': In stock!
- Sold Out
Inventory transfers can also be automatically displayed with 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 in stock!' message appears. Example, if there are 10 products in stock, setting this to 15 would display 'Only 10 in stock!', but setting it to 5 would display 'In stock!'
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
Slide
- Enable slide: Condense the content down to a clickable slide
- Heading: Provide a title to the closed slide. This will default to 'Add a heading'
Variant picker
Show single option variant
By default, if there is only 1 option to a variant, the option 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:
- Buttons: Variants will be displayed as block buttons or swatches
- Dropdowns: Variant will be displayed in a dropdown
Color buttons
Color swatches are dependent on the Product Taxonomy set up in the product admin. Choose how the color will be displayed:
- Swatches: 'Swatches' can be customized with Category Metafields and the Search & Discovery app
- 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
Enable rounded buttons
Buttons can be sharp edged squares or rectangles, or rounded circles or ovals
Show divider
Add padding and a dividing line below the element
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
Quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Show divider
Add padding and a dividing line below the element
Buy Buttons
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
Show recipient form for gift card products
When enabled, gift card products can optionally be sent to a recipient with a personal message.
Show divider
Add padding and a dividing line below the element
Free shipping messaging
The free shipping message is set up in Theme Settings > General
Show divider
Add padding and a dividing line below the element
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
Slide
- Enable slide: Condense the content down to a clickable slide
- Heading: Provide a title to the closed slide. This will default to 'Add a heading'
Button
Text
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Link
Add a link to the button
Show divider
Add padding and a dividing line below the element
Text
Text
A text block for metafields and basic text formatting including bold, italic & linked text
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
Slide
- Enable slide: Condense the content down to a clickable slide
- Heading: Provide a title to the closed slide. This will default to 'Add a heading'
Custom Liquid
Liquid
Add app snippets or other Liquid code to create advanced customizations
Enable reload on variant change
Variant metafields are added in the admin, and can be displayed using Liquid. Enable this option to allow the block content to update when a new variant is selected. This will ensure the metafield data is displayed for each variant. Learn more
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
Slide
- Enable slide: Condense the content down to a clickable slide
- Heading: Provide a title to the closed slide. This will default to 'Add a heading'
Image
Image
Select an image to be used in your product options. A max width of 560px 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
Show divider
Add padding and a dividing line below the element
Tag filter
Assign to a product via an existing product tag
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. It is suggested to use an SVG or PNG file format
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 Accent color
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
Divider
Add padding and a dividing line