> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/lyra-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/lyra-documentation/product-page.md).

# Product page

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

## Customize product page <a href="#productpage" id="productpage"></a>

The **Product Information** section controls the layout, appearance, media presentation, and content blocks displayed on your product page. This section is designed to help customers understand product details, select variants, review important information, and complete their purchase with confidence.

The Lyra theme provides a flexible block-based system, allowing you to add, remove, reorder, and customize product information elements without editing code.

### How to Access

1. Log in to your Shopify Admin.
2. Go to **Online Store → Themes**.
3. Click **Customize** on the Lyra theme.
4. Open a Product Template.
5. Select **Product Information**.

After making changes, click **Save**.

### When to Use Product Information Section

Use the **Product Information** section when you want to:

* Display complete product details and purchasing options.
* Showcase product images and videos professionally.
* Help customers select variants and customizations.
* Highlight product benefits and trust signals.
* Improve conversion with clear pricing and purchase actions.
* Provide shipping, payment, and delivery information.
* Create a complete and user-friendly product page experience.

{% hint style="info" %}
**Recommendation Size**\
Product image desktop size: 1000x1200
{% endhint %}

You can view, add, update, and organize all of your products and their variants from the "**Products page**" in the Shopify admin.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li><strong>Fluid</strong> — Section expands with reduced side spacing for a modern flexible layout</li><li><strong>Container</strong> — Section stays inside the theme container width</li></ul></td></tr><tr><td>Enable Breadcrumb</td><td><p>Displays breadcrumb navigation above the product page. </p><p></p><p>For visual guide show <a href="#enable-breadcrumb"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Enable sticky content on desktop</td><td>Keeps the product information panel visible while customers scroll through product images.</td></tr><tr><td>Color scheme</td><td><p>Select the color scheme used within the Product Information section. </p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Media</td><td><p>Media settings control how product images, videos, and other product media are displayed.</p><p></p><p><strong>Desktop media width</strong><br>Controls the size of the media gallery relative to the product information column.</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p>For visual guide show <a href="#desktop-media-width"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Constrain media to screen height</strong><br>By enabling this checkbox, Limits product media height to fit within the visible screen area. </p><ul><li><strong>Enabled</strong> — Prevents excessively tall images</li><li><strong>Disabled</strong> — Displays media at full natural height       </li></ul><p></p><p><strong>Media fit</strong></p><p>Controls how images fit within the media container.</p><ul><li><strong>Original</strong> — Displays images using their original proportions.</li><li><strong>Fill</strong> — Fills the entire media area.</li></ul><p></p><p><strong>Desktop layout</strong><br>Controls the arrangement of product media and content.</p><ul><li><strong>Stacked —</strong> Displays all product images in a vertical stacked layout, allowing customers to view multiple product images at once while scrolling.</li><li><strong>2 columns —</strong> Displays product images in a two-column grid layout, showing multiple media items side by side for easier comparison.</li><li><strong>3 columns —</strong> Displays product images in a three-column grid layout, showing multiple media items side by side for easier comparison.</li><li><strong>Thumbnails —</strong> Displays a primary product image with thumbnail navigation below it, allowing customers to switch between media items.</li><li><strong>Thumbnail carousel —</strong> Displays a main product image with thumbnail navigation and carousel functionality for browsing larger media galleries.</li></ul><p>For visual guide show <a href="#desktop-layout"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Enable full width media carousel</strong> </p><p>Displays product media using a wider carousel layout. </p><p><em><strong>Note:</strong> This feature will only work when desktop layout is set to "2 columns" or "3 columns".</em></p><p></p><p><strong>Desktop media position</strong></p><p>The desktop media position customization setting is as follows:</p><ul><li><strong>Left —</strong> Images appear on the left side.</li><li><strong>Right —</strong> Images appear on the right side.</li></ul><p>For visual guide show <a href="#desktop-media-position"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Image zoom</strong></p><p>Controls image zoom behavior.</p><ul><li><strong>Open lightbox —</strong> Opens images in a fullscreen gallery.</li><li><strong>Click and hover —</strong> Allows customers to zoom images when hovering or clicking.</li><li><strong>No zoom —</strong> Disables image zoom functionality.</li></ul><p></p><p><strong>Enable share</strong> </p><p>The Share button allows customers to quickly share a product page with others using a direct link.</p><p></p><p>This makes it easy to promote products through messaging apps, email, or other sharing platforms. </p><p></p><p><em><strong>Note</strong>: This settings only visible when '<strong>Share button</strong>' block added in product page.</em></p><p></p><p>For visual guide show <a href="#enable-share"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Hide other variants</strong><br>Shows only media related to the selected variant.</p><p></p><p>This helps customers focus on the chosen product variation.</p><p><br><strong>Enable video looping</strong><br>Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile layout</strong></p><p>Mobile layout customization setting is as follows:</p><ul><li><strong>2 columns</strong> — Displays product media in a two-column grid layout on mobile devices, allowing customers to view multiple images at once.</li><li><strong>Show thumbnails</strong> — Displays product thumbnails below the media.</li><li><strong>Hide thumbnail</strong> — Hides thumbnail navigation. </li></ul><p>For visual guide show <a href="#mobile-layout"><mark style="color:blue;">screenshot</mark></a></p></td></tr></tbody></table>

