Confirm Your Layout
- Banner: The desktop product title is above the featured product image
- Default: The desktop product title is to the right of the featured product image. Learn More
How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Products
- banner
- Product pages
The Product Page options contain features that are similar to Theme Setting Product Grids & Rows and the Featured Product section.
Recommended reading
- Set a focal point on a theme image
- Products
- Product media
- Transfers from suppliers
- Metafields
- Download a Demo Product
In this section...
Banner
Show 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.
Enable heading
To accommodate customizations using other sections and headings, you can opt to exclude the default heading
Heading
Title of the section or page, either default or custom
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
Subheading
Secondary title of the section or feature
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
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
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 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 social sharing buttons
Provide options for your users to share your post to Facebook, Twitter & Pinterest
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Text alignment
Text can be aligned to the left, right or centered to the container
Content/Container width
The design is based on a 12 column, 1180px wide layout. Refer to the following table to reference content widths:
Setting
Content Width
Minimum Image Width
16.5%*
180px
580px
25%*
280px
580px
33%
380px
580px
50%
580px
580px
66%
780px
880px
75%
880px
880px
87.5%*
980px
1180px
100%*
1180px
1180px
* May not apply to all sections or templates
Horizontal position
After setting the content width, content can be aligned to the left, right or centered
Vertical position
After setting the content width, content can be aligned to the top, bottom or middle
Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
Setting
Desktop Width
Minimum Image Width
Full width checked
100%
1900px
Full width unchecked
1180px
1180px
The height will determine the overall width of the background image. The following would be used to determine the actual necessary width of an image:
Screen Width x Height x Image Ratio = Desired Width
Height
The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.
Overlay color
A color may be applied to background images to help the text clarity
Overlay gradient
A gradient may be applied to background images to help the text clarity
Overlay opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
* May not be available in all Banners
Media
Product media includes images, 3D models, and videos. For more information, review the Product media documentation
Enable square image (1:1) formatting
The featured image container will be squared and the image will fit proportionally regardless of the width or height
Enable image zoom
Turn on the ability to zoom into the featured product image. To provide a good zoom but keep file sizes low, it is recommended to use 1160px images.
Enable video looping
Allow media videos to loop
Options
Show product 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 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
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 product quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Product add to cart redirection
If checked, when the customer clicks add to cart, they will stay on the same page. This promotes further shopping within the store. If you would prefer that they go directly to the cart, uncheck this option
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.
Section
Lazy load images *
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections
* NOTE: May not be available on all sections, blocks or templates