> 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/sections/featured-product.md).

# Featured product

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

The **Featured Product** section allows you to highlight a specific product directly on your storefront.

It is ideal for showcasing:

* New product launches
* Best-selling products
* Promotional products
* Seasonal products
* Special offers
* High-value or featured products

The section provides a complete product-presentation layout with product media on one side and product information, variants, pricing, quantity controls, and purchase buttons on the other.

You can also customize the product media layout, background, zoom behavior, video playback, sharing options, spacing, and the information displayed through individual blocks.

{% hint style="warning" %}
**Recommendation Size**\
Product image size: 1500x1500
{% endhint %}

## How to Add Featured Product Section

{% hint style="success" %}

## Steps

1. From your Shopify Admin, go to **Online Store → Themes**.
2. Click **Customize** on your Cello theme.
3. Open the page where you want to add or edit the section.
4. Click **Add section**.
5. Select **Featured Product**.
6. Select the product you want to showcase.
7. Use the available blocks to control which product information is displayed.
8. Configure the section settings according to your requirements.
9. Click **Save** when finished.
   {% 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 sticky content on desktop</td><td><p>Enable this option to keep the product information area visible while customers scroll through the product media on desktop devices.</p><p></p><p>This is useful when a product contains multiple images or videos because customers can continue viewing the media while the important product information remains accessible.</p></td></tr><tr><td>Heading</td><td>Add a heading that appears above the Featured Product content. Leave this field blank if you do not need an additional section heading.</td></tr><tr><td>Heading size</td><td><p>Choose the size of the section heading.</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Choose how the section heading is aligned.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Background image</td><td><p>Select an image to use as the background of the Featured Product section.</p><p></p><p>A background image can add visual interest and help distinguish the Featured Product area from surrounding sections.</p><p></p><p>Use an image that does not interfere with the readability of product information.</p></td></tr><tr><td>Enable small container</td><td>Enable this option to use a more compact content container around the Featured Product.</td></tr><tr><td>Product</td><td><p>Select the Shopify product you want to feature.</p><p></p><p>All product information displayed by the section is based on the selected product, including:</p><ul><li>Product title</li><li>Price</li><li>Images</li><li>Variants</li><li>Description</li><li>Stock information</li><li>Product rating</li><li>SKU</li><li>Product media</li></ul><p></p><p><strong>Tip:</strong> Select a product that has complete product information and high-quality media for the best result.</p></td></tr><tr><td>Media</td><td><p>The Media settings control how the product images and videos are displayed.</p><p></p><p><strong>Desktop media width</strong><br>Choose the width of the product media area on desktop devices.</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Constrain media to screen height</strong><br>Enable this option to prevent the product media area from becoming taller than the available screen height. </p><p></p><p>Enabling this checkbox, you can limit the height of media to the screen height.<br><br><strong>Media fit</strong></p><p>Choose how product media fits inside its available area.</p><ul><li><strong>Original</strong> — Maintains the original proportions of the media.</li><li><strong>Fill</strong> — Expands the media to fill the available area.</li></ul><p></p><p><strong>Product image in two column</strong></p><p>Enable this option to display product images in a two-column layout.</p><p></p><p>This allows multiple product images to be visible at the same time and can create a more editorial product-gallery experience.</p><p></p><p>Disable it when you prefer the standard single-image gallery layout.</p><p></p><p><strong>Enable border around product image</strong><br>By enabling this checkbox, you can show border around the product image. </p><p></p><p><em><strong>Note:</strong> This '<strong>border around product image'</strong> setting only visible when <strong>'Product image in two column'</strong> is set to <strong>'Enabled'.</strong></em></p><p></p><p><strong>Hide thumbnails</strong></p><p>Enable this option to hide the thumbnail navigation below the main product media.</p><p></p><p>Use this when you want a cleaner and more minimal product-gallery appearance.</p><p></p><p>Disable it when customers need quick access to individual product images.</p><p></p><p><em><strong>Note:</strong> This '</em><strong>Hide thumbnails</strong><em><strong>'</strong> setting is only visible when <strong>'Product image in two column'</strong> is set to <strong>'Disabled'.</strong></em></p><p></p><p><strong>Show Secondary Background</strong> </p><p>Enable this option to display a separate background behind the Featured Product content.</p><p></p><p>This can help visually distinguish the product section from the rest of the page.</p><p></p><p><strong>Secondary Background Color</strong></p><p>Choose the color used for the secondary background.</p><p></p><p><strong>For example:</strong></p><p><code>#F5F5F5</code></p><p></p><p>Choose a subtle color that provides sufficient contrast without distracting from the product.</p><p></p><p><strong>Disable section background</strong></p><p>By enabling this checkbox, you can disable section background in featured product section.</p><p></p><p><em><strong>Note:</strong> This '<strong>Disable section background'</strong> setting is only visible when <strong>'Show Secondary Background'</strong> is set to <strong>'Enabled'.</strong></em></p><p></p><p><strong>Desktop media position</strong></p><p>The desktop media position customization setting is as follows:</p><ul><li>Left</li><li>Right</li></ul><p></p><p><strong>Image zoom</strong></p><p>Choose how customers can zoom into product images.</p><ul><li>Open lightbox</li><li>Click and hover</li><li>No zoom</li></ul><p></p><p><strong>Hide other variants</strong><br>Shows only media related to the selected variant.</p><p>This helps customers focus on the chosen product variation.<br></p><p><strong>Enable video looping</strong><br>Enable this option to continuously replay product videos. When the video finishes playing, it will automatically restart. </p><p></p><p>Disable it when the video should play only once.<br><br><strong>Enable share icon</strong><br>Enable this option to display a share icon for the featured product.</p><p></p><p>Customers can use the share option to share the product with others through supported sharing methods.</p></td></tr><tr><td>Color scheme</td><td><p>Choose the color scheme used by the Featured Product section.</p><p>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><p>The available color schemes are managed through the theme's global color settings.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FJmBPA0Hpkum1xnoVtfg6%2Ffeatured-product.png?alt=media&amp;token=38898717-95dd-4b2e-98ad-059192cf31f9" alt=""><figcaption></figcaption></figure></div>

## Add block

The Featured Product section uses individual **blocks** to control which product information is displayed and in what order.

You can add, remove, and rearrange blocks according to your requirements.

Available blocks include:

* SKU
* Title
* Product Rating
* Price
* Variant Picker
* Description
* Stock Countdown
* Quantity Selector
* Buy Buttons
* Icon with Text

This block-based approach allows you to create a product layout that matches your store's requirements.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td><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><strong>Text style</strong></p><p>Customization of the "Text style" in the featured product section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Title</td><td><p>The <strong>Title</strong> block displays the product name.</p><p></p><p>Use this block to show the main product title within the product information area.</p><p></p><p>The product title is automatically taken from the selected Shopify product.</p><p></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</td><td><p>The <strong>Price</strong> block displays the product's current selling price.</p><p></p><p>When applicable, it can also display:</p><ul><li>Compare-at price</li><li>Sale price</li><li>Promotional pricing</li></ul><p>The displayed price is automatically taken from the selected Shopify product.</p></td></tr><tr><td>SKU</td><td><p>The <strong>SKU</strong> block displays the selected product's SKU (Stock Keeping Unit).</p><p></p><p>This is useful for stores where product identification or inventory references are important.</p><p></p><p>If the product does not have an SKU, the SKU information may not be displayed. </p><p></p><p><strong>Text style</strong> </p><p>Customization of the "SKU Text style" in the featured product section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Quantity selector</td><td><p>The <strong>Quantity Selector</strong> block allows customers to choose how many units 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>This is useful for products that customers commonly purchase in multiple quantities.</p></td></tr><tr><td>Stock countdown</td><td><p>"Stock countdown" is for customizing the product stock.</p><p></p><p>The <strong>Stock Countdown</strong> block can be used to communicate product availability and create a sense of urgency.</p><p></p><p>It can display stock-related information when inventory is available.<br></p><p><strong>Maximum stock</strong><br>Set the maximum stock value used to calculate the stock countdown indicator.</p><p></p><p>For example, if <strong>Maximum Stock</strong> is set to <code>150</code>, the stock progress is calculated based on a maximum inventory level of 150 units.<br></p><p><strong>Limit stock cut off</strong><br>Set the stock quantity at which the product should be treated as <strong>limited stock</strong>.</p><p></p><p>For example, if the value is set to <code>10</code>, products with stock at or below this level can display the limited-stock message.<br></p><p><strong>Limit stock message</strong><br>Enter the message displayed when the product reaches the configured limited-stock level.</p><p></p><p>Use <code>{stock_number}</code> to automatically display the current available stock quantity.</p><p></p><p><strong>Example:</strong></p><p><code>Only {stock_number} units left</code></p><p></p><p>If the product has 5 units remaining, the message can appear as:</p><p><code>Only 5 units left</code><br></p><p><strong>In stock message</strong><br>Enter the message displayed when the product has available stock above the limited-stock cutoff.</p><p></p><p>Use <code>{stock_number}</code> to automatically display the current stock quantity.</p><p></p><p><strong>Example:</strong></p><p><code>In stock ({stock_number} units), ready to be shipped</code></p><p></p><p>The <code>{stock_number}</code> placeholder is automatically replaced with the current inventory quantity.<br></p><p><strong>Continue selling message</strong><br>Enter the message displayed when the product is out of stock but <strong>Continue selling when out of stock</strong> is enabled for the product.</p><p></p><p><strong>Example:</strong></p><p><code>Re-stocking soon</code></p><p></p><p>Use this message to inform customers that they can still place an order even though the current inventory has reached zero.<br><br><strong>Colors</strong><br>Customize the colors of  Limited stock, In stock and Continue selling text.</p></td></tr><tr><td>Social</td><td><p>The <strong>Social</strong> block displays social media icons within the Featured Product section.</p><p></p><p>It allows customers to quickly access your store's social media profiles and connect with your brand on different platforms.</p><p></p><p>The displayed icons can include platforms such as:</p><ul><li>Facebook</li><li>Instagram</li><li>YouTube</li><li>TikTok</li><li>X (Twitter)</li></ul><p></p><p>The Social block has <strong>no customizable settings</strong> in the theme editor.</p><p></p><p>The displayed social media platforms and their links are managed through the theme's global <strong>Social Media</strong> settings.</p><p></p><p>To update your social media links:</p><ol start="1"><li>Go to <strong>Theme Settings</strong> in the Shopify Theme Editor.</li><li>Open the <strong>Social Media</strong> settings.</li><li>Add or update your social media profile URLs.</li><li>Save the changes.</li></ol></td></tr><tr><td>Variant picker</td><td><p>The <strong>Variant Picker</strong> block allows customers to select different options available for the featured product, such as <strong>Color, Size, Storage, Material, or Style</strong>.</p><p></p><p>It automatically displays the product's variant options configured in Shopify.</p><p></p><p><strong>Type</strong><br>Choose how product variants should be displayed.</p><ul><li><strong>Dropdown</strong> — Displays variant options inside a dropdown menu. This is useful when a product has many options or values.</li><li><strong>Pills</strong> — Displays variant options as clickable buttons, making the available choices easier to see at a glance.</li></ul><p></p><p><strong>Enable color swatches</strong><br>Enable this option to display color variants as visual <strong>color swatches</strong> instead of standard variant buttons.</p><p></p><p>This setting is useful for products with color options because customers can visually identify and select the desired color.</p><p></p><p><strong>Important:</strong> This option requires the variant picker <strong>Type</strong> to be set to <strong>Pills</strong>.</p></td></tr><tr><td>Buy buttons</td><td><p>The <strong>Buy Buttons</strong> block provides the primary purchasing actions for the featured product.</p><p></p><p>Depending on the theme configuration, this area can provide actions such as:</p><ul><li>Add to Cart</li><li>Buy It Now</li></ul><p></p><p>Use this block to make the purchasing process easily accessible to customers.</p><p></p><p><strong>Tip:</strong> Keep the primary purchase action clearly visible and easy to identify.</p><p></p><p><strong>Enable the Show dynamic checkout buttons</strong> box to display any dynamic checkout options enabled by you in your payments settings.<br></p><p><strong>Enable the Show recipient information form for gift card products</strong> box to display gift recipient form</p></td></tr><tr><td>Description</td><td><p>After adding this block, you will be able to view the product description.<br></p><p>Show product "Description" for your featured product section.</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>Text style</strong></p><p>Customization of the "Text style" in the featured product section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Share</td><td><p>The Share block 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><strong>Text</strong> </p><p>Controls the label displayed for the share button.</p></td></tr><tr><td>Custom Liquid</td><td>Add Apps.</td></tr><tr><td>Product rating</td><td><p>The <strong>Product Rating</strong> block displays the product's customer rating.</p><p></p><p>This can help customers quickly understand how other shoppers have rated the product. </p><p></p><p>To show product rating use app.</p></td></tr><tr><td>Icon with text</td><td><p>The <strong>Icon With Text</strong> block allows you to display additional benefits or service information using an icon and supporting text.</p><p></p><p>Examples include:</p><ul><li>Fast Shipping</li><li>Secure Payments</li><li>Easy Returns</li><li>Free Delivery</li><li>Warranty Included</li><li>Eco-Friendly Packaging</li></ul><p>This block is useful for communicating important purchasing benefits near the product information.</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> <br><strong>First icon</strong></p><p>Choose an icon from the available icon library.</p><p></p><p><strong>First image</strong><br>Use the first image to add to the section.<br><br><strong>First heading</strong><br>To display the heading for the icon with text block, add text here.</p></td></tr></tbody></table>

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FsMJuO15lCA1ogJMXZs7L%2Ffeatured-product-block.png?alt=media&amp;token=3b5afa74-96f3-4173-8b49-5901883a4d23" alt=""><figcaption></figcaption></figure>