Product page

The Product page template in Highlight: the Product information section with its gallery, product blocks, tabs, key features and extra images.

Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.

The product page shows one product: its gallery on one side and the product details on the other, with room below the gallery for the description, key features, extra images and apps. Everything is set in the Product information section and its blocks.

Where to find it: open Products → Default product in the theme editor and select the Product information section.

Product page layout

On desktop the page has two columns:

The details column (on the right) holds the blocks you add in this order: Product header, Variant picker, Back in stock alert, Buy buttons, Collapsible tab, Pickup availability, Share, Disclosures, Complementary products, and Custom HTML / Liquid set to On the right.
Below the gallery (on the left) Highlight places the Description, Key product features and Additional product images blocks, app blocks, and Custom HTML / Liquid set to On the left.

Drag the blocks in the sidebar to change their order inside each area. On screens narrower than 836 px the page has one column, with the gallery first.

The section changes every product that uses the template. For a different layout on some products, use another product template (see Using the alternate product template).

Media

Media aspect ratio sets the shape of the gallery images. Uncropped: Natural keeps each image's own shape; resize your images to the same size for a clean gallery. The cropped options resize every image to the same shape.
Enable image zoom (on by default) opens a full-screen view of an image when customers click it, where they move the mouse to look around.
Enable video looping plays product videos in a loop.

Products with a 3D model get a View in your space button on phones that support it.

Adding extra content below the product

Two blocks add special content below the gallery:

Key product features: up to 6 features that open and close, each with a title, an icon and a text, to emphasize product or brand features.
Additional product images: a slider of up to 6 images with a title and a caption, for close-ups or usage scenarios. It is a copy of the Images with text slider section. For more images, add a Gallery section below the product information.

Their settings are under Blocks.

If you want to have unique product images or features for individual products, you can leverage Metafields for this purpose.

The steps are in Showing different key features per product. This video shows both blocks from 5:51; it was recorded on Highlight 2.0, so some labels differ.

Blocks

Product header

Shows the product title and price, with the unit price and Shopify's installment message when they apply.
Show vendor, Show product rating, Show tax information, Show SKU and Show BARCODE add those details. The rating comes from the review app chosen in Theme settings → Product card → Rating app. The SKU and barcode change with the selected variant.
Above the product gallery (on by default) moves the product header above the gallery on screens narrower than 836 px, so customers see the title and price first. Turn it off to keep the header in its place in the details column.

Variant picker

Variants selector type shows the options as Blocks (buttons) or as Dropdown menus. Products without variants show no picker.
Show color swatches (on by default) turns color options into swatches. Swatches show only with Blocks. See Color swatches.
Inventory notification shows the stock of the selected variant: never, only when fewer than 5 are left, or always. It needs inventory tracking on the variant, and it is hidden on products tagged preorder.

Back in stock alert

Shows an email form when the selected variant is sold out, so customers can ask to be told when it is back.
Text, Button label, Success message and Email message set the texts. Email message is the line included in the email you receive.
It is a contact form: you receive an email with the customer's address, the product and the variant, and you notify the customer yourself.

Buy buttons

The add to cart button, with an optional quantity field (Show quantity selector).
Show "pre-order" button label changes the button text to "Pre-Order".
Show dynamic checkout buttons adds Shopify's express checkout button (for example Shop Pay or PayPal) under it.
Show recipient information form for gift card products lets customers send a gift card to someone else, with a message. With this form on, gift cards show no dynamic checkout button.

Adds a Share title that opens links to share the product on Facebook, X and Pinterest. It has no settings.

Description

Shows the product description from Shopify admin, below the gallery. It has no settings.

Complementary products

Shows a short list of products that go well with this one, with image, title and price, under Heading (default "Pairs well with").
Maximum number of products shown: 1 to 8, default 3.
You choose the products in the Shopify Search & Discovery app. Without them, the block shows nothing.

Custom HTML / Liquid

Custom Liquid adds your own HTML or Liquid code, for example an app snippet or a size chart link.
Position places it On the left (below the gallery) or On the right (in the details column).

Collapsible tab

A title that opens and closes a panel, for example Materials, Care or Shipping. Heading is the title.
The panel shows, in this order, Tab content (rich text), the content of the page chosen in Tab content from page, and Tab image. Use one, two or all three.
Hide block if dynamic content is not present hides the tab when all three are empty, for example when its content comes from a metafield that a product does not have.
Add as many Collapsible tab blocks as you need.

Pickup availability

Shows whether the selected variant can be picked up in store, and where, when you offer local pickup in Shopify admin → Settings → Shipping and delivery. It has no settings.

Additional product images

Heading and up to 6 images, each with Image, Title and Caption, in a slider below the gallery.
Media aspect ratio sets one shape for all six images: Short (4:3), Square (1:1, the default), Tall (5:6) or Taller (2:3).
Heading tag sets the HTML level of the heading for search engines.

Key product features

Heading and up to 6 features, each with Title, Icon (a 76 x 76 px PNG) and Text. Customers open a feature to read its text.
A feature shows only when its title or its icon is filled, so empty slots stay hidden.
Heading tag sets the HTML level of the heading for search engines.