<figure><img src="/files/uB7ysA9vvpUS8d0Hgp41" alt=""><figcaption></figcaption></figure>

## Section settings

### Enable breadcrumb

<div data-with-frame="true"><figure><img src="/files/Me9hhqGGTjniV2NjROYI" alt=""><figcaption><p><mark style="color:$primary;"><strong>Enable breadcrumb</strong></mark></p></figcaption></figure></div>

### Desktop media width

<div data-with-frame="true"><figure><img src="/files/ybsBe54KwA6m27sIocIa" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop media width — Small</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/HoXsBbjiQ5yP6wnuWPby" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop media width — Medium</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/vLdhhyZyDmPKOtgGhKmr" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop media width — Large</strong></mark></p></figcaption></figure></div>

### Desktop layout

<div data-with-frame="true"><figure><img src="/files/5vJ61SvecSPnjNVCstp3" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop layout — Stacked</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/1Hejdn3Hh00H5dWDo2d3" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop layout — 2 columns</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/BAJ1dZIU0Jnd53qq2PvE" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop layout — 3 columns</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/wgLpIeOYRGxk7nM3ca98" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop layout — Thumbnails</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/T1oDjxuWyCllp1ajV5Js" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop layout — Thumbnail carousel</strong></mark></p></figcaption></figure></div>

### Thumbnail image ratio

<div data-with-frame="true"><figure><img src="/files/lDP4nTmTdF4L5wCPnZJn" alt=""><figcaption><p><mark style="color:$primary;"><strong>Thumbnail image ratio - Adapt to image</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/STROkIvXT71CdpIkBwXJ" alt=""><figcaption><p><mark style="color:$primary;"><strong>Thumbnail image ratio - Portrait</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/E0FoxkRQBjXf1GX6TOmj" alt=""><figcaption><p><mark style="color:$primary;"><strong>Thumbnail image ratio - Square</strong></mark></p></figcaption></figure></div>

### Mobile layout

<div data-with-frame="true"><figure><img src="/files/bNV9Qnn85SA1ZkqG9CM4" alt=""><figcaption><p><mark style="color:$primary;"><strong>Mobile layout — 2 columns</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/aQ6kDTSsBuT99qvfTCQE" alt=""><figcaption><p><mark style="color:$primary;"><strong>Mobile layout — Show thumbnails</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/DDAW3s6F5S0cUha5fyoK" alt=""><figcaption><p><mark style="color:$primary;"><strong>Mobile layout — Hide thumbnails</strong></mark></p></figcaption></figure></div>

### Desktop media position

<div data-with-frame="true"><figure><img src="/files/h1yOLPYxGtmZDunYtGTj" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop media position — Left</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/rQaSoIxVYkQPjMNFfFhx" alt=""><figcaption><p><mark style="color:$primary;"><strong>Desktop media position — Right</strong></mark></p></figcaption></figure></div>

### **Enable share**

<div data-with-frame="true"><figure><img src="/files/puUMC1tG5ZBLqnj9lfnx" alt=""><figcaption><p><mark style="color:$primary;"><strong>Enable share</strong></mark></p></figcaption></figure></div>

{% hint style="danger" %}
**Note:** This enable share button only works when '**Share button**' block added to the product page.
{% endhint %}

## Add block

