> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/cello-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/cello-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 cello theme provides a flexible block-based system, allowing you to add, remove, reorder, and customize product information elements without editing code.

#### How to Access <a href="#how-to-access" id="how-to-access"></a>

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

After making changes, click **Save**.

#### When to Use Product Information Section <a href="#when-to-use-product-information-section" id="when-to-use-product-information-section"></a>

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="warning" %}
**Recommendation Size**\
Product image size: 1500x1500
{% 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>Enable full width layout</td><td><p>Enable this option to display the Product Information section across the full available width of the screen.</p><p></p><p>This can provide a larger media presentation and more spacious product details layout.</p></td></tr><tr><td>Enable sticky content on desktop</td><td><p>Keeps the product information area visible while customers scroll through the product media on desktop.</p><p></p><p>This is useful for keeping important purchasing information such as price, variants, and <strong>Add to Cart</strong> accessible while browsing product images.</p></td></tr><tr><td>Media</td><td><p><strong>Desktop media width</strong><br>Controls the amount of horizontal space allocated to the product media area on desktop.</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>Enable this option to limit the product media height according to the available screen height.</p><p></p><h4><br><br><strong>Media fit</strong></h4><p>Controls how product images fit within the media container.</p><ul><li><strong>Original —</strong> Displays the media according to its original proportions.</li><li><strong>Fill —</strong> Fills the available media area.</li></ul><p></p><p><strong>Desktop layout</strong><br>Controls how product media is arranged on desktop:</p><ul><li>Stacked</li><li>2 columns</li><li>Thumbnails</li><li>Thumbnail left carousel</li><li>Thumbnail right carousel</li><li>Thumbnail bottom carousel</li></ul><p>For visual guide show <a href="#desktop-layout"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Desktop media position</strong></p><p>Controls which side of the page displays the product media.</p><ul><li>Left</li><li>Right</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 how customers can view product images in greater detail.</p><ul><li>Open lightbox</li><li>Click and hover</li><li>No zoom</li></ul><p></p><p><strong>Enable border around product image</strong><br>Adds a border around the product media.</p><p></p><p>This can help visually separate product images from the page background.</p><p></p><p><strong>Hide other variants</strong><br>When enabled, media belonging to other variants can be hidden after a customer selects a specific variant.</p><p></p><p>This is useful when different product variants have dedicated images.</p><p><br><strong>Enable video looping</strong><br>Enable this option to continuously loop product videos.</p><p>When the video finishes playing, it will automatically restart.<br><br><strong>Enable share icon</strong><br>Displays a share option for the product page.</p><p>This allows customers to share the product with others.</p></td></tr><tr><td>Enable compact view</td><td>Enables a more compact presentation of the product media and information area.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section 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></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile layout</strong><br>Controls the product media layout on mobile devices:</p><ul><li>2 columns</li><li>Show thumbnails</li><li>Hide thumbnail</li></ul><p>For visual guide show <a href="#mobile-layout"><mark style="color:blue;">screenshot</mark></a></p></td></tr></tbody></table>

## Section Settings Screenshot

#### Desktop media width

<div data-with-frame="true"><figure><img src="/files/FoxwRP7Rxww7EWAjDwD0" alt=""><figcaption><p><strong>Desktop media width — Small</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/J3sGJVRiIBH07BQAwyMS" alt=""><figcaption><p><strong>Desktop media width — Medium</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/6Gu94ACXqDxrgqR1cfWd" alt=""><figcaption><p><strong>Desktop media width — Large</strong></p></figcaption></figure></div>

#### Desktop layout

<div data-with-frame="true"><figure><img src="/files/KWWKzOMnljflSVMjylHa" alt=""><figcaption><p><strong>Desktop layout — Stacked</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/XxnegVKXBW9dzGOARpaD" alt=""><figcaption><p><strong>Desktop layout — 2 Columns</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/hz1ZN4Uw8Q2e2cN8ySyo" alt=""><figcaption><p><strong>Desktop layout — Thumbnail</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/h8qF56XzMGXCDK9DQoyu" alt=""><figcaption><p><strong>Desktop layout — Thumbnail left carousel</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/ZBrH2RCdWdAMuTXaUJua" alt=""><figcaption><p><strong>Desktop layout — Thumbnail right carousel</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/AcfNzmc7EoY3lx3wCBsp" alt=""><figcaption><p><strong>Desktop layout — Thumbnail bottom carousel</strong></p></figcaption></figure></div>

#### Desktop media position

<div data-with-frame="true"><figure><img src="/files/CNEayUCAbTTtQ4RI6qt6" alt=""><figcaption><p><strong>Desktop media position — Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/JDJHZKGMzfhff2yaYnc3" alt=""><figcaption><p><strong>Desktop media position — Right</strong></p></figcaption></figure></div>

#### Mobile layout

<div data-with-frame="true"><figure><img src="/files/6YhaJbvlY2NSK3eV9Hn7" alt=""><figcaption><p><strong>Mobile layout — 2 Columns</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/9lAtVADUJaEu4bxFkCjk" alt=""><figcaption><p><strong>Mobile layout — Show thumbnail</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/tMYl5PqwC5Z0832Zrw4i" alt=""><figcaption><p><strong>Mobile layout — Hide thumbnail</strong></p></figcaption></figure></div>

## Add block

The Product Information section supports multiple blocks that can be arranged according to your preferred product-page structure.

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

<table><thead><tr><th width="272">Block</th><th width="460">Description</th></tr></thead><tbody><tr><td>Text</td><td><p><strong>Text</strong><br>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.<br><br><strong>Text style</strong></p><p>Controls the appearance of the text.</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><p>For visual guide show <a href="#text"><mark style="color:blue;">screenshot</mark></a></p></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></td></tr><tr><td>Product meta</td><td><p>The <strong>Product Meta</strong> block displays additional product information on the product page, such as the product <strong>Vendor</strong>, <strong>Type</strong>, and <strong>Tags</strong>. </p><p></p><p>You can choose which metadata to display based on your store requirements.</p><ul><li><strong>Show vendor</strong> — Enable this option to display the product vendor.</li><li><strong>Show type</strong> — Enable this option to display the product type.</li><li><strong>Show tags</strong> — Enable this option to display the product tags assigned to the product.</li></ul><p>For visual guide show <a href="#product-meta"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Image</td><td><p><strong>Image</strong><br>"Image" is taken into use to add an image banner in the product section.<br></p><p><strong>Image link</strong></p><p>Use the "Image link" to add a link to the image in the section.</p><p></p><p><strong>Image alignment</strong></p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p>For visual guide show <a href="#image"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Stock countdown</td><td><p>The <strong>Stock Countdown</strong> block displays the current product stock status on the product page. </p><p></p><p>It can show different messages based on the available inventory and helps customers understand whether a product has limited stock or is available for purchase.</p><p></p><p><strong>Maximum stock</strong><br>Sets the maximum stock value used to calculate the stock countdown indicator.</p><p></p><p>For example, if the maximum stock is set to <strong>150</strong>, the progress indicator uses 150 as the reference stock level.<br></p><p><strong>Limit stock cut off</strong><br>Sets the stock quantity at which the product changes from the regular <strong>In Stock</strong> message to the <strong>Limited Stock</strong> message.</p><p></p><p>For example, if the limit is set to <strong>10</strong>, the limited-stock message can be displayed when the available quantity reaches the defined threshold.<br></p><p><strong>Limit stock message</strong><br>Defines the message displayed when the product reaches the limited-stock threshold.</p><p><strong>Example:</strong></p><blockquote><p>Only {stock_number} units left</p></blockquote><p></p><p><strong>In stock message</strong><br></p><p>Defines the message displayed when the product has stock available above the limited-stock threshold.</p><p></p><p>You can use:</p><p><code>{stock_number}</code></p><p>to dynamically display the current stock quantity.</p><p></p><p><strong>Example:</strong></p><blockquote><p>In stock ({stock_number} units), ready to be shipped</p></blockquote><p></p><p><strong>Continue selling message</strong></p><p>Defines the message displayed when the product is out of stock but <strong>Continue selling</strong> is enabled for the product.</p><p><strong>Example:</strong></p><blockquote><p>Re-stocking soon</p></blockquote><p><br><strong>Colors</strong><br>Customize the colors of  Limited stock, In stock and Continue selling text. </p><p></p><p>For visual guide show <a href="#stock-countdown"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Price</td><td><p>The <strong>Price</strong> block displays the product's pricing information, including the current selling price, compare-at price, and sale badge (when applicable). </p><p></p><p>The displayed price automatically updates when customers select different product variants.</p><blockquote><p><strong>Note</strong></p><p>The Price block does not include any customizable settings. </p><p>Pricing is automatically pulled from the product information configured in Shopify.</p></blockquote><p>For visual guide show <a href="#price"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>SKU</td><td><p>Show product "SKU" for your main product.<br><br><strong>Text style</strong></p><p>Customization of the "Text style" is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Inventory status</td><td><p>The <strong>Inventory Status</strong> block displays the current inventory availability of the selected product variant.</p><p></p><p>The inventory status, indicating whether the product is in stock or out of stock.<br><br><strong>Text style</strong></p><p>Controls the text style used for the inventory status message.</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><p></p><p><strong>Low inventory threshold</strong></p><p>Sets the inventory quantity at which the product is considered to have low stock.</p><p></p><p>For example, setting the threshold to <strong>10</strong> means the product can be treated as low inventory when its available quantity reaches 10 or below.</p><p></p><p>Set the value to <strong>0</strong> to always display the inventory status when inventory is available.<br><br><strong>Show inventory count</strong></p><p>Enable this option to display the actual available inventory quantity.</p><p></p><p>For example:</p><blockquote><p><strong>45 in stock</strong></p></blockquote><p>When disabled, the block can display the availability status without showing the exact quantity. </p><p></p><p>For visual guide show <a href="#inventory-status"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Quantity selector</td><td><p>The <strong>Quantity Selector</strong> allows customers to select the number of products they want to purchase.</p><p></p><p>Customers can increase or decrease the quantity before adding the product to the cart. </p><p></p><p>For visual guide show <a href="#quantity-selector"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Variant picker</td><td><p>The <strong>Variant Picker</strong> block allows customers to select different product options, such as size, color, style, or material.</p><p></p><p>The available options automatically update the product price, media, availability, and purchase information based on the selected variant.</p><p></p><p><strong>Type</strong></p><p>Choose how variant options are displayed.</p><ul><li><strong>Dropdown</strong> — Displays variant options in a dropdown menu</li><li><strong>Pills</strong> — Displays each option 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>Enable color swatches</strong><br>By enabling this checkbox you can show the "Variant color."  </p><p>For visual guide show <a href="#enable-color-swatches"><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><p></p><p>Variants are managed directly from your Shopify Admin.</p><p>Go to:</p><p><strong>Shopify Admin → Products → Select Product → Variants</strong></p><p>From there, you can:</p><ul><li>Add or remove variants.</li><li>Assign variant-specific images.</li><li>Set individual prices and inventory.</li><li>Update SKU and barcode information.</li></ul><p></p><p>The Cello theme also supports a <strong>Size Chart</strong> option for products where sizing information is required.</p><p></p><p><strong>Size chart text</strong>  </p><p>Enter the text that will appear as the Size Chart link on the product page. </p><p></p><p>For visual guide show <a href="#size-chart"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Size chart page</strong> </p><p>Select the page that contains your size chart information. When customers click the Size Chart link, the selected page will be displayed. <a href="/pages/RB0cxwgktvWdJ2yoSyRh"><mark style="color:$primary;"><strong>Learn more</strong></mark></a></p></td></tr><tr><td>Buy buttons</td><td><p>The <strong>Buy buttons</strong> block controls the purchase actions displayed on the product page.</p><p></p><p>It allows you to enable accelerated checkout, gift card recipient information, and store pickup availability to improve the shopping experience.</p><p></p><p><strong>Enable the Show dynamic checkout buttons</strong></p><p>Enable or disable dynamic checkout buttons such as <strong>Buy It Now</strong>, allowing customers to complete their purchase using their preferred accelerated payment method.</p><ul><li><strong>On</strong> – Displays the dynamic checkout button (Shop Pay, Apple Pay, PayPal, Google Pay, etc., depending on availability).</li><li><strong>Off</strong> – Displays only the standard <strong>Add to Cart</strong> button.</li></ul><blockquote><p><strong>Note:</strong> Available payment methods depend on your store's enabled payment gateways.</p></blockquote><p>For visual guide show <a href="#show-dynamic-checkout-buttons"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Enable the Show recipient information form for gift card</strong></p><p>Displays a recipient information form when purchasing gift card products.</p><p><strong>Options</strong></p><ul><li><strong>On</strong> – Customers can send gift cards directly to a recipient with a personalized message and scheduled delivery date.</li><li><strong>Off</strong> – Gift cards are purchased without recipient details.</li></ul><blockquote><p><strong>Note:</strong> This setting only applies to <strong>Gift Card</strong> products.</p></blockquote><p></p><p><strong>Add to cart button style</strong> </p><p>Choose add to cart button style on product page. </p><ul><li>Outline button</li><li>Solid button</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><br><br><strong>Show read more button</strong><br>By enabling this checkbox, you can Show read more button for long description. </p><p></p><p>For visual guide show <a href="#description"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Share</td><td><p>Clickable text that allows customers to share the product on social media. </p><p>For visual guide show <a href="#share"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Share button</td><td><p>The <strong>Share Button</strong> allows customers to share the product page with others.</p><p></p><p>Enabling the checkbox below will display the share button.</p><ul><li>Share on Facebook</li><li>Tweet on Twitter</li><li>Pin on Pinterest</li></ul><p>For visual guide show <a href="#share-button"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Custom Liquid</td><td>Add Apps.</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.<br></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>How To Use</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. </li></ol><p>For visual guide show <a href="#content"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Trust content</td><td><p>The <strong>Trust content</strong> block helps build customer confidence by displaying secure payment options and security-related information directly on the product page. </p><p></p><p>It can be used to highlight accepted payment methods, checkout security, guarantees, certifications, or other trust signals.</p><p></p><p><strong>Heading</strong><br>Enter text to display as a title in the "Trust content" block.<br></p><p><strong>Payment methods :</strong></p><p><strong>Show payment icons</strong><br>Enable <strong>Show payment icons</strong> to display supported payment method logos below the payment heading.<br></p><p><strong>Heading</strong><br>Add a heading for the payment methods section.</p><p><br><strong>Description</strong><br>Add optional supporting text related to payment security or checkout.<br></p><p><strong>Security :</strong></p><p>Use the <strong>Security</strong> settings to highlight an additional trust factor such as a guarantee, secure checkout message, warranty, or certification.</p><p></p><p><strong>Heading</strong></p><p>Enter text to display as a title in the section.<br></p><p><strong>Image</strong></p><p>Add an image or icon that represents the security feature.<br><br><strong>Image width</strong><br>Adjust the width of the selected security image to achieve the desired visual balance with the product information. </p><p></p><p>For visual guide show <a href="#trust-content"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Collapsible row</td><td><p>The <strong>Collapsible row</strong> block allows you to organize additional product information into expandable rows on the product page. </p><p>Customers can click a row heading to reveal its content, helping keep detailed information accessible without taking up too much space.</p><p></p><p>The section "Collapsible row" is for adding collapsible rows.<br></p><p><strong>Heading</strong></p><p>Enter a title that clearly describes the information inside the collapsible row.</p><p></p><p><strong>Icon</strong></p><p>Select an optional icon to display alongside the row heading.</p><p></p><p>Use an icon that is relevant to the information being presented. Select <strong>None</strong> if no icon is required.</p><p></p><p><strong>Row content</strong></p><p>Add the information that should appear when the row is expanded.<br></p><p><strong>Row content from page</strong><br>Select a Shopify page to display its content inside the collapsible row. </p><p></p><p>How To Use</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. </li></ol><p></p><p>For visual guide show <a href="#collapsible-row"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Offer</td><td><p>The <strong>Offer</strong> block allows you to highlight promotional offers, discounts, payment benefits, limited-time deals, or other important purchasing incentives directly on the product page. </p><p></p><p>Multiple offer blocks can be added to display different promotions side by side.</p><p></p><p><strong>Heading</strong><br>Enter the title of the offer.</p><p></p><p><strong>Example:</strong><br><code>Available Bank Offers</code></p><p></p><p>Use a short and clear heading that immediately communicates the benefit.<br><br><strong>Icon</strong></p><p>Select an icon that represents the offer.</p><p><strong>Examples:</strong></p><ul><li>Price tag</li><li>Flash sale</li><li>Discount</li><li>Gift</li><li>Payment</li><li>Shopping-related icons</li></ul><p>Choose an icon that matches the type of promotion being displayed.</p><p></p><p><strong>Content</strong><br>Enter text to display as a content in the section. Use of this feature you can share information about your brand with your customers.<br><br>Customize the colors of  background and text. </p><p></p><p>For visual guide show <a href="#offer"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Pop-up</td><td><p>The <strong>Pop-up</strong> block adds a clickable link to the product page that opens additional information in a popup window or directs customers to a selected page.</p><p></p><p>It is ideal for displaying content such as size guides, shipping details, return policies, fabric information, or care instructions without cluttering the product page.</p><p></p><p><strong>Link label</strong></p><p>Enter the text that customers will click to open the popup or linked content.</p><p></p><p><strong>Examples:</strong></p><ul><li>Size Guide</li><li>Shipping Information</li><li>Return Policy</li><li>Fabric Details</li></ul><p></p><p><strong>Page</strong><br>Select an existing Shopify page to display in the popup.</p><p></p><p><strong>Examples</strong>:</p><ul><li>Size Guide</li><li>Shipping Policy</li><li>Return Policy</li></ul><p><em><strong>Note:</strong> When a page is selected, its content is displayed in the popup automatically.</em> </p><p></p><p>For visual guide show <a href="#pop-up"><mark style="color:blue;">screenshot</mark></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><tr><td>Complementary products</td><td><p>The <strong>Complementary Products</strong> block displays products that can be purchased together with the main product.</p><p></p><p>This can be used to promote relevant accessories or products that complement the customer's purchase.</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.</p><p></p><p><a href="/pages/RRmQRxb5R1E2sYbd9Q7q"><mark style="color:blue;"><strong>Learn more</strong></mark></a></p><p></p><p><strong>Heading</strong><br>Defines the title displayed above the complementary product recommendations.<br><br><strong>Heading size</strong></p><p>Customization of the "Heading size" is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><br><strong>Show as collapsible row</strong><br>By enabling this checkbox you can show product as collapsible row.</p><p></p><p><strong>Icon</strong></p><p>Select icon from predefined icon library.</p><p></p><p><strong>Maximum products to show</strong>: </p><p>Controls the total number of complementary products displayed. </p><p>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.</p><p></p><h4>Product card : </h4><p><strong>Image ratio</strong><br>Controls how product images are displayed within the complementary products section.</p><ul><li>Portrait</li><li>Square</li></ul><p></p><p><strong>Show the second image on hover</strong><br>By enabling this checkbox you can "Show the second image on hover."<br><br><strong>Show product type</strong></p><p>By enabling this checkbox you can “Show product type”.<br><br><strong>Show vendor</strong><br>By enabling this checkbox you can display the “Product vendor”.<br><br><strong>Enable quick look button</strong><br>Enable this checkbox to display the "Quick look button".  </p><p></p><p>For visual guide show <a href="#complementary-products"><mark style="color:blue;">screenshot</mark></a></p></td></tr><tr><td>Icon with text</td><td><p>The <strong>Icon with text</strong> block allows you to display important product benefits, services, or trust highlights using icons or custom images with short text. </p><p></p><p>It is useful for presenting key information such as delivery, warranty, returns, support, payment benefits, or product features in a compact and easy-to-scan format.</p><p></p><p><strong>Layout</strong></p><p>Choose how the icon and text items are arranged.</p><ul><li><strong>Horizontal —</strong> Displays the content items in a row. Ideal for short benefits such as delivery, warranty, and returns.</li><li><strong>Vertical —</strong> Stacks the content items vertically for a more detailed presentation.</li></ul><p>For visual guide show <a href="#icon-with-text-layout"><mark style="color:blue;">screenshot</mark></a></p><p></p><p><strong>Enable border</strong>  </p><p>Enable this option to add a border around the icon-with-text area.</p><p>Use the border when you want to visually separate the benefits from the surrounding product information.</p><p></p><p><strong>Content :</strong> </p><p><br><strong>First icon</strong></p><p>Each column can contain an icon or custom image along with a heading.</p><p></p><p><strong>First image</strong><br>Add a custom image instead of using the predefined icon.</p><p>Use this when you want to display a custom brand icon, illustration, or trust badge.<br><br><strong>First heading</strong><br>Enter the text displayed below the icon or image. Leave the heading blank if you want to hide the content column. </p><p></p><p>For visual guide show <a href="#icon-with-text-content"><mark style="color:blue;">screenshot</mark></a></p></td></tr></tbody></table>

## Block Settings Screenshot

#### Text

<div data-with-frame="true"><figure><img src="/files/JEbqN3YfrlrIhG08yEkt" alt=""><figcaption><p><strong>Text</strong> </p></figcaption></figure></div>

#### Title

<div data-with-frame="true"><figure><img src="/files/kA15WL81C8U0aFnrwdbZ" alt=""><figcaption><p><strong>Title</strong></p></figcaption></figure></div>

#### Price

<div data-with-frame="true"><figure><img src="/files/Bt4WhwGIA9xKWDNq9McO" alt=""><figcaption><p><strong>Price</strong></p></figcaption></figure></div>

#### Product meta

<div data-with-frame="true"><figure><img src="/files/A5QmCYkftuA3pM9grEb2" alt=""><figcaption><p><strong>Product meta</strong></p></figcaption></figure></div>

#### Variant picker type

<div data-with-frame="true"><figure><img src="/files/YrvrrHriCzktghnBb0mD" alt=""><figcaption><p><strong>Variant picker type - Dropdown</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/pv5pivTJAaTq8I85J9zo" alt=""><figcaption><p><strong>Variant picker type - Pills</strong></p></figcaption></figure></div>

#### Enable color swatches

{% hint style="danger" %}
Note: This '**Enable color swatches**' only work with '**Variant picker type**' is set to '**Pills**'.

![](/files/71GS6V1XakNJjhqkP52P)
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/UFDjxkWfAFiyLMgGfcoR" alt=""><figcaption><p><strong>Enable color swatches — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/0KOTCZ9jKyhURuCM5yvz" alt=""><figcaption><p><strong>Enable color swatches — disabled</strong></p></figcaption></figure></div>

#### Size chart&#x20;

[<mark style="color:blue;">**Learn how to create dynamic size chart and how to set up it**</mark>](/cello-documentation/product-page/setting-up-dynamic-size-charts.md)

<div data-with-frame="true"><figure><img src="/files/sOzwALD9CuJhA76MBfXo" alt=""><figcaption><p><strong>Size chart</strong> </p></figcaption></figure></div>

#### Quantity selector

<div data-with-frame="true"><figure><img src="/files/YMk2ssxI0W14yT6eOZXr" alt=""><figcaption><p><strong>Quantity selector</strong></p></figcaption></figure></div>

#### Show dynamic checkout buttons

<div data-with-frame="true"><figure><img src="/files/54m0WUUs9g5pujgdHzKb" alt=""><figcaption><p><strong>Show dynamic checkout buttons — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/UnxKCGlBQPy1yvEQwBP2" alt=""><figcaption><p><strong>Show dynamic checkout buttons — Disabled</strong></p></figcaption></figure></div>

#### Add to cart button style

<div data-with-frame="true"><figure><img src="/files/9hegWwYuZ9dOOMy7Qeov" alt=""><figcaption><p><strong>Add to cart button style — Solid button</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/oWPzIUobnNWH6VBxAzBs" alt=""><figcaption><p><strong>Add to cart button style — Outline button</strong></p></figcaption></figure></div>

#### Description

<div data-with-frame="true"><figure><img src="/files/TF4d5rOH8C3C8doGwRpn" alt=""><figcaption><p><strong>Description</strong></p></figcaption></figure></div>

#### Complementary products

[<mark style="color:blue;">**Learn about how to add Complementary products to show in product page**</mark>](/cello-documentation/product-page/setting-the-complementary-products-metafield.md)

<div data-with-frame="true"><figure><img src="/files/AfbXdZX0eFwwPxe4KFPT" alt=""><figcaption></figcaption></figure></div>

#### Share button

<div data-with-frame="true"><figure><img src="/files/ZgG4Ob2tdOZNaBtVMUJF" alt=""><figcaption><p><strong>Share button</strong></p></figcaption></figure></div>

#### Trust content

<div data-with-frame="true"><figure><img src="/files/CU2e3mrZCAk2mFNK7GQk" alt=""><figcaption><p><strong>Trust content</strong></p></figcaption></figure></div>

#### Icon with text layout

<div data-with-frame="true"><figure><img src="/files/1zjEX6pzFHyA102iizlr" alt=""><figcaption><p><strong>Icon with text layout — Vertical</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/2X6jZQyZbM9KP8hK5vNI" alt=""><figcaption><p><strong>Icon with text layout — Horizontal</strong></p></figcaption></figure></div>

#### Icon with text content

<div data-with-frame="true"><figure><img src="/files/Ce2cLJZ6W1fX7CdzTIrm" alt=""><figcaption><p><strong>Icon with text content</strong></p></figcaption></figure></div>

#### Offer

<div data-with-frame="true"><figure><img src="/files/2lq4EG0gjkZ8grvvKxG6" alt=""><figcaption><p><strong>Offer</strong></p></figcaption></figure></div>

#### Image

<div data-with-frame="true"><figure><img src="/files/st5Gqw05kVu4fRAcpQ7L" alt=""><figcaption><p><strong>Image</strong></p></figcaption></figure></div>

#### Inventory status

<div data-with-frame="true"><figure><img src="/files/sc0nkMMHdhzRuBoqE39l" alt=""><figcaption><p><strong>Inventory status</strong></p></figcaption></figure></div>

#### Stock countdown

<div data-with-frame="true"><figure><img src="/files/L4ZPKcLVwfjCx1drbqQR" alt=""><figcaption><p><strong>Stock countdown</strong></p></figcaption></figure></div>

#### Content

<div data-with-frame="true"><figure><img src="/files/cSX6VBDkfkFfLO2cnelN" alt=""><figcaption><p><strong>Content</strong></p></figcaption></figure></div>

#### Collapsible row

<div data-with-frame="true"><figure><img src="/files/7ZGeZFrhMXtrwYaiIBXZ" alt=""><figcaption><p><strong>Collapsible row</strong></p></figcaption></figure></div>

#### Share

<div data-with-frame="true"><figure><img src="/files/MMojVqOQvGwnFCmbBBOe" alt=""><figcaption><p><strong>Share</strong></p></figcaption></figure></div>

#### **Pop-up**

[<mark style="color:blue;">**Learn how to create dynamic size chart and how to set up it**</mark>](/cello-documentation/product-page/setting-up-dynamic-size-charts.md)

<div data-with-frame="true"><figure><img src="/files/w7fc1093benbjWqrfwCY" alt=""><figcaption><p><strong>Pop-up link</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/nTbO4hR3viI32yBVndhM" alt=""><figcaption><p><strong>Pop-up</strong></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/4ZSLJNXdsbQ>" %}

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

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

## 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/WqIG5mTzAGlGRk1PcB20" 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/HEQBOyIvcBWZ7hBlNLKV" alt=""><figcaption></figcaption></figure>