> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/koto-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/koto-documentation/sections/featured-product.md).

# Featured product

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

Koto theme provides a section, namely "Featured product". In this section, you can add a product to Shopify by entering product details and uploading product images. If your product has options, like size or color, then you can add a variant for each combination of options.

{% hint style="info" %}
**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>Color scheme</td><td><p>In this section, you can change the background and foreground color of the 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>Product</td><td>Select a product to display selected product in the section.</td></tr><tr><td>Media</td><td><p><strong>Desktop media width</strong><br>"Desktop media width" is to customize of the  media width on the desktop screen. You can set a minimum of “40%” and a maximum of “65%” media width. </p><p></p><p><strong>Constrain media to screen height</strong><br>By enabling this checkbox, you can limit the height of media to the screen height.<br><br><strong>Media fit</strong></p><p>The Media fit customization setting is as follows:</p><ul><li>Original</li><li>Fill</li></ul><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><strong>Desktop layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>2 columns</li><li>Thumbnail left carousel</li><li>Thumbnail right carousel</li><li>Thumbnail bottom carousel</li></ul><p><strong>Thumbnail image ratio</strong> </p><p>Customization of thumbnail image ratio setting is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p><strong>Image zoom</strong></p><p>The Image zoom customization setting is as follows:</p><ul><li>Click and hover</li><li>No zoom</li></ul><p><strong>Enable sticky content on desktop</strong></p><p>You can make the content sticky on a desktop device by checking this checkbox.<br></p><p><strong>Hide other variants</strong><br>By enabling this checkbox, you can hide other variants’ media after selecting a variant.</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>Mobile layout customization setting is as follows:</p><ul><li>2 columns</li><li>Thumbnail carousel</li><li>Hide thumbnail</li></ul></td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FLRnLXfyh2YndonRhup3l%2Ffeatured-product.png?alt=media&amp;token=49e31b69-f2d0-401c-8722-c563fa2eae88" alt=""><figcaption></figcaption></figure>

## Add block

Following are the blocks you can add to your “featured product”.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td><p><strong>Text</strong><br>Enter text to display as a caption text in the "Text" block.</p><p></p><p><strong>Uppercase text</strong></p><p>Enable this checkbox to transform text into uppercase.</p><p></p><p><strong>Size</strong></p><p>Customization of the "Text size" in the featured product section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Title</td><td><p><strong>Uppercase title</strong> </p><p>Enable this checkbox to transform title text into uppercase.</p><p></p><p><strong>Size</strong></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><p><strong>Share button</strong> </p><p>Clickable text that allows customers to share the product on social media.<br><br><strong>Text</strong><br>Enter the text to display as a share button heading in this section.</p></td></tr><tr><td>Price </td><td>This block has no customizable settings. After adding this block, you will be able to view the product price.</td></tr><tr><td>Description</td><td><p>This block has no customizable settings. After adding this block, you will be able to view the product description.</p><p></p><p><strong>Show divider</strong> </p><p>Enable this checkbox to show top border as a divider on description block.</p></td></tr><tr><td>Inventory status</td><td><p><strong>Inventory status</strong><br>The inventory status, indicating whether the product is in stock or out of stock.<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><p><strong>Low inventory threshold</strong><br>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.<br><br><strong>Show inventory count</strong><br>By enabling this checkbox, you can show inventory count.</p></td></tr><tr><td>SKU</td><td><p>Show product "SKU" for your featured product section.</p><p></p><p><strong>Uppercase text</strong></p><p>Enable this checkbox to transform SKU text into uppercase.</p><p></p><p><strong>Size</strong></p><p>Customization of the "Text size" in the featured product section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Quantity selector/Size guide</td><td><p>Show "Quantity selector" for your featured product section. </p><p></p><p><strong>Select size chart</strong> </p><p>By using these settings, the selected page will display its content. </p><p></p><p><strong>Label</strong> </p><p>Enter text to display as a size guide heading text in the input field. </p><p></p><p><strong>Show divider</strong> </p><p>Enable this checkbox to show top border as a divider on this block.</p></td></tr><tr><td>Variant picker</td><td><p>"Variant picker" is to customize the product variant.<br></p><p><strong>Type</strong><br>The variant type is given below. If type "Dropdown" then the variant would be dropdown. and if the type is "Pills" then the variant would be pills.</p><ul><li>Dropdown</li><li>Pills</li></ul><p><strong>Hide sold out variant</strong></p><p>Enable this checkbox to hide soldout varinats of this product.</p><p></p><p><strong>Corner radius</strong></p><p>Customization of variant pills border radius using this settings. You can set a minimum of “0px” and a maximum of “20px” variant pills radius. </p><p></p><p><strong>Swatch type</strong></p><p>Following is the color swatches type customization of the section:</p><ul><li>Color swatch</li><li>Variant image</li><li>Pills</li></ul><p><strong>Pills style</strong> </p><p>Following is the Pills style customization of the section:</p><ul><li>Outline</li><li>Fill</li></ul><p><strong>Show divider between variants</strong> </p><p>Enable this checkbox to show variant divider between variants. </p></td></tr><tr><td>Buy buttons</td><td><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>Share button</td><td><p><strong>Title</strong></p><p>Enter text to display as a title of this block.</p><p></p><p><strong>Show background</strong></p><p>Enabling the checkbox to show social icons background in share button.</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></td></tr><tr><td>Payment method</td><td><p><strong>Text</strong></p><p>To display the heading for the payment method block, add text here.<br><br><strong>Show payment icons</strong><br>By enabling this checkbox you can show the “Payment icons”.</p></td></tr><tr><td>Custom Liquid</td><td>Add Apps.</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>Icon with text</td><td><p><strong>First icon</strong></p><p>In the block, the icons are given to select. </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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FeXeF8g0bdfrCjPE5My09%2Ffeature-product-block.png?alt=media&amp;token=9188be17-dca1-41b0-a123-4e853cda6a75" alt=""><figcaption></figcaption></figure>