Following are the blocks you can add to your “Main product:”

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td><p><strong>Text</strong></p><p>The <strong>Text</strong> block allows you to display additional product information within the Product information section.</p><p></p><p>You can add dynamic product data using Shopify dynamic sources, such as the product vendor, product type, SKU, custom product details, or promotional messages.</p><p></p><p>For visual guide show <a href="#text"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Text style</strong></p><p>Controls the appearance of the text.</p><p></p><p>Customization of the "Text style" in the featured product section is as follows:</p><ul><li><strong>Body</strong> — Standard paragraph text.</li><li><strong>Subtitle</strong> — Smaller supporting text.</li><li><strong>Uppercase</strong> — Displays text in uppercase format.</li></ul></td></tr><tr><td>Title</td><td><p>The <strong>Title</strong> block displays the product title within the Main Product.</p><p></p><p>The title automatically updates based on the selected product.</p><p></p><p>For visual guide show <a href="#title"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Heading Size</strong></p><p>Controls the size of the product title.</p><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Price and inventory</td><td><p>The <strong>Price and Inventory</strong> block displays essential purchasing information, including the product price, inventory availability, stock status, and tax information.</p><p></p><p>This helps customers understand product availability before making a purchase. </p><p></p><p><strong>Inventory status</strong> </p><p>Displays the current stock availability of the selected product. </p><p></p><p><strong>Text style</strong></p><p>Controls the appearance of the inventory status text.</p><p>Customization of the "Text style" is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><p><strong>Low inventory threshold</strong> </p><p>Determines when the product should be considered low in stock.</p><p></p><p>When the available quantity falls below the specified value, the inventory status can display a low-stock message.</p><p></p><p><strong>Example:</strong></p><ul><li>Threshold: <strong>10</strong></li><li>Inventory: <strong>8</strong></li><li>Status: <strong>Low Stock</strong></li></ul><p></p><p><em><strong>Note:</strong> Set the value to <strong>0</strong> to always display available stock when inventory tracking is enabled.</em> </p><p></p><p><strong>Show inventory count</strong> </p><p>Displays the exact number of available units in stock.</p><p></p><p><strong>Examples:</strong></p><ul><li>45 in stock</li><li>8 in stock</li><li>2 in stock</li></ul><p>When disabled, only the stock status is shown without the quantity. </p><p></p><p>For visual guide show <a href="#price-and-inventory"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>SKU</td><td><p>Show product "SKU" for your main product.</p><p></p><p><strong>Text style</strong></p><p>Customization of the "Text style" in the main product page is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Variant picker</td><td><p>The <strong>Variant Picker</strong> block allows customers to select different product variants such as color, size, material, style, or other available options before purchasing.</p><p></p><p>The block automatically displays variant options based on the selected product and updates the product price, availability, and media when a different variant is selected.</p><p></p><p><strong>Type</strong></p><p>Controls how variant options are displayed to customers. The variant type is given below.</p><ul><li><strong>Dropdown</strong> — Displays variant options in a dropdown menu.</li><li><strong>Pills</strong> — Displays variant options as clickable buttons. </li></ul><p>For visual guide show <a href="#variant-picker-type"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Swatch type</strong></p><p>Controls how variant options are visually displayed when using swatches.</p><p>Following is the color swatches type customization of the section:</p><ul><li><strong>Color swatch</strong> — Displays color variants as colored circles or swatches.</li><li><strong>Variant image</strong> — Displays the variant's image instead of a color swatch.</li><li><strong>Pills</strong> — Displays variants as text-based pill buttons.</li></ul><p>For visual guide show <a href="#variant-picker-type"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><em><strong>Note:</strong> The Variant Picker block only appears when the selected product contains multiple variants. If a product has only one variant, variant selection options will not be displayed.</em></p></td></tr><tr><td>Buy buttons</td><td><p>The Buy Buttons block displays the primary purchase actions for a product, allowing customers to add items to their cart or proceed directly to checkout.</p><p></p><p>This block is an essential part and helps customers complete purchases quickly and easily.</p><p></p><p><strong>Enable the Show dynamic checkout buttons</strong> box to display any dynamic checkout options below the Add to Cart button.</p><p></p><p><strong>Show dynamic checkout buttons disabled —</strong> Only the standard Add to Cart button is displayed.</p><p></p><p><strong>Enable the Show recipient information form for gift card products</strong> box to display gift recipient form. </p><p></p><p><strong>Show Pickup Availability</strong></p><p>Displays local pickup availability information on the product page.</p><p>Customers can view whether a product is available for pickup at a physical store location. </p><p></p><p>For visual guide show <a href="#buy-buttons"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Icon with text</td><td><p>The Icon with Text block displays a row of icons or images paired with short text labels.</p><p></p><p><strong>Layout</strong></p><p>Icon with text layout customizations in a page are as follows:</p><ul><li>Horizontal</li><li>Vertical</li></ul><p><strong>Content :</strong> </p><p>The block supports multiple content items.</p><p></p><p><strong>First icon</strong></p><p>Select an icon from the theme's built-in icon library.</p><p></p><p><strong>First image</strong><br>Upload a custom image instead of using a built-in icon. <strong>Note:</strong> When an image is uploaded, it may replace the selected icon depending on the theme configuration.<br><br><strong>First heading</strong><br>Enter the text displayed below or beside the icon. Leave the heading blank to hide that icon column.<br></p><p><strong>Direction</strong></p><p>Icon with text layout customizations in a page are as follows:</p><ul><li>Row</li><li>Column</li></ul><p>For visual guide show <a href="#icon-with-text"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Contact details</td><td><p>The <strong>Contact Details</strong> block allows you to display a quick contact section directly on the product page, helping customers easily reach your business for product inquiries, support questions, customization requests, or order assistance.</p><p></p><p>When customers click the contact link, a popup window opens with multiple contact options such as WhatsApp, email, phone number, and business hours.</p><p></p><p><strong>Image</strong></p><p>Upload an image or icon to display alongside the contact card. </p><p></p><p><strong>Supported Formats</strong></p><ul><li>SVG (Recommended)</li><li>PNG</li><li>JPG</li><li>WebP</li></ul><p>  </p><p><strong>Heading</strong></p><p>Defines the message displayed inside the contact card. </p><p></p><p><strong>Popup Details</strong></p><p>The popup contains all contact information customers can use to communicate with your business. </p><p></p><p><strong>Popup Heading</strong></p><p>Defines the main title displayed at the top of the popup. </p><p></p><p><strong>Popup Description</strong></p><p>Displays supporting text below the popup heading. </p><p></p><p><strong>WhatsApp Title</strong></p><p>Defines the button title. </p><p></p><p><strong>WhatsApp Number</strong></p><p>Enter your WhatsApp number in international format. <strong>Example</strong></p><p>+911234567890 </p><p><em><strong>Note</strong>: Enter the number without spaces or special characters if requested by the theme.</em> </p><p></p><p><strong>WhatsApp Message</strong></p><p>Defines the pre-filled message customers send when opening WhatsApp. </p><p></p><p><strong>Email Title</strong></p><p>Defines the heading displayed above the email address. </p><p></p><p><strong>Email Address</strong></p><p>Enter the email address customers should contact. </p><p></p><p><strong>Phone Title</strong></p><p>Defines the phone contact heading. </p><p></p><p><strong>Phone Number</strong></p><p>Enter the phone number customers can call. </p><p></p><p><strong>Opening Hours</strong></p><p>Displays business hours inside the popup.</p></td></tr><tr><td>Custom gifts</td><td><p>The <strong>Custom Gifts</strong> block allows you to promote personalized gifting services directly on the product page. </p><p></p><p>This feature helps customers discover custom gift options, personalized products, and special gifting services while shopping.</p><p></p><p>When customers click the Custom Gifts section, a popup opens displaying additional information, featured gift collections, and a call-to-action that encourages customers to explore personalized gift options.</p><p></p><p><strong>Image</strong></p><p>Upload an image or icon representing your gifting service. </p><p></p><p><strong>Heading</strong></p><p>Defines the primary title displayed on the gift card. Small </p><p></p><p><strong>Text</strong></p><p>Displays supporting information below the heading. </p><p></p><p><strong>Sub Content</strong></p><p>Displays a secondary message below the small text. </p><p></p><p><strong>Popup Details</strong></p><p>When customers click the Custom Gifts card, a popup opens with additional information and recommendations. </p><p></p><p><strong>Popup Heading</strong></p><p>Defines the title displayed at the top of the popup. </p><p></p><p><strong>Popup Description</strong></p><p>Displays detailed information about your gifting service. </p><p></p><p><strong>Collections</strong></p><p>Select one or more collections to showcase inside the popup. </p><p></p><p><strong>Button Text</strong></p><p>Defines the call-to-action button displayed inside the popup. </p></td></tr><tr><td>Share button</td><td><p><strong>Text</strong></p><p>Input the text to be displayed in this section.</p><p></p><p>Enabling the checkbox below will display the share button.</p><ul><li>Facebook</li><li>Twitter</li><li>Pinterest</li></ul><p>For visual guide show <a href="#share-button"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Shipping/payment</td><td><p>The Shipping/Payment block helps build customer trust by displaying important delivery and payment information directly on the product page.</p><p></p><p>It allows you to highlight shipping benefits and supported payment methods before customers complete their purchase.</p><p></p><p><strong>First icon</strong></p><p>Choose an icon from the available icon library.</p><p></p><p><strong>First heading</strong> </p><p>To display the heading for the Shipping/payment block, add text here. </p><p></p><p><strong>Second icon</strong></p><p>Choose a second icon from the available icon library.</p><p></p><p><strong>Second heading</strong> </p><p>To display the heading for the Shipping/payment block, add text here. </p><p></p><p><strong>Show payment icons</strong> </p><p>By enabling this checkbox you can show the “Payment icons”.</p></td></tr><tr><td>Complementary products</td><td><p>The <strong>Complementary Products</strong> block allows you to showcase related products directly on the product page.</p><p></p><p>These recommendations help customers discover products that pair well with the item they are currently viewing, increasing product visibility and encouraging larger orders.</p><p></p><p>Complementary products are powered by Shopify's <strong>Search &#x26; Discovery</strong> app and can be manually curated to create highly relevant product recommendations. <a href="#setting-the-complementary-products-metafield"><mark style="color:blue;">Learnmore</mark></a></p><p></p><p><strong>Heading</strong><br>Defines the title displayed above the complementary product recommendations.</p><p></p><p><strong>Maximum products to show</strong>: </p><p>Controls the total number of complementary products displayed. You can show a minimum of “1” and a maximum of “10” products.</p><p></p><p><strong>Number of products per page</strong>: </p><p>Controls how many products appear within the carousel view. You can show a minimum of "1" and a maximum of "4" products in "1" slide.<br><br><strong>Enable add to cart button</strong><br>Displays an Add to Cart button directly on complementary product cards." </p><p></p><p><strong>Image ratio</strong> </p><p>Controls how product images are displayed within the complementary products section. </p><ul><li><strong>Adapt to Image —</strong> Displays images using their original proportions.</li><li><strong>Square —</strong> Displays all images in a square format.</li><li><strong>Portrait —</strong> Displays images in a vertical format.</li></ul><p></p><p><strong>Color scheme</strong></p><p>Selects the color scheme used for the complementary product cards. </p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr><tr><td>Description</td><td><p>The <strong>Description</strong> block displays the product description associated with the product.</p><p></p><p>This content is pulled directly from the product details in your Shopify admin and helps customers understand the product's features, benefits, and key information.</p><p></p><p><em><strong>Note:</strong> To modify the content displayed in this block, update the product description from <strong>Shopify Admin → Products → Select Product → Description</strong>.</em>  </p><p></p><p><strong>Show Description Below the Gallery</strong></p><p>Displays the product description underneath the product image gallery instead of within the product information column. </p><ul><li><strong>Enabled</strong> — The description appears below the product media gallery.</li><li><strong>Disabled</strong> — The description remains inside the product information. </li></ul><p></p><p><strong>Heading</strong></p><p>Defines the title displayed above the product description. </p><p></p><p><strong>Show as Collapsible Row</strong></p><p>Displays the description inside an expandable accordion section.  </p><ul><li><strong>Enabled</strong> — Customers can click the heading to expand or collapse the content.</li><li><strong>Disabled</strong> — The full description remains visible at all times.</li></ul></td></tr><tr><td>Custom badge</td><td><p>The <strong>Custom Badge</strong> block allows you to display a custom promotional label directly on the product page. </p><p></p><p>This badge appears above the product title and helps draw attention to important product highlights, special offers, limited-time promotions, or product status. </p><p></p><p><strong>Badge Text</strong></p><p>The Badge Text field controls the text displayed inside the custom badge.</p></td></tr><tr><td>Custom engraving</td><td><p>The <strong>Custom Engraving</strong> block allows customers to enter personalized engraving text directly on the product page before adding a product to their cart.</p><p></p><p>This feature is ideal for products that support customization, helping customers create meaningful and personalized purchases for special occasions, gifts, and memorable moments. </p><p></p><p><strong>Custom Engraving Label</strong></p><p>Defines the placeholder text displayed inside the engraving input field. </p></td></tr><tr><td>Product details</td><td><p>The <strong>Product Details</strong> block allows you to highlight important product specifications, measurements, materials, and key attributes in a structured and visually organized format. </p><p></p><p><strong>First Detail Card</strong></p><p>The first card displays a heading and supporting content. </p><p></p><p><strong>Heading</strong></p><p>Defines the title of the first specification card. </p><p></p><p><strong>Text</strong></p><p>Displays the content associated with the heading. </p><p></p><p><strong>Second Detail Card</strong></p><p>Displays another product specification. </p><p></p><p><strong>Third Detail Card</strong></p><p>Displays an additional product detail or attribute. </p><p></p><p><strong>Dynamic Product Information</strong></p><p>The Product Details block supports dynamic sources through Shopify metafields.</p><p>This allows information to automatically update for each product. <a href="#setting-the-product-details-metafield"><mark style="color:blue;">Learn more</mark></a></p></td></tr><tr><td>Content</td><td><p>The Content block allows you to add custom information, promotional messages, brand details, product highlights, or additional descriptions directly within the product information area.</p><p></p><p><strong>Title</strong></p><p>A heading used to introduce the content.<br></p><p><strong>Content</strong></p><p>A rich text area for additional information.</p><p></p><p><strong>Content from the page</strong></p><p>You can automatically display content from an existing Shopify page instead of entering content manually.</p><p></p><p><strong>How To Use</strong></p><ol><li>Create a page in Shopify Admin.</li><li>Go to: <strong>Online Store → Pages</strong></li><li>Select the desired page.</li><li>Choose the page from the Content From Page setting.<br></li></ol><p><strong>Color scheme</strong></p><p>Controls the appearance of the content block.</p><p>In this section, you can change the background and foreground color of the content using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul><p></p><p><strong>Spacing around block</strong><br>Controls the space surrounding the content block.</p><p></p><p>By enabling this checkbox, you can see spacing around block, You can set a minimum of “0” seconds and a maximum of “20” seconds. enabling this checkbox, you can see spacing around block.</p></td></tr><tr><td>Custom Liquid</td><td>Add Apps.</td></tr><tr><td>Collapsible row</td><td><p>The <strong>Collapsible Row</strong> block allows you to display additional product information in expandable sections on the product page.</p><p></p><p></p><p>Customers can click a heading to expand and view detailed information without leaving the product page.</p><p></p><p>Common uses include:</p><ul><li>Product Description</li><li>Shipping Policy</li><li>Return Policy</li></ul><p></p><p><strong>Heading</strong></p><p>The heading appears as the clickable title of the collapsible row.</p><p></p><p><strong>Icon</strong></p><p>Displays an optional icon next to the heading.</p><p></p><p><strong>Row Content</strong></p><p>Enter custom content directly into the collapsible row.</p><p></p><p>This content becomes visible when customers expand the section.</p><p></p><p><strong>Row Content from Page</strong></p><p>Displays content from an existing Shopify Page.</p><p></p><p>Instead of manually entering content, you can select a page from your Shopify store.</p><p></p><p><strong>Open Collapsible Row</strong></p><p>Controls whether the row is expanded when the product page first loads.</p><p></p><ul><li><strong>Enabled —</strong> The content is visible immediately when customers open the product page.</li><li><strong>Disabled —</strong> The row remains collapsed until clicked.</li></ul></td></tr><tr><td>Size guide</td><td><p>The <strong>Size Guide</strong> block allows you to display a size chart directly on the product page. </p><p></p><p>This helps customers choose the correct size before purchasing, reducing uncertainty and minimizing returns.</p><p></p><p>When clicked, the size guide opens a popup or modal displaying your selected size chart content.</p><p></p><p><strong>Icon</strong> </p><p>Select an icon to display alongside the size guide link.</p><p></p><p><strong>Heading</strong><br>Defines the text displayed on the product page.<br><br><strong>Select size chart</strong><br>Choose the size chart that will be displayed when customers click the size guide link.<br><br><a href="https://webibazaar.gitbook.io/lyra-documentation/product-page/size-guide"><strong>Size Guide HTML</strong></a></p></td></tr><tr><td>Product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis</td></tr></tbody></table>