Disclosures

Shows the product disclosures you attach to the product in Shopify, for example safety or regulatory information, under Heading (default "Disclosures").
The block shows nothing for products without disclosures. Highlight has had it since 4.1.0; the disclosures also show in the cart.

Setting up product tabs from metafields

Each product can have its own tab content, for example care instructions, from a metafield.

Create the metafield

In Shopify admin, open Settings → Metafields and metaobjects → Products and select Add definition. Name it, for example "Care", and choose the type Rich text, or Page reference to point at a page.

Add a Collapsible tab block

In the theme editor, select Product information, select Add block and choose Collapsible tab. Write its Heading, for example "Care".

Connect the metafield

Select the dynamic source icon next to Tab content (or Tab content from page for a page reference) and choose your metafield.

Hide the tab when it is empty

Turn on Hide block if dynamic content is not present. Products without a value then show no Care tab.

Fill the metafield on your products

Open each product in Shopify admin and write its care text in the new metafield.

Showing different key features per product

Create the metafields

In Shopify admin → Settings → Metafields and metaobjects → Products, add one definition per field you need, for example custom.feature_1_title (Single line text), custom.feature_1_icon (File) and custom.feature_1_text (Rich text).

Connect them in the block

In the theme editor, select the Key product features block and connect each Title, Icon and Text field to its metafield with the dynamic source icon.

Fill them on each product

Fill the metafields on every product. A product with empty metafields shows no feature in that slot.

The same works for the images of Additional product images: connect each Image, Title and Caption to product metafields. See Using dynamic sources for unique product pages.

Setting up the back in stock alert

Add the block

Select Product information, select Add block and choose Back in stock alert. Drag it under the Buy buttons block.

Write the texts

Edit Text, Button label, Success message and Email message. In the theme editor the form always shows, so you can style it.

Check your store email

Make sure the store contact email in Shopify admin → Settings → General is correct. The requests arrive there.

Answer the requests

When the product is back in stock, email the customers who asked. Highlight does not notify them for you.

The form shows only for variants that are sold out: inventory is tracked and selling when out of stock is off. Variants that do not track inventory are always available, so the form never shows for them.

Using the alternate product template

Highlight includes a second product template, alternate, with a Heading, a Gallery, a Video: background and a Collection list below the product information.

Edit the template

In the theme editor, open Products → alternate and change its sections and blocks.

Assign it to products

In Shopify admin, open a product and choose alternate under Theme template. Save the product.

Check the product page

Open the product on your store. It now uses the alternate template; all other products keep the default one.

To create more templates, open the page selector at the top of the theme editor and create a template based on Default product.

Showing product disclosures

Set up the disclosures in Shopify

Attach disclosures to your products in Shopify admin, as described in Shopify's Product disclosures help page.

Add the Disclosures block

In the theme editor, select Product information, select Add block and choose Disclosures. Change its Heading if you want.

Check a product

Open a product with disclosures. They show in the details column; products without disclosures show nothing.

Can I show different features or images for each product?

Yes. Connect the fields of the Key product features, Additional product images and Collapsible tab blocks to product metafields, so each product shows its own content. Empty features and tabs are hidden. For a completely different layout, assign another product template to those products.

Why is the product header above the gallery on mobile?

Because Above the product gallery is on in the Product header block, which is the default. On screens narrower than 836 px, customers then see the title and price before the images. Turn it off to show the gallery first.

Why does the back in stock form not show?

Because the selected variant is not sold out. The form shows only when the variant tracks inventory, has none left and does not continue selling when out of stock. Check the variant's inventory settings in Shopify admin.

All Product page settings

Every setting, with its type and default.

The same section is also on the alternate template Products → alternate.

Accepts these blocks: Product header, Variant picker, Back in stock alert, Buy buttons, Share, Description, Complementary products, Custom HTML / Liquid, Collapsible tab, Pickup availability, Additional product images, Key product features, Disclosures and app blocks.

Product information section: Media

Where to find it: Products → Default product → Product information → Media

Media aspect ratio (dropdown, default: Uncropped: Natural): Sets the shape of the gallery images. Natural keeps each image's own shape (resize your images to the same size for a clean gallery); the cropped options give every image the same shape. Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).

Enable image zoom (checkbox, default: on): Opens a full-screen view of an image when the customer clicks it.

Enable video looping (checkbox, default: off): Plays product videos in a loop.

Product header block

Where to find it: Products → Default product → Product information → Add block → Product header

One Product header block per section.

Show vendor (checkbox, default: on).

Show product rating (checkbox, default: on): Shows the product rating from the app chosen in Theme settings → Product card → Rating app.

Show tax information (checkbox, default: off): Shows whether taxes are included and a link to the shipping policy, when the store has one.

Show SKU (checkbox, default: off): Shows the SKU of the selected variant, when it has one.

Show BARCODE (checkbox, default: off): Shows the barcode of the selected variant, when it has one.

Product header block: Position on mobile devices

