> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-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/flute-documentation/product-page.md). # Product page {% embed url="" %} ## Customize product page 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 size: 1920x434 {% endhint %} You can view, add, update, and organize all of your products and their variants from the "**Products page**" in the Shopify admin.

Settings	Description
Layout	Choose how the product information is displayed. Wide — Displays product media and information across the full screen width. Grid — Displays content within a standard container.
Enable secondary background on info	Adds a different background behind the product information area to visually separate it from the media. For visual guide show screenshot
Secondary background color scheme	Select the color scheme used for the secondary information background. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5 Scheme 6
Enable sticky content on desktop	Keeps the product information panel fixed while customers scroll through the product images on desktop devices.
Color scheme	Choose the overall color scheme for the product information section. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5 Scheme 6
Media	Desktop media width Select the width of the product media area. Small Medium Large For visual guide show screenshot Constrain media to screen height Limits the media height so that product images fit within the browser viewport. Media fit Choose how images are displayed. Original — Displays images using their original proportions. Fill — Fills the available space by cropping images if necessary. Desktop layout Select how media appears on desktop. Stacked 2 columns Thumbnails Thumbnail carousel Columns with thumbnail For visual guide show screenshot Hide thumbnail Hides the thumbnail previews for the media gallery. For visual guide show screenshot Desktop thumbnail position The desktop thumbnail position customization setting is as follows: On image Below image For visual guide show screenshot Desktop media position The desktop media position customization setting is as follows: Left Right For visual guide show screenshot Image view The Image view customization setting is as follows: Open lightbox Click and hover No zoom Horizontal gap Adjust the horizontal gap between media. For visual guide show screenshot Mobile layout Mobile layout customization setting is as follows: 2 columns Show thumbnails Hide thumbnail For visual guide show screenshot Hide other variants When enabled, only images associated with the selected variant are displayed. Enable video looping Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.

## Section Settings Screenshot #### Enable secondary background on info

#### Desktop media width

#### Desktop layout

**Desktop layout — Columns with thumbnails**

#### Hide thumbnail

#### Desktop thumbnail position

#### Desktop media position

#### Horizontal gap

#### Mobile layout

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