## Block Settings

### Text

<div data-with-frame="true"><figure><img src="/files/pMftqGGrfNdLo2Ou4hyg" alt=""><figcaption><p><mark style="color:$primary;"><strong>Text block</strong></mark></p></figcaption></figure></div>

### Title

<div data-with-frame="true"><figure><img src="/files/koBmTAP2ah19amXbIIW8" alt=""><figcaption><p><mark style="color:$primary;"><strong>Title block</strong></mark></p></figcaption></figure></div>

### Price and inventory

<div data-with-frame="true"><figure><img src="/files/6RNTx6U2x4dfaCMCXtGD" alt=""><figcaption><p><mark style="color:$primary;"><strong>Price and inventory</strong></mark> </p></figcaption></figure></div>

### Variant picker type

<div data-with-frame="true"><figure><img src="/files/snmDEX33IYhh4UQrYZW1" alt=""><figcaption><p><mark style="color:$primary;"><strong>Variant picker type — Dropdown</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/IDqkKPyXA84aXcDxtnkR" alt=""><figcaption><p><mark style="color:$primary;"><strong>Variant picker type — Pills</strong></mark></p></figcaption></figure></div>

### Swatch type

{% hint style="danger" %}
For Swatch type **variant picker type** is set to '**Pills**'
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/cWHz0MjQVLlj5mHko0fI" alt=""><figcaption><p><mark style="color:$primary;"><strong>Swatch type — Color swatch</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/pkcb8JeO6BYgYrwcfYPh" alt=""><figcaption><p><mark style="color:$primary;"><strong>Swatch type — Pills</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/KQEMkZ3IX5JcbQ0FiDEs" alt=""><figcaption><p><mark style="color:$primary;"><strong>Swatch type — Variant image</strong></mark></p></figcaption></figure></div>

