The Product template in the Be Yours theme controls the main product page layout, including the product media gallery, product information, price, variant picker, buy buttons, product details, complementary products, sticky cart, and other product-specific content blocks.
This guide explains how to set up and customize the Product template in the Theme Editor.
STEPS:
1. Opening the Product Template
To edit the Product template:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the template selector at the top of the Theme Editor.
- Select Products.
- Choose the product template you want to edit, such as Default product.
- Open the Product information section.
- Add, remove, reorder, or configure blocks as needed.
- Click Save.
The Product template controls the layout for all products using that template. If you need a different layout for specific products, create a new product template and assign it to those products.
2. Understanding the Product Template Structure
The Product template is divided into two main areas:
| Area | Description |
|---|---|
| Product media | Displays product images, videos, 3D models, thumbnails, gallery layout, and zoom. |
| Product information | Displays product title, price, variants, buy buttons, description, collapsible rows, custom content, and other blocks. |
A typical product page structure includes:
- Product media gallery.
- Product title.
- Product price.
- Variant picker.
- Buy buttons.
- Product description.
- Collapsible rows or additional product details.
- Complementary products or related buttons.
- Sticky cart, if enabled.
3. Product Media Settings
Product media settings control the gallery layout, media position, thumbnails, image ratio, zoom, and video behavior.
Enable sticky product information
- Enable sticky product information: Keeps the product information column visible while customers scroll through the product media.
This works best when the product has many images or a long media gallery.
Media position
-
Media position: Choose where the product media appears.
- Left: Product media appears on the left and product information appears on the right.
- Right: Product media appears on the right and product information appears on the left.
Media size
-
Media size: Choose the width of the product media area.
- Small
- Medium
- Large
Use Large for image-focused products and Small or Medium when product information should have more space.
Gallery layout
- Gallery layout: Choose how product media is displayed.
Available layouts:
| Layout | Description |
|---|---|
| Stacked | Displays product media as a vertical list. |
| Columns | Displays product media in a column-style layout. |
| Thumbnail slider | Displays a main media area with thumbnails. |
Image ratio
- Image ratio: Choose how product images are cropped on desktop.
Available options:
| Image ratio | Description |
|---|---|
| Adapt | Uses the original media ratio. |
| Square | Displays images as squares. |
| Portrait | Displays images in portrait format. |
| Landscape | Displays images in landscape format. |
| Wide | Displays images in a wide format. |
| Adapt to first image | Uses the ratio of the first product image. |
Show featured media by default
- Show featured media by default: Displays the product featured media first.
If this option is disabled and the selected variant has its own media, the selected variant media can be shown first instead.
Show thumbnails
- Show thumbnails: Displays media thumbnails.
This is especially useful with the Thumbnail slider or Stacked gallery layout.
Hide other variants' media after selecting a variant
- Hide other variants' media: Hides media attached to other variants when a variant is selected.
This helps customers focus only on media related to the selected variant. This option is disabled when you want to specify certain images for one option option value
Enable image zoom
- Enable image zoom: Allows customers to zoom into product images.
Enable video looping
- Enable video looping: Makes product videos loop automatically.
4. Mobile Media Settings
Mobile media settings control how the product gallery appears on smaller screens.
Mobile image ratio
- Mobile image ratio: Choose how product media is displayed on mobile.
Available options:
| Mobile image ratio | Description |
|---|---|
| Adapt | Uses the original image ratio. |
| Square | Displays images as squares. |
| Portrait | Displays images in portrait format. |
| Landscape | Displays images in landscape format. |
| Wide | Displays images in a wide format. |
| Adapt to first image | Uses the ratio of the first product image. |
Show mobile thumbnails
- Show mobile thumbnails: Displays thumbnails on mobile.
If disabled, mobile customers can still swipe through product images using the slider.
5. Product Media Grouping by Variant Option
Be Yours supports grouping product media by variant option using image alt text.
This is useful when you want the product gallery to show only images related to the selected option value, such as a selected color.
To group media by option:
- Open the product in Shopify admin.
- Open the product media.
- Edit the image alt text.
- Add the grouping code after
#.
Format:
#option-name_option-value
Example:
#color_black
Another example:
#material_leather
Rules:
- Use the product option name before the underscore.
- Use the option value after the underscore.
- Use lowercase text.
- Replace spaces with hyphens.
- The option name and value should match the product option after handle formatting.
Example setup:
| Product option | Option value | Image alt text suffix |
|---|---|---|
| Color | Black | #color_black |
| Color | Navy Blue | #color_navy-blue |
| Material | Leather | #material_leather |
When the matching variant option is selected, the related product media becomes active in the gallery. You may want to refer to this article for more information
6. Product Information Blocks
The Product information area is built with blocks. You can add, remove, and reorder these blocks in the Theme Editor.
Common blocks include:
| Block | Purpose |
|---|---|
| Breadcrumb | Displays breadcrumb navigation. |
| Text | Displays custom text, vendor text, or a short message. |
| Title | Displays the product title. |
| SKU | Displays the selected variant SKU. |
| Price | Displays the product or selected variant price. |
| Variant picker | Displays product options and variants. |
| Sibling products | Displays related separate products as selectable options. |
| Inventory status | Displays low stock or incoming inventory messages. |
| Buy buttons | Displays add-to-cart and dynamic checkout buttons. |
| Description | Displays the product description. |
| Highlights | Displays product highlights from metafields. |
| Share | Displays product sharing options. |
| Custom liquid | Displays custom Liquid code. |
| Line item property | Adds custom fields to the product form. |
| Collapsible description | Displays product description inside a collapsible row. |
| Collapsible row | Displays custom content, page content, or Liquid inside a collapsible row. |
| Complementary products | Displays Shopify product recommendations. |
| Popup | Opens page content in a popup modal. |
| Rating | Displays product review rating data. |
| Related buttons | Adds quick links to product information or images. |
| Image | Displays a custom image inside product information. |
| Countdown | Displays a countdown timer from a product metafield. |
| Sticky cart | Displays a sticky add-to-cart bar. |
| Separator | Adds a horizontal line. |
| Spacing | Adds vertical spacing between blocks. |
7. Title, Price, SKU, and Text Blocks
These blocks control the most common product information.
Title block
The Title block displays the product title.
Settings:
| Setting | Description |
|---|---|
| Title size | Controls the product title size. |
| Show price | Displays the price inside the Title block. |
| Price size | Controls the price size when price is displayed inside the Title block. |
Important:
If Show price is enabled in the Title block, the separate Price block will not display the price to avoid duplication.
Price block
The Price block displays product price, compare-at price, sale badges, tax text, shipping policy text, and payment terms when available.
Settings:
| Setting | Description |
|---|---|
| Price size | Controls the price size. |
| Show badges | Shows sale or sold-out badges. |
| Sale badge basis | Controls how the sale badge is calculated or displayed. |
Sale badge basis options include:
| Option | Description |
|---|---|
| Disable | Hides sale badge logic. |
| Auto | Uses the theme's automatic sale badge behavior. |
| Text | Displays a text-based sale badge. |
| Percentage | Displays discount percentage. |
| Value | Displays discount value. |
SKU block
The SKU block displays the selected variant SKU.
Settings:
| Setting | Description |
|---|---|
| Text style | Choose body, subtitle, or uppercase style. |
Text block
The Text block displays a custom line of text, optionally with an icon.
Settings:
| Setting | Description |
|---|---|
| Icon | Select an icon to display before the text. |
| Text | Add the custom text. |
| Text style | Choose body, subtitle, or uppercase style. |
If the text matches the product vendor, the vendor can display as a vendor link.
8. Variant Picker Block
The Variant picker block displays product options such as size, color, material, or style.
Settings:
| Setting | Description |
|---|---|
| Show variant labels | Displays the option name above each option group. |
| Picker type | Choose dropdowns or buttons. |
| Swatch source | Choose how color swatches are generated. |
| Swatch type | Choose round, square, or none. |
| Enable unavailable swatch click | Allows unavailable swatches to be clicked. |
| Size chart | Select a page to display as the size chart popup. |
Picker type
| Picker type | Description |
|---|---|
| Dropdown | Displays variant options in dropdown selectors. |
| Button | Displays variant options as buttons or pills. |
Swatch source
| Swatch source | Description |
|---|---|
| Variant image | Uses variant images as swatches. |
| File | Uses custom swatch images or colors from theme settings. |
| Native | Uses Shopify native swatch data. |
Swatch type
| Swatch type | Description |
|---|---|
| Round | Displays round swatches. |
| Square | Displays square swatches. |
| None | Disables swatch display. |
9. Sibling Products Block
The Sibling products block displays related separate products as selectable options on the product page.
This is useful for a Combined Listing-style experience, where each color, material, or style is a separate Shopify product but customers can switch between them from the same product page area.
Settings:
| Setting | Description |
|---|---|
| Option name | Label shown above the sibling product selector. |
| Option value metafield | Product metafield used to display each sibling option value. |
| Collection handle metafield | Product metafield used to find the collection of sibling products. |
| Enable color swatches | Displays sibling products as swatches. |
| Swatch type | Choose round or square swatches. |
| Swatch source | Choose variant image or file-based swatches. |
Recommended setup:
| Field | Example |
|---|---|
| Option name | Color |
| Option value metafield | sibling.color |
| Collection handle metafield | sibling.collection_handle |
Each related product should have the same collection handle metafield value and should be included in the same collection.
10. Buy Buttons Block
The Buy buttons block controls the product purchase form.
Settings:
| Setting | Description |
|---|---|
| Show quantity selector | Allows customers to choose quantity before adding to cart. |
| Show dynamic checkout buttons | Displays accelerated checkout buttons when available. |
| Show gift card recipient form | Displays recipient fields for gift card products. |
The button text automatically changes depending on product state:
| Product state | Button text |
|---|---|
| Available product | Add to cart |
| Pre-order template | Pre-order |
| Sold out product | Sold out |
The Add to cart button is disabled when the selected variant is not available.
11. Inventory Status Block
The Inventory status block displays low-stock messages and incoming inventory information.
Settings:
| Setting | Description |
|---|---|
| Inventory threshold | Controls when the low-stock message appears. |
| Show inventory transfer notice | Displays incoming stock information when available. |
| Color scheme | Controls the progress/status color style. |
The inventory status only appears when Shopify inventory tracking is enabled for the variant.
12. Description and Collapsible Content Blocks
Be Yours provides several ways to display product descriptions and extra details.
Description block
The Description block displays the product description directly on the page.
Collapsible description block
The Collapsible description block displays the product description inside an accordion row.
Settings:
| Setting | Description |
|---|---|
| Icon | Select an icon for the row. |
| Heading | Add the row title. |
| Keep open | Keeps the row open by default. |
Collapsible row block
The Collapsible row block displays custom content, page content, or custom Liquid inside an accordion row.
Settings:
| Setting | Description |
|---|---|
| Icon | Select an icon for the row. |
| Heading | Add the row title. |
| Content | Add rich text content. |
| Page | Select a page and display its content. |
| Custom liquid | Add custom Liquid content. |
| Keep open | Keeps the row open by default. |
Recommended uses:
| Content type | Recommended block |
|---|---|
| Main product description | Description or Collapsible description |
| Shipping information | Collapsible row |
| Size guide | Variant picker size chart or Popup block |
| Materials and care | Collapsible row |
| Returns policy | Collapsible row or Popup block |
13. Product Highlights Block
The Highlights block displays product highlights from a product metafield.
This block uses the product metafield:
theme.highlights
Each highlight value can include a label, value, and optional icon.
Recommended format:
Label | Value | icon
Example:
Material | Organic cotton | leaf
Fit | Relaxed | shirt
Shipping | Free shipping | truck
Settings:
| Setting | Description |
|---|---|
| Use custom colors | Enables custom highlight colors. |
| Text color | Sets highlight text color. |
| Background color | Sets highlight background color. |
| Padding top | Adds spacing above the highlights. |
| Padding bottom | Adds spacing below the highlights. |
If the theme.highlights metafield is empty, the block will not display.
14. Countdown Block
The Countdown block displays a countdown timer on the product page.
This block uses the product metafield:
theme.countdown
The countdown only appears when the metafield contains a future date and time.
Settings:
| Setting | Description |
|---|---|
| Heading | Displays text above the countdown timer. |
| Number size | Controls the countdown number size. |
| Heading color | Sets the heading color. |
| Text color | Sets the countdown text color. |
| Background color | Sets the countdown background color. |
Recommended use cases:
- Limited-time offers.
- Sale countdowns.
- Product launch countdowns.
- Pre-order deadline reminders.
15. Line Item Property Block
The Line item property block adds custom fields to the product form.
These fields are submitted with the product when customers add it to the cart.
Supported field types:
| Type | Description |
|---|---|
| Text | Single-line text input. |
| Textarea | Multi-line text input. |
| Checkbox | Checkbox option with checked and unchecked values. |
| Radio | Radio button options. |
| Select | Dropdown options. |
Settings:
| Setting | Description |
|---|---|
| Type | Choose the field type. |
| Label | Field label shown to customers. |
| Required | Makes the field required before adding to cart. |
| Checked value | Value submitted when checkbox is checked. |
| Unchecked value | Value submitted when checkbox is not checked. |
| Radio options | Add comma-separated radio options. |
| Select options | Add comma-separated dropdown options. |
Example radio options:
Small, Medium, Large
Example select options:
Yes, No, Not sure
Use this block for personalization fields, gift messages, custom options, or customer instructions.
16. Complementary Products Block
The Complementary products block displays Shopify product recommendations with the complementary intent.
Settings:
| Setting | Description |
|---|---|
| Icon | Select an icon for the block heading. |
| Heading | Add the heading text. |
| Make collapsible row | Displays the recommendations inside an accordion row. |
| Maximum products to show | Controls the number of recommendations. |
| Image ratio | Controls product card image ratio. |
| Image position | Controls product image focal position. |
| Show vendor | Displays product vendor. |
| Enable image fill | Makes product images fill the image area. |
Complementary products depend on Shopify recommendations data. If Shopify does not return recommendations, the block may not display products.
17. Popup, Share, Rating, Related Buttons, and Image Blocks
Popup block
The Popup block opens selected page content in a modal popup.
Settings:
| Setting | Description |
|---|---|
| Icon | Select an icon. |
| Link label | Add the popup link text. |
| Page | Select the page content to display. |
Share block
The Share block displays a share button for the product.
Settings:
| Setting | Description |
|---|---|
| Share label | Controls the share button text. |
Rating block
The Rating block displays product rating data when review metafields are available.
It uses Shopify review metafields such as rating and rating count.
Related buttons block
The Related buttons block displays quick links to product information and product images.
Settings:
| Setting | Description |
|---|---|
| Show icons | Shows icons instead of caret arrows. |
Image block
The Image block displays a custom image in the product information area.
Settings:
| Setting | Description |
|---|---|
| Image | Select an image. |
| Height | Set the displayed image height. |
| Link | Add an optional link. |
18. Sticky Cart Block
The Sticky cart block displays a sticky add-to-cart bar when customers scroll on the product page.
The sticky cart can include:
- Product image
- Product title
- Product price
- Variant selector
- Quantity selector
- Add to cart button
Settings:
| Setting | Description |
|---|---|
| Show quantity selector | Displays quantity selector inside the sticky cart. |
The sticky cart follows the selected variant and updates the add-to-cart button based on availability.
19. Separator and Spacing Blocks
Separator block
The Separator block adds a horizontal line between product information blocks.
Use it to visually separate important content groups.
Spacing block
The Spacing block adds vertical space between blocks.
Settings:
| Setting | Description |
|---|---|
| Desktop height | Controls spacing on desktop. |
| Mobile height | Controls spacing on mobile. |
Use spacing blocks to improve layout balance without adding custom code.
20. Recommended Product Template Setup
For most stores, we recommend this block order:
| Order | Block |
|---|---|
| 1 | Breadcrumb |
| 2 | Text or vendor |
| 3 | Title |
| 4 | Price |
| 5 | Rating |
| 6 | Variant picker |
| 7 | Sibling products, if needed |
| 8 | Inventory status |
| 9 | Buy buttons |
| 10 | Highlights |
| 11 | Description or Collapsible description |
| 12 | Collapsible rows |
| 13 | Complementary products |
| 14 | Share |
| 15 | Sticky cart |
Recommended media settings:
| Setting | Recommended value |
|---|---|
| Media position | Left |
| Media size | Large |
| Gallery layout | Stacked or Thumbnail slider |
| Image ratio | Adapt to first image |
| Show thumbnails | Enabled |
| Enable image zoom | Enabled |
| Mobile image ratio | Adapt to first image |
| Show mobile thumbnails | Enabled |
21. Notes and Limitations
Please note the following behavior:
- The Product template applies to all products assigned to that template.
- If you need different product layouts, create multiple product templates.
- Some blocks only display when the required product data or metafield exists.
- The Rating block only appears when review rating metafields are available.
- The Highlights block only appears when
theme.highlightshas content. - The Countdown block only appears when
theme.countdowncontains a future date. - The Inventory status block depends on Shopify inventory tracking.
- Complementary products depend on Shopify recommendations data.
- The Sticky cart appears only when the Sticky cart block is added.
- The product JSON-LD structured data is generated automatically by Shopify's
structured_datafilter.
Troubleshooting
If the Product template does not display correctly, please check the following:
- Make sure the product is assigned to the correct product template.
- Make sure the Product information section contains the required blocks.
- If the price appears twice, check whether price is enabled in both the Title block and Price block.
- If the variant picker does not appear, make sure the product has variants and the Variant picker block has been added.
- If color swatches do not appear, check the swatch source, swatch type, and color swatch trigger.
- If sibling products do not appear, check the option value metafield and collection handle metafield.
- If the Add to cart button is disabled, check the selected variant availability.
- If the dynamic checkout button does not appear, check the Buy buttons block setting and Shopify payment settings.
- If the inventory status does not appear, make sure inventory tracking is enabled.
- If the countdown does not appear, check that the
theme.countdownmetafield contains a future date. - If highlights do not appear, check that the
theme.highlightsmetafield has valid content. - If complementary products do not appear, Shopify may not have recommendation data for the product yet.
- If media grouping does not work, check the image alt text format after
#. - Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System.
بانٹیں:
How to set up Combined Listing
Product Highlights Block Guide