Block	Description
Title	The Title block displays the product title within the Main Product. The title automatically updates based on the selected product. For visual guide show screenshot
Text	The Text block allows you to display additional product information within the Product information section. You can add dynamic product data using Shopify dynamic sources, such as the product vendor, product type, SKU, custom product details, or promotional messages. Text style Controls the appearance of the text. Customization of the "Text style" in the main product section is as follows: Body — Standard paragraph text. Subtitle — Smaller supporting text. Uppercase — Displays text in uppercase format. For visual guide show screenshot
Description	The Description block displays the product description associated with the product. 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. Note: To modify the content displayed in this block, update the product description from Shopify Admin → Products → Select Product → Description. For visual guide show screenshot
Variant picker	The Variant Picker block allows customers to select different product options, such as size, color, style, or material. The available options automatically update the product price, media, availability, and purchase information based on the selected variant. Style Choose how variant options are displayed. Dropdown — Displays variant options in a dropdown menu Pills — Displays each option as clickable buttons. For visual guide show screenshot Swatch type Select how color variants are presented. Color swatch — Displays color variants as colored circles or swatches. Variant image — Displays the variant's image instead of a color swatch. Pills — Displays variants as text-based pill buttons. Variant image mode requires that all variants have an associated image. For visual guide show screenshot Color swatch style Choose the appearance of color swatches. Rounded Oval For visual guide show screenshot Pills style Customize the appearance of pill-style variant buttons. Outline — Displays buttons with a border. Fill — Displays solid-filled buttons. For visual guide show screenshot Note: 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. Variants are managed directly from your Shopify Admin. Go to: Shopify Admin → Products → Select Product → Variants From there, you can: Add or remove variants. Assign variant-specific images. Set individual prices and inventory. Update SKU and barcode information.
Pop-up	The Pop-up block adds a clickable link to the product page that opens additional information in a popup window or directs customers to a selected page. It is ideal for displaying content such as size guides, shipping details, return policies, fabric information, or care instructions without cluttering the product page. For visual guide show screenshot Link label Enter the text that customers will click to open the popup or linked content. Examples: Size Guide Shipping Information Return Policy Fabric Details Page Select an existing Shopify page to display in the popup. Examples: Size Guide Shipping Policy Return Policy Note: When a page is selected, its content is displayed in the popup automatically. Image Upload an image to display in the popup. This option is useful for: Size charts Measurement guides Product diagrams Note The Image option is used only when no page is selected. Link Add a URL to make the popup image clickable. You can link to: Shopify pages Product pages Leave this field empty if no link is required. Size Guide HTML
Gift product	The Gift Product block allows customers to add a gift wrapping option and personalized gift message directly from the product page. This feature helps enhance the gifting experience and can increase average order value by offering optional gift services. Product Select the product that will be added as the gift wrapping service when customers enable the gift option. This product is automatically added to the cart when the customer chooses to wrap the item as a gift. Gift Icon Blink Color Choose the color used for the animated gift icon displayed beside the gift wrapping option. Gift Wrapping Label Enter the text displayed next to the gift wrapping checkbox. Example: Wrap this product as a gift This label helps customers understand the purpose of the option. Gift Card Label Enter the label displayed above the personalized gift message field. Customers can enter a custom message that accompanies the gift order. For visual guide show screenshot
Size & Fit	The Size & Fit block allows you to display a visual size indicator that helps customers understand how the product fits, ranging from Too small to Too large. This feature is useful for reducing uncertainty before purchase and improving customer confidence. Heading Enter a title for the size indicator. Note: The heading is displayed only when Row content has been added. Row content Add one or more rows to display the fit information. You can also add this fit information using metafield in row content. Learn more For visual guide show screenshot
Price	The Price block displays the product's pricing information, including the current selling price, compare-at price, and sale badge (when applicable). The displayed price automatically updates when customers select different product variants. Note The Price block does not include any customizable settings. Pricing is automatically pulled from the product information configured in Shopify. For visual guide show screenshot
Buy buttons	The Buy buttons block controls the purchase actions displayed on the product page. It allows you to enable accelerated checkout, gift card recipient information, and store pickup availability to improve the shopping experience. Enable the Show dynamic checkout buttons Enable or disable dynamic checkout buttons such as Buy It Now, allowing customers to complete their purchase using their preferred accelerated payment method. On – Displays the dynamic checkout button (Shop Pay, Apple Pay, PayPal, Google Pay, etc., depending on availability). Off – Displays only the standard Add to Cart button. Note: Available payment methods depend on your store's enabled payment gateways. For visual guide show screenshot Enable the Show recipient information form for gift card Displays a recipient information form when purchasing gift card products. Options On – Customers can send gift cards directly to a recipient with a personalized message and scheduled delivery date. Off – Gift cards are purchased without recipient details. Note: This setting only applies to Gift Card products. Pickup availability Display in-store pickup availability for the selected product variant. Options On – Shows pickup availability at your store locations. Off – Hides pickup availability information. Note: Pickup availability is displayed only when local pickup has been configured in your Shopify admin.
Inventory status	The Inventory Status block displays the current stock availability of the selected product variant, helping customers quickly determine whether an item is in stock. You can customize the display style, configure the low inventory threshold, and choose whether to show the exact inventory count. Text style Select the typography style used for the inventory status text. Body Subtitle Uppercase Low inventory threshold This feature defines that if the number of products in stock falls below a certain threshold in the product range, a 'low stock' text will be displayed. 0 – Always display the inventory status whenever stock is available. Note: When the available inventory falls at or below the specified threshold, the low stock status is displayed. Show inventory count Display the exact quantity of available stock. On – Shows the current inventory quantity (e.g., 20 in stock). Off – Displays only the stock availability without the quantity. For visual guide show screenshot
SKU	Show product "SKU" for your main product. Text style Customization of the "Text style" in the main product page is as follows: Body Subtitle Uppercase
Share	The Share block adds a share button to the product page, allowing customers to quickly share the product link with others using their device's supported sharing options. This helps increase product visibility and encourages customers to promote products through messaging apps, email, or social media. Text Customize the label displayed for the share button. Note: This label appears next to the share icon on the storefront. For visual guide show screenshot
Custom Liquid	Add Apps.
Collapsible row	The Collapsible Row block allows you to display additional product information in expandable sections on the product page. Customers can click a heading to expand and view detailed information without leaving the product page. Common uses include: Product Description Shipping Policy Return Policy Heading The heading appears as the clickable title of the collapsible row. Heading Size Customization of heading size is as follow: Small Medium Large Row content Enter custom content directly into the collapsible row. This content becomes visible when customers expand the section. Row content from page Displays content from an existing Shopify Page. Instead of manually entering content, you can select a page from your Shopify store. For visual guide show screenshot
Product rating	Displays the average product rating in stars with the number of reviews in parenthesis
Complementary products	The Complementary Products block displays recommended products that pair well with the current product. These recommendations help customers discover related items, increase cross-selling opportunities, and improve the average order value. Recommendations are powered by Shopify's Search & Discovery app. Note: To display complementary products, install the Shopify Search & Discovery app and assign complementary products to each product in the Shopify admin. Learn how to add complementary products Heading Defines the title displayed above the complementary product recommendations. Show as collapsible row Display the complementary products inside a collapsible (accordion) section instead of showing them expanded by default. Product display limit "Product display limit" is to specify how many products to show in a section. You can show a minimum of “1” and a maximum of “10” products. Products per page limit: Control how many products appear in each row. You can show a 2 or 3 columns in "1" slide. Note: This setting is unavailable when Desktop media width is set to Large. Product card Select the image aspect ratio used for complementary product cards. Portrait Square

## Block Settings Screenshot #### Text

#### Title

#### Price

#### Variant picker style

#### Swatch type

{% hint style="danger" %} **Note:** This '**Swatch type**' setting only works when '**Variant picker style**' is set to '**Pills**'. {% endhint %} #### Color swatch style

#### Pills style

#### Description

#### Pop-up

#### Gift product

#### Size & Fit [Learn how to add product metafield for Size & Fit](#setting-the-product-details-metafield)

#### Buy buttons

#### Complementary products [Steps to add complementary products](#setting-the-complementary-products-metafield)

#### Share

#### Collapsible row

#### Inventory status

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="" %} This “New feature” allows you to set images according to your style: {% embed url="" %} *** ## Setting the Product details(Metafield) 1. From your Shopify admin, go to **Settings** > **Metafields and metaobjects** > **Products**

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

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

*** ## Setting the Complementary products(Metafield) 1. In your admin, within **Products**, click on the product you want to add the Complementary products.

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

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

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

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

*** ## 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 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.

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.