{% hint style="danger" %}
Variant image mode requires that all variants have an associated image.
{% endhint %}

### Buy buttons

<div data-with-frame="true"><figure><img src="/files/zFEG9PD1OKl6XlSOHURS" alt=""><figcaption><p><mark style="color:$primary;"><strong>Buy buttons</strong></mark></p></figcaption></figure></div>

### Icon with text

<div data-with-frame="true"><figure><img src="/files/MxqD3A4c8dXZ7CW0u6H7" alt=""><figcaption><p><mark style="color:$primary;"><strong>Icon with text layout — Horizontal</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/N8YjYXV3oCyIPhqdHHzW" alt=""><figcaption><p><mark style="color:$primary;"><strong>Icon with text layout — Vertical</strong></mark></p></figcaption></figure></div>

### Product details

<div data-with-frame="true"><figure><img src="/files/8OEWxc27JuQuzuBV1YDR" alt=""><figcaption><p><mark style="color:$primary;"><strong>Product details</strong></mark></p></figcaption></figure></div>

### Share button

<div data-with-frame="true"><figure><img src="/files/Pa5Oj6ChOipagPk5VZLD" alt=""><figcaption><p><mark style="color:$primary;"><strong>Share button</strong></mark></p></figcaption></figure></div>

### Share

<div data-with-frame="true"><figure><img src="/files/k6lLGaUDCrpeVtCazKYh" alt=""><figcaption><p><mark style="color:$primary;"><strong>Share</strong></mark></p></figcaption></figure></div>

