Product page

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.

Block settings:

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.)

Product details:

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.

Block settings:

Description> Heading: Add this block to display the product description. Add any text to show as the description's custom heading in accordion.

Collapsible content

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.

Specifications

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.

Last updated