Where to find it: Products → Default product → Product information → Add block → Product header → Position on mobile devices

Above the product gallery (checkbox, default: on): Moves the product header above the gallery on screens narrower than 836 px.

Variant picker block

Where to find it: Products → Default product → Product information → Add block → Variant picker

One Variant picker block per section.

Variants selector type (dropdown, default: Blocks): Sets whether options show as buttons (Blocks) or as dropdown menus. Options: Blocks, Dropdown.

Show color swatches (checkbox, default: on): Turns color options into swatches. Works with Blocks only.

This theme also offers support for color swatches created with category metafields. Shopify Help Center.

Inventory notification (dropdown, default: Don't show inventory information): Shows the stock of the selected variant: never, when fewer than 5 are left, or always. Needs inventory tracking; hidden on products tagged preorder. Options: Don't show inventory information, Show a notice if inventory falls below 5, Always show inventory.

Back in stock alert block

Where to find it: Products → Default product → Product information → Add block → Back in stock alert

One Back in stock alert block per section.

This back in stock alert form will show up when the product is out of stock.

Store owner will receive an email when a customer fills in this form. Store owner must manually notify the customer once the product is back in stock.

Text (formatted text, default: "Enter your email address below to be notified when this product is back in stock."): Sets the text above the email field, shown when the selected variant is sold out.

Button label (text field, default: "Notify me").

Success message (text field, default: "Thanks! We will notify you when this product becomes available!").

Email message (text field, default: "I would like to be notified when this product is back in stock."): Sets the message included in the email the store owner receives, with the product and variant.

Buy buttons block

Where to find it: Products → Default product → Product information → Add block → Buy buttons

One Buy buttons block per section.

Show quantity selector (checkbox, default: on).

Show "pre-order" button label (checkbox, default: off): Changes the add to cart button text to Pre-Order.

Show dynamic checkout buttons (checkbox, default: on): Shows Shopify's express checkout button under the add to cart button. Hidden on gift cards when the recipient form is on.

Show recipient information form for gift card products (checkbox, default: off): Lets customers send a gift card product to a recipient with a personal message.

Where to find it: Products → Default product → Product information → Add block → Share

One Share block per section.

If you include a link in social media posts, the page's featured image will be shown as the preview image. Shopify Help Center.

A store title and description are included with the preview image. Shopify Help Center.

Description block

Where to find it: Products → Default product → Product information → Add block → Description

One Description block per section.

The Description block has no settings in Highlight 4.1.0.

Complementary products block

Where to find it: Products → Default product → Product information → Add block → Complementary products

One Complementary products block per section.

To select complementary products, add the Search & Discovery app. Shopify Help Center.

Heading (text field, default: "Pairs well with").

Maximum number of products shown (slider 1 to 8, default: 3): Sets how many complementary products show. You choose them in the Shopify Search & Discovery app.

Custom HTML / Liquid block

Where to find it: Products → Default product → Product information → Add block → Custom HTML / Liquid

Custom Liquid (Liquid).

Position (dropdown): Places the code below the gallery (On the left) or in the details column (On the right). Options: On the left, On the right.

Collapsible tab block

Where to find it: Products → Default product → Product information → Add block → Collapsible tab

Heading (text field, default: "Collapsible tab"): Include a heading that explains the content.

Tab content (rich text): Sets the rich text of the tab, shown first.

Tab content from page (page picker): Adds the content of a page under the tab text.

Tab image (image): Adds an image at the end of the tab.

Collapsible tab block: Dynamic content

Where to find it: Products → Default product → Product information → Add block → Collapsible tab → Dynamic content

Hide block if dynamic content is not present (checkbox, default: off): Hides the tab when Tab content, Tab content from page and Tab image are all empty, for example for products without its metafield.

Pickup availability block

Where to find it: Products → Default product → Product information → Add block → Pickup availability

One Pickup availability block per section.

The Pickup availability block has no settings in Highlight 4.1.0.

Additional product images block

Where to find it: Products → Default product → Product information → Add block → Additional product images

One Additional product images block per section.

Heading (text field, default: "Additional product images").

Media aspect ratio (dropdown, default: Cropped: Square (1:1)): Sets one shape for all images of the slider. Options: Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).

Additional product images block: Image 1

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 1

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: Image 2

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 2

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: Image 3

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 3

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: Image 4

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 4

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: Image 5

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 5

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: Image 6

Where to find it: Products → Default product → Product information → Add block → Additional product images → Image 6

Image (image).

Title (text field).

Caption (rich text).

Additional product images block: SEO

Where to find it: Products → Default product → Product information → Add block → Additional product images → SEO

Heading tag (dropdown, default: H2): Sets the HTML heading level of the block heading, for search engines. Options: H1, H2, H3, H4, span.

Key product features block

Where to find it: Products → Default product → Product information → Add block → Key product features

One Key product features block per section.

Heading (text field, default: "Key product features").

To visualize all the icons included in the theme, please visit krownthemes.com.

Key product features block: Feature 1

Where to find it: Products → Default product → Product information → Add block → Key product features → Feature 1

Title (text field).