### Shipping/Payment

<div data-with-frame="true"><figure><img src="/files/BaGwFLFKO28qjDwQ0Ta5" alt=""><figcaption><p><mark style="color:$primary;"><strong>Shipping / Payment</strong></mark></p></figcaption></figure></div>

The new product page template is built with the new features introduced in Online Store 2.0. The use of JSON templates allows using dynamic sections to customize product pages according to your style.

You can move blocks from one block to another. Each block has six small dots that you can click and hold to drag and drop them between one another.

{% embed url="<https://youtu.be/yhNNnl5ySFM>" %}

This “New feature” allows you to set images according to your style:

{% embed url="<https://youtu.be/f5zz7cynO8M>" %}

***

## Setting the Product details(Metafield)

1. From your Shopify admin, go to **Settings** > **Custom data** > **Products**

<figure><img src="/files/7h5j5WdsOIwxfizY0xTI" alt=""><figcaption></figcaption></figure>

2. Click **Add definition**
3. &#x20;Enter your desired name in the **Name** field and click **Select type** then select **Single line text.**

<figure><img src="/files/RDXgUty4v4fxiV0JOc2a" alt=""><figcaption></figcaption></figure>

4. You should see the **metafiled** in the list of definitions by now.

<figure><img src="/files/I4L8LBgSe52u5lnPAZCU" alt=""><figcaption></figcaption></figure>

