✨Product page
Last updated
Last updated
Gallery style
Choose any style from the drop-down menu to display product media on the product page. Options include:
Carousel
Stacked
Desktop thumbnails position
Choose from the left or bottom to decide the thumbnail position. Please note that thumbnails work with carousel style only on the desktop view.
Overlap thumbnails
Select this checkbox to overlap the thumbnails on product images. (Note: It will work only when thumbnails position is set to the bottom.)
Enable sticky content on desktop
Select this checkbox to enable the sticky content on the desktop.
Desktop media width
Select the desktop media width from Small, Medium or Large.
Desktop grid image ratio
Choose the product image ratio from the following options for the desktop view: -Auto -Landscape -Portrait -Square
Image zoom
Choose the image zoom options from the following options: - Click and hover - Open lightbox - None (Note: Click and hover does not work on mobile.)
Enable sticky add to cart
Select this checkbox to show the sticky add to cart bar on the desktop and mobile view.
Mobile
Show thumbnails on mobile view Select this checkbox to show the thumbnails on the mobile. Mobile grid image ratio Choose the product image ratio from the following options for the mobile view: -Auto -Landscape -Portrait -Square
Colors
Color scheme Select the color scheme from the given options. Note: These can be managed from Theme settings> color schemes.
Section spacing
Top spacing (desktop)
Adjust the range bar to add spacing at the top of the section for desktop view.
Bottom spacing (desktop)
Adjust the range bar to add spacing at the bottom of the section for desktop view.
Top spacing (mobile)
Adjust the range bar to add spacing at the top of the section for mobile view.
Bottom spacing (mobile)
Adjust the range bar to add spacing at the bottom of the section for mobile view.
Text
Add any text to show here.
Title
It displays the product’s title. It has no customizable block settings available. Heading size Choose the heading size in between H1 to H6. Heading tag Choose the heading tag for SEO and search engines for crawling purposes.
Review rating
It displays customer reviews and ratings. These reviews can be included by adding the Shopify reviews app.
SKU
It displays the product SKU. There are no customizable block settings available.
Refer to Product details.
Price
It displays the product’s price like Sale and Compare price. Hide shipping content Tick this checkbox to hide the shipping content.
Icon & text (Icon 1-3)
Icon Choose any relevant icon to display. SVG code Add any SVG code to display the icon. Heading Type any text to display with the icon.
Inventory status bar
Minimum inventory Adjust the range bar from 1 to 20 to set the minimum inventory. Available message Enter text to show in case the available stock is more than the minimum inventory set above. Low inventory message
Enter text to show in case the available stock is less than the minimum inventory set above. Note: Use ||inventory|| to show inventory count in message
Variant picker
This block is to display the variant options. Please refer to Theme settings > Product for the different variants styles (Dropdown and Color swatches).
Quantity picker
This block is to display a quantity selector, for selecting the number of products to purchase. It has no customizable block settings available.
Buy buttons
It shows the “Add to cart” and “Buy now” buttons. Show dynamic checkout button Tick the checkbox "Show dynamic checkout button" to display a button with the user's preferred payment method, in addition to the "Add to cart" button.
Pickup & availability
This block is to show the pickup & availability of the product options.
Coupon code
Heading Enter any text to appear as heading in the block. Description Enter any text to appear as description in the block. Coupon code Enter the coupon code to display.
Complementary products
(Note: To select complementary products, add the Search & Discovery app.) Heading Enter any text to appear as heading Products count Adjust the range bar to determine the products count.
Collapsible content
Show product description Tick this checkbox to show the product description in collapsible content. Description heading Add the description heading text. Content 1-3 Heading Add any heading to show as the collapsible heading. Description Add any content to show.
Social sharing
This block shows the social sharing icons.
Size chart
Select size chart Select any page to show as the size chart.
Description
This block is to display the product description.
Custom liquid
This is used to add custom liquid code for any advanced customizations such as app snippets.
For more understanding, refer to Shopify developers: Liquid reference.
Back in stock
(Note: You will receive an email every time someone fills in this form. Email alerts will NOT be automatically sent to the customer when the product becomes available - you will need to do this.) Heading Add any heading text. Placeholder Add any placeholder text for the email field. Button text Enter any text for the button. Success message Enter any text for the success message. (Note: Back-in-stock form is always visible in the theme editor.)
Make top corners rounded
Select this checkbox to show the top corners rounded of the section.
Heading
Type any text to appear as a title. (Note: To highlight the text with a different color, simply wrap it in bold.)
Heading size
Select the heading font size from H1-H6.
Heading tag
Select the heading tag from H1-H6 for SEO purposes.
Description
Enter any teaxt to display as the description.
Content alignment
Choose from Left or Center to determine the content alignment.
Specifications
Open first collapsible by default Select the checkbox to keep the first collapsible open by default. Heading Type any text to appear as a title. (Note: To highlight the text with a different color, simply wrap it in bold.) Heading size Select the heading font size from H1-H6. Heading tag Select the heading tag from H1-H6 for SEO purposes. Position Choose from Left or Center to determine the text position. Specification color Choose any color scheme for the specifications block color. Heading highlight Choose any color for the highlighted heading color. Gradiant highlight color Choose any gradiant color for the highlighted heading color.
Colors
Color scheme Select the color scheme.
Note: These can be managed from Theme settings> Color schemes. Section background Choose any color for the section background color. It works with the rounded corners only. Heading highlight Choose any color for the highlighted heading color.
Section spacing
Top spacing (desktop)
Adjust the slider to add spacing at the top of the section for desktop view.
Bottom spacing (desktop)
Adjust the slider to add spacing at the bottom of the section for desktop view.
Top spacing (mobile)
Adjust the slider to add spacing at the top of the section for mobile view.
Bottom spacing (mobile)
Adjust the slider to add spacing at the bottom of the section for mobile view.
Heading
Type any text to appear as a title of the collapsible block.
Description
Enter any text to appear as a description in the collapsible block.
Icon
Choose any image to display as an icon.
Heading
Type any text to display the product features.
Link
Add any link to redirect the icon.