<div data-with-frame="true"><figure><img src="/files/p1MHbGN7VA1wkBrCS3ht" alt=""><figcaption><p><mark style="color:$primary;"><strong>Select product From shopify admin</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/zJ47woetNc50Uzp2tPm0" alt=""><figcaption><p><mark style="color:$primary;"><strong>Open selected product and add created metafields value</strong></mark></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/ytMXeCwVxodfFazO8koW" alt=""><figcaption><p><mark style="color:$primary;"><strong>Open product page settings in customization and select metafields where it's value you want to show as you can show in screenshot</strong></mark></p></figcaption></figure></div>

## Setting the Complementary products(Metafield)

Complementary products are powered by Shopify's **Search & Discovery** app and can be manually curated to create highly relevant product recommendations.

## Before You Begin

The Complementary Products feature uses Shopify's **Search & Discovery App**.

#### Requirement

Install and configure Shopify's Search & Discovery app before using this feature.

Using the app, you can manually assign complementary products to individual products.

#### Example

If a customer is viewing:

**14K Gold Bracelet**

You may recommend:

* Matching Necklace
* Coordinating Earrings
* Jewelry Cleaning Kit
* Gift Packaging

1. In your admin, within **Products**, click on the product you want to add the Complementary products.

<figure><img src="/files/djynSBvo9ojbsdPQ3u4P" alt=""><figcaption></figcaption></figure>

2. Scroll down to the **Metafields.** You should see the **Complementary products** here.

<figure><img src="/files/Yo5T19iwce4RA5r4ioRw" alt=""><figcaption></figcaption></figure>

3. To add products, click on **Complementary products** field.
4. Select products.

<figure><img src="/files/7ZEskL3aIYQ1zDGkWEGR" alt=""><figcaption></figcaption></figure>

5. Select a product and click on **Add**.

<figure><img src="/files/8I6wD5lWIeM1568dnOiR" alt=""><figcaption></figcaption></figure>

6. Click **Save** to save your changes.

<figure><img src="/files/l1AtzQo4PgPdOzLtnnAp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/GJOTKPCNdXfgfgmDAg9l" alt=""><figcaption></figcaption></figure>

## Product media

Product media include images, 3D models, and videos. Using media like 3D models for your products provides your customer with a better understanding of the function and size of an item and increases sales of your products.

Customers that are browsing your online store prefer to see images on product pages. Using media <https://www.youtube.com/watch?v=O5jDlAR2avY&ab_channel=MotorOctane> like video, 3D models, and augmented reality on your product page can increase sales of your products, leading to a better customer experience and more sales. It’s important that the media you add about your products is of high quality and meet the requirements for them to display properly.

### **Images**

Use of product images is done for displaying products across Shopify’s sales channels, including on your online store and Shopify POS. The best file type for most product images is **PNG, JPEG, and GIF**.

Your product and collection images can be any size up to 4472 x 4472 px or 20 megapixels. Product and collection images need to have a file size smaller than 20 MB to be added to Shopify.

When you add an image, different sizes are automatically created for use in different areas of your online store theme.

### **3D models**

3D models are virtual representations of an object in three dimensions. 3D models can give your customers a better sense of your products' size, scale, and other details.

You need to make sure that your 3D model files meet the following requirements before you [add them to your online store](https://help.shopify.com/en/manual/products/product-media/add-media):

* File size: Up to 500 MB
* File type: **GLB, USDZ**

### **Videos**

You can add videos for your product in two ways: uploading a video file or embedding a YouTube or Vimeo video link. If you’re uploading video files, then make sure that they meet the following requirements:

* Video length: Up to 10 minutes
* Video size: Up to 1 GB
* Video resolution: Up to 4K (4096 x 2160 px)
* Video file type: **.mp4** or **.mov**

You don't need to meet these requirements for embedding YouTube or Vimeo videos.

In browsers that support streaming, videos display in either 480p, 720p, or 1080p, depending on the viewer’s connection speed and the resolution of the video. However, in browsers that do not support streaming, the video automatically display’s in the highest resolution available.

<figure><img src="/files/DkZ9DmEsH3aMUeCe8AyD" alt=""><figcaption></figcaption></figure>

You can also add a video by embedding a YouTube video link. Click the **Add file from URL** link. Then, you can paste the YouTube URL of your video into the vital field.

<figure><img src="/files/azSz1ttH6kP2gW8QmIy5" alt=""><figcaption></figcaption></figure>

### Best Practices

* [x] Use high-quality product images and videos.
* [x] Keep product titles clear and descriptive.
* [x] Display accurate pricing and inventory information.
* [x] Add variant options with clear labels.
* [x] Highlight key product benefits using icons.
* [x] Include size guides and customization options when applicable.
* [x] Keep the Add to Cart button clearly visible above the fold.