# Webibazaar Support

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

### <mark style="background-color:yellow;">Need help? Ask your question here:</mark>

1. <mark style="background-color:yellow;">**Support**</mark>&#x20;

   * Monday – Friday (excluding Indian public holidays)
   * 09:30 – 18:30 IST (Indian Standard Time)

2. <mark style="background-color:yellow;">**Theme support involves**</mark>

   * Our support includes bug fixes, need any customization, assistance with theme settings and existing features.&#x20;

     * Mail : <help@webibazaar.com>
     * Whatsapp: [+91 96874 97874](https://wa.me/+919687497874)

     **NOTE:** **Please note that** [**help@webibazaar.com**](mailto:help@webibazaar.com) **&** [**support@webibazaar.com**](mailto:support@webibazaar.com) **are our only official email addresses for theme support. For your security, please do not trust or respond to emails from any other or similar-looking email address, and never share your store credentials or sensitive information with them.**

3. <mark style="background-color:yellow;">**Theme support not involves**</mark> \[If you need to make the changes mentioned below, it will be done through custom code]
   * Create of new features
   * Modifications to the theme's design structure
   * Addition of new theme settings
   * Resolving issues caused by third-party developers or applications.
   * Any re-code made by custom code works in the theme files.


# Sitar Shopify

Winter Infotech | Sitar Documentation.

## New to Shopify? <a href="#newtoshopify" id="newtoshopify"></a>

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

\
Welcome to the Sitar user documentation.

Set up your Sitar theme instantly by browsing through support documentation.

If you're setting up a Shopify store for the first time, we recommend visiting the [Shopify Help Center](https://help.shopify.com/en) to familiarize yourself with the platform.

**Read the Shopify manual before you start**

* [Manual](https://help.shopify.com/manual)
* [Installing a new theme](https://help.shopify.com/en/manual/online-store/themes/adding-themes)
* [General settings](https://docs.shopify.com/manual/settings/general)
* [Create a page](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages)
* [Navigation](https://help.shopify.com/en/manual/online-store/menus-and-links)
* [Products](https://help.shopify.com/en/manual/products)
* [Collections](https://help.shopify.com/en/manual/products/collections)
* [Blogs](https://help.shopify.com/en/manual/online-store/blogs)
* [Customizing checkout page](https://help.shopify.com/en/manual/checkout-settings/checkout-style)
* [Translating your theme into another language](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/language/translate-theme)

## Theme support <a href="#support" id="support"></a>

Our theme support team is available to help get you up and running with our Sitar theme instantly. However, in case of too many tickets, the response time can be longer or within 24 hours.<br>

## License <a href="#license" id="license"></a>

Themes come with a single-use license meaning people do not have permission to transfer or sell a theme to any other person’s store on Shopify or elsewhere. Read more about Shopify’s [terms and conditions](https://www.shopify.com/legal/terms#ThemeStore).


# Header

{% content-ref url="/pages/DkYk4UCGZK6xU5kIVfQa" %}
[Announcement bar](/header/announcement-bar)
{% endcontent-ref %}

{% content-ref url="/pages/RCzAubAQRvlIsaMQ9C0u" %}
[Header section](/header/header-section)
{% endcontent-ref %}

{% content-ref url="/pages/ykZbfKcTjXDKufkzrJpe" %}
[Mega menu](/header/mega-menu)
{% endcontent-ref %}


# Announcement bar

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

You can add an announcement bar to your online store to display important information about your store.

You can highlight the following information by adding an announcement bar:

* Any shipping delays or regions not accepting international shipments.
* Any new or updated policy pages.
* Any promotions are being offered at this time, such as sales or new gift cards.

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</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>Show separator line</td><td>Enable this checkbox to show separator line below this section.</td></tr><tr><td>Home page only</td><td>Enable this checkbox to show this section in only home page.</td></tr><tr><td>Left content</td><td><p>In this section, you can set content in left side in announcement bar section.</p><ul><li>None</li><li>Social media icons</li><li>Text with icon</li></ul></td></tr><tr><td>Text with icon</td><td><p>This feature only work with select "Text with icon" option  in Left content.</p><p><br><strong>Icon</strong></p><p>In the section, the icons are given to select.</p><ul><li>None</li><li>Return</li><li>Quality</li><li>Box</li><li>Shipping</li><li>24/7 Service</li><li>Offer</li><li>Pin</li><li>Support</li><li>Truck</li><li>Dollar sign</li><li>Gift</li><li>Color user</li><li>Color payment</li><li>Color gift</li><li>Color shipping</li><li>Color deal</li><li>Color return</li><li>Payment</li><li>Color call</li><li>Headphone<br></li></ul><p><strong>Text</strong></p><p>Enter text to display in left content in announcement bar section.</p><p><br><strong>Link</strong><br> Use "link" to add a link to the Left content in the section.</p></td></tr><tr><td>Auto rotate between messages</td><td>Enable this checkbox to automatically rotate through the announcement bar text.</td></tr><tr><td>Change message every</td><td>Use the bar to set the auto-rotate time of the text. You can set a minimum of “3” seconds and a maximum of “9” seconds.</td></tr><tr><td>Country/region selector</td><td>By enabling this checkbox, you can see country/region selector in the announcement bar section.<br><br><strong>Enable country flag</strong><br>By enabling this checkbox, you can see the country flag in the announcement bar section.</td></tr><tr><td>Language selector</td><td>By enabling this checkbox, you can see Language selector in the announcement bar section.</td></tr><tr><td>Mobile layout</td><td>Enable this checkbox to show announcement bar on mobile.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxiYRJcesFSv92Ifa7iUW%2Fannouncement.png?alt=media&amp;token=6f099e5d-719a-44c7-97df-cb42593f7cf8" alt=""><figcaption></figcaption></figure>

## Add an announcement&#x20;

Only one announcement bar section is available in the theme, but, there can be more than ten blocks in the announcement bar section with which you can add multiple announcement bars. Moreover, In the announcement bar section, you can only add announcement bar blocks.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td><p></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Bottle</li><li>Box</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Text</td><td>Enter text to display as a announcement bar text on the section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FuwoDLO7AhFMgG0svTVaq%2Fannouncement-blocks.png?alt=media&amp;token=00b8ed5b-dbd3-4413-a3b9-114678a35211" alt=""><figcaption></figcaption></figure>


# Header section

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

There are three navigation menu arrangement types in the Sitar theme’s header section.

### 1. Logo left, menu bottom

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F83nuvYZt93JnzJomwP5R%2Fheader1.png?alt=media&amp;token=94f71a0e-8519-414f-a87d-16991c76f103" alt=""><figcaption></figcaption></figure>

### 2. Logo center, menu left

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FBeWevH2zOEv87OzXEM7W%2Fheader2.png?alt=media&amp;token=f55c2dc4-19be-41b4-9a4b-db370f1e44bb" alt=""><figcaption></figcaption></figure>

### 3. Logo center, menu bottom

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FceLS7uO5CH36gF1LpvdM%2Fheader3.png?alt=media&amp;token=63643ee9-5c72-4ac6-9e27-1ee92d8bf9c4" alt=""><figcaption></figcaption></figure>

The header customizations are as follows:

<table><thead><tr><th width="282">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Desktop logo position</td><td><p>Customization of desktop logo position in the header section is as follows:</p><ul><li>Top left</li><li>Middle left</li><li>Middle center</li></ul></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>Transparent header on desktop</td><td><strong>Enable transparent header on home page</strong><br>By enabling this checkbox, you can Enable transparent header on home page.<br><br><strong>Enable transparent header container background</strong><br>By enabling this checkbox, you can Enable transparent header container background on home page.</td></tr><tr><td>Show bottom border</td><td>By enabling this checkbox, you can show bottom border.</td></tr><tr><td>icon width</td><td>Use this option to change Search/account/cart icon width. You can set a minimum of “18px” and a maximum of “26px”.</td></tr><tr><td>Customer account icons</td><td><p>Customization of customer account icons in the header section is as follows:</p><ul><li>First</li><li>Second</li></ul></td></tr><tr><td>Menu</td><td><p><strong>Show main menu title link</strong></p><p>Enable this checkbox, you can Show main menu title link.</p><p><br><strong>Menu</strong></p><p>Click on "Select menu" to add a menu in the header section.</p><p></p><p><strong>Font family</strong> </p><p>Customization of menu text font in the header section is as follows:</p><ul><li>Body</li><li>Heading</li></ul><p></p><p><strong>Font weight</strong></p><p>Customization of menu custom font weight in the header section is as follows:</p><ul><li>400</li><li>500</li><li>600</li><li>700</li><li>800</li><li>900</li></ul><p></p><p><strong>Menu dropdown color</strong></p><p>In this section, you can change the background and foreground color of the dropdown 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>Sticky header</td><td><p>Customization of Sticky header in the header section is as follows:</p><ul><li>None</li><li>On scroll up</li><li>Always</li><li>Always, reduce logo size</li></ul></td></tr><tr><td>Sticky header color</td><td><p>In this section, you can change the background and foreground color of the sticky header 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>Header shadow</td><td><p>Customization of header shadow in the header section is as follows:</p><ul><li>On all page</li><li>On all page except home page</li></ul></td></tr><tr><td>Text with icon</td><td><p><strong>Show text with icon</strong><br>By enabling this checkbox, you can Show text with icon.</p><p></p><p><strong>Show background</strong></p><p>By enabling this checkbox, you can Show background.<br><br><strong>Icon</strong></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Best Price</li><li>Return</li><li>Quality</li><li>Box</li><li>Shipping</li><li>24/7 Service</li><li>Offer</li><li>Support</li><li>Truck</li><li>Dollar sign</li><li>Gift</li><li>Color User</li><li>Color Payment</li><li>Color gift</li><li>Color shipping</li><li>Deal</li><li>Return policy</li><li>Payment</li><li>24/7</li></ul><p><strong>Icon width</strong></p><p>Use this option to change icon width. You can set a minimum of “12px” and a maximum of “30px”.</p><p></p><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Text</strong><br>Input the text to be displayed in this section. Additionally, you can add the contact number for customer support<br><br><strong>Link</strong><br>Utilize the 'Link' option to insert a hyperlink into the section.</p></td></tr><tr><td>Mobile layout</td><td><strong>Country/region selector</strong><br>By enabling this checkbox, you can see country/region selector in the header section.<br><br><strong>Language selector</strong><br>By enabling this checkbox, you can see Language selector in the header section.</td></tr><tr><td>Spacing</td><td><strong>Bottom margin</strong><br>You can adjust the range of the bottom margin to increase or decrease the bottom spacing as needed.</td></tr><tr><td>Section padding</td><td><p><strong>Top padding</strong><br>You can adjust the range of the top padding to increase or decrease section padding as needed.</p><p><br><strong>Bottom padding</strong><br>You can adjust the range of the bottom padding to increase or decrease section padding as needed.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHFSaPYOwpJxZ9jxmj9aW%2Fheader.png?alt=media&amp;token=876aab35-5d0c-4853-b407-cd5c437f013e" alt=""><figcaption></figcaption></figure>


# Mega menu

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

Shopify allows you to nest menus and menu items in the Content > Menus Editor. You can build dropdown menus by creating or moving menu items so that they are “Nested” below a top-level item. Follow these steps to add Navigation:

* From your Shopify admin, go to **Content > Menus > Create menu**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FoKI6kcpZ1P4oRhECF3Xj%2Fs2.png?alt=media&amp;token=eca6d0ac-d29a-44e5-940d-53bf8fa7231e" alt=""><figcaption></figcaption></figure>

* Click the name of your Main menu.
* Choose one of the menu items to be the header for your dropdown menu, or add a new menu item to be the header. If you don't want the header to link to anything, then you can enter '#' in the **Link field** when you add the menu item.
* Add menu items to include in the new dropdown menu. Click **Add menu item** enter the name of the menu item, and enter or select a destination for the link.
* Click and drag the menu items to nest below the header item.
* Click the **Save menu**.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYvblP0nbdxKbHRHyytHg%2Fs3.png?alt=media&amp;token=2ec89008-b06a-4aac-b2be-ef11a0ef8ecf" alt=""><figcaption></figcaption></figure>

There are multiple types of Mega menus you can add to your store

1. Select the **Header** from the theme editor.
2. Click on "Add block.", user can create three types of blocks: Mega menu products, Mega menu submenu/gallery, Mega menu blog, Secondary menu.

## Mega menu products

Click on "Add block" and add the **Mega menu products** block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fxm2E2fgSuwvjegL8VS11%2Fmegamenu-products.png?alt=media&amp;token=62eb59a0-5cd7-4f49-af1e-40cbed3a8190" alt=""><figcaption></figcaption></figure>

Mega menu with the product allows you to add products with a submenu. Please follow the screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgetruGgE8p4xuFuOcR8c%2Fmegamenu-product-block.png?alt=media&amp;token=15578599-aa72-476f-9653-3ec111e3a5dc" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Collection</td><td>Select a collection to display products in the section.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" in the featured collection section is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in this section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image ratio</td><td><p>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Show second image on hover</td><td>By enabling this checkbox you can “Show the second image on hover”.</td></tr><tr><td>Show vendor</td><td>By enabling this checkbox you can display the “Product vendor”.</td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr><tr><td>Card 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></tbody></table>

{% hint style="danger" %}
Typing the same menu name in the Menu label will connect this menu to the Mega menu that is built through the theme editor. Check the below screenshot.
{% endhint %}

## Mega menu submenu/gallery

Click on "Add block" and add the **Mega menu submenu/gallery** block.

{% hint style="info" %}
**Recommendation Size**\
Megamenu gallery image size: 435x435
{% endhint %}

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwVx3zzMGRobCyrFyKZ45%2Fmegamenu-gallery.png?alt=media&amp;token=f53f4137-b356-497b-8442-d03685de750d" alt=""><figcaption></figcaption></figure>

This Mega menu allows you to add submenus and a gallery. Please follow the below screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FpOLj2dCNc0iKkyJf63Ri%2Fmegamenu-gallery-blocks.png?alt=media&amp;token=5a5c8bf8-7a07-484d-9b44-b52a07289bd3" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Image section</td><td><p><strong>Image ratio</strong><br>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p></p><p><strong>Show image</strong></p><p>Enable this settings to show gallery image.</p><p></p><p><strong>Image</strong><br>Use "Image" to add the image to the section.</p><p><br><strong>Label</strong><br>Enter text to display as a image label in the section.</p><p></p><p><strong>Link</strong><br> Use "link" to add a link to the image in the section.<br></p></td></tr></tbody></table>

## Mega menu blog

Click on "Add block" and add the **Mega menu blog** block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FVztfo3RoAdC5pKOZadaA%2Fmegamenu-blogs.png?alt=media&amp;token=3231724b-cc84-462c-a536-4e5ed00caf32" alt=""><figcaption></figcaption></figure>

To add a blog, go to Blog posts > Add blog post Add Multiple Blogs.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOUPEq2OrmWqNAJ9FbbK0%2Fblog.png?alt=media&amp;token=acb140d3-1d6d-4ccb-9da9-4c7f30b79c19" alt=""><figcaption></figcaption></figure>

After adding a blog, select the blog in the "Mega menu blog" block. Please follow the below screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHD9jyvis0MtKWpL6VUu8%2Fmegamenu-blogs-block.png?alt=media&amp;token=ddc963bc-f4a2-495e-ac64-073c24e05c98" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Choose blog</td><td>Click on "Select blog" to show the blogs in the section and select the blog collection.</td></tr><tr><td>Maximum blog to show</td><td>"Maximum blog to show" is to specify how many blog posts to show in a section. You can show a minimum of “2” and a maximum of “4” blog posts.</td></tr></tbody></table>

## Secondary menu

Click on "Add block" and add the **Secondary menu** block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGh6RSejpUjR6kwxYWUi4%2Fsecondary-menu.png?alt=media&amp;token=29fdb435-e46d-485f-9380-87fc0e2e186e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Secondary menu</td><td><p><strong>Secondary menu</strong></p><p>Click on "Select menu" to add a secondary menu in the header section. </p></td></tr><tr><td>First menu color</td><td>Modifying the color of the first menu.</td></tr></tbody></table>

This Mega menu allows you to add Secondary menu. Please follow the below screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FW7S5UM5ftZWCD8W4Qvqg%2Fsecondary-menu-block.png?alt=media&amp;token=f9ba773a-b0e6-46c0-b9d3-398dd14d4213" alt=""><figcaption></figcaption></figure>

## Menu badge

Click on "Add block" and add the **Menu badge** block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FuPELLHlBblfoQmAESvck%2Fmenu-badge.png?alt=media&amp;token=89e1aa42-a451-49f2-8909-ac6cda8dbf15" alt=""><figcaption></figcaption></figure>

This Mega menu allows you to add Menu badge. Please follow the below screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhqQtnAvHtip1n90cWdnB%2Fmenu-badge-block.png?alt=media&amp;token=08f9c245-086c-4828-a939-35653f05024a" alt=""><figcaption></figcaption></figure>

## Megamenu banner

Display promotional banners inside the mega menu to highlight featured collections, categories, products, seasonal campaigns, or special offers. Banner blocks help attract customer attention and create a visually engaging navigation experience while providing quick access to important store content.

Click on "Add block" and add the **Megamenu banner** block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FVDN8lytB2OaQPDbx3VSf%2Fmegamenu%20block.png?alt=media&amp;token=52384523-d0d5-48e9-94e0-f18cde5fd5d0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu Label</td><td>Enter the menu item name where the mega menu banner should be displayed.</td></tr><tr><td>Show Submenu</td><td>Enable or disable submenu links within the mega menu layout.</td></tr><tr><td>Image Ratio</td><td><p>Choose the aspect ratio used for banner images displayed in the mega menu. </p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Image position</td><td><p>Select the position of the banner images within the mega menu layout. </p><ul><li>Beside the menu column — Displays banner images next to the submenu navigation columns.</li><li>Fullwidth</li></ul></td></tr><tr><td>First Banner</td><td><p>Configure the first promotional banner displayed within the mega menu.</p><p></p><p><strong>Enable banner</strong> </p><p>Enable or disable the first mega menu banner. </p><p></p><p><strong>Image</strong> </p><p>Select an image to display within the banner. </p><p></p><p><strong>Heading</strong> </p><p>Enter the banner heading text. </p><p></p><p><strong>Color Scheme</strong> </p><p>Select a predefined color scheme for the banner content. </p><p></p><p><strong>Label</strong> </p><p>Enter the button label displayed on the banner. Leave blank to hide the button.  </p><p></p><p><strong>Link</strong> </p><p>Select a collection, product, page, or custom URL for the banner button. </p><p></p><p><strong>Open This Link In A New Window</strong> </p><p>Open the banner link in a new browser tab or window. </p><p></p><p><strong>Style</strong> </p><p>Select the button style used for the banner call-to-action. </p><ul><li>Link — Displays the button as a simple text link with minimal styling.</li><li>Outline — Displays a transparent button with a visible border.</li><li>Solid — Displays a fully filled button for maximum visual emphasis.</li></ul></td></tr><tr><td>Second Banner</td><td><p>Display an additional promotional banner within the mega menu to feature collections, products, or marketing campaigns. </p><p></p><p><strong>Enable banner</strong> </p><p>Show or hide the second mega menu banner.</p><p></p><p><strong>Image</strong> </p><p>Upload an image for the promotional banner.</p><p></p><p><strong>Heading</strong> </p><p>Add a title or promotional message displayed on the banner.</p><p></p><p><strong>Color Scheme</strong></p><p>Choose the color scheme applied to banner content.</p><p></p><p><strong>Label</strong></p><p>Enter the button text displayed on the banner.</p><p></p><p><strong>Link</strong></p><p>Select the destination page for the banner button.</p><p></p><p><strong>Open This Link In A New Window</strong></p><p>Open the banner link in a new browser tab when clicked.</p><p></p><p><strong>Style</strong></p><p>Choose between <strong>Link</strong>, <strong>Outline</strong>, or <strong>Solid</strong> button styles for the banner call-to-action.</p></td></tr></tbody></table>

This Mega menu allows you to add Megamenu banner. Please follow the below screenshot.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYDGwOw5T0II60752zmKU%2Fmegamenu%20banner.png?alt=media&amp;token=cf103d66-7f18-4d6c-83dc-48b39fef1668" alt=""><figcaption></figcaption></figure>

## Click "Add section" and use some sections.

We are providing one special feature, You can add multiple additional sections in the header.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlxsMWO1PMviOjVbsTowB%2Fheader_sections.png?alt=media&amp;token=d85e03f8-e5f7-445c-bd41-24c7aa221d1b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a menu badge.</td></tr><tr><td>Badge</td><td>Enter text to show in badge.</td></tr><tr><td>Text</td><td>In this feature, you can change the text color of badge.</td></tr><tr><td>Background</td><td>In this feature, you can change the background color of badge.</td></tr></tbody></table>


# Overlay Group


# Newsletter Popup

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

A subscription popup is a user-friendly feature in your theme documentation that allows visitors to subscribe to updates, news, and important information related to your theme. This non-intrusive form typically appears as a small window or overlay, enabling users to easily input their email addresses and opt-in to receive notifications. Customization options are available to match the popup's appearance to your theme's design.

{% hint style="info" %}
**Recommendation Size**\
Newsletter popup image size: 390x400
{% endhint %}

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image layout</td><td><p>Following is the image layout customization of the popup.</p><ul><li>Left</li><li>Right</li><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Image fit</td><td><p>The image fit customization setting is as follows:</p><ul><li>Contain</li><li>Cover</li></ul></td></tr><tr><td>Limit display</td><td>You can adjust the limit for displaying the popup using the 'Limit display' setting. You can show the popup a minimum of 0 and a maximum of 100 times.</td></tr><tr><td>Limit display сache lifetime (days)</td><td>You can specify the number of days for which the popup will be displayed. Enter the desired number of days here.</td></tr><tr><td>Position</td><td><p>To change the position of the popup, utilize the "Position" setting. Customization of the "Position" in the popup section is as follows:</p><ul><li>Top left</li><li>Top</li><li>Top right</li><li>Left</li><li>Center</li><li>Right</li><li>Bottom left</li><li>Bottom</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the popup, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the popup section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Triggers</td><td><p><strong>Id</strong><br>By adding an ID to any text, and specifying that id as '#yourId' in this setting, clicking on the text will trigger the opening of the popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.<br><br><strong>Trigger open</strong></p><p>Customization of the "Trigger open" in the popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>Exit intent</li><li>Manual trigger</li></ul><p><strong>Time delay for a trigger open</strong><br>In these settings, you can define the timing for opening the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Open scroll type</strong><br>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Open scroll type" in the popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Open scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should open<br><br><strong>CSS selector for manual trigger</strong><br>By adding an class to any text, and specifying that class as '.yourClass' in this setting, clicking on the text will trigger the opening of the popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.</p><p>If the html element has buttons or links inside, then clicking on them will not work.<br><br><strong>Trigger close</strong></p><p>Customization of the "Trigger close" in the popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>None</li></ul><p><strong>Time delay for a trigger close</strong><br>In these settings, you can define the timing for closing the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Close scroll type</strong></p><p>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Close scroll type" in the popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Close scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should close.</p></td></tr><tr><td>Style</td><td><p><strong>Width</strong><br>Use this option to increase or decrease the popup width. You can set a minimum of “200px” and a maximum of “1920px”.<br><br><strong>Open animation</strong></p><p>Customization of the "Open animation" in the popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Close animation</strong></p><p>Customization of the "Close animation" in the popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Show overlay</strong><br>When this checkbox is enabled, the overlay will be displayed when the popup is triggered.</p></td></tr><tr><td>Advanced</td><td><strong>Mobile disable</strong><br>When 'Mobile disable' is enabled, the popup will be disable on mobile.<br><br><strong>Disable scrolling</strong><br>When 'Disable scrolling' is activated, it will disable scrolling on the body of the page.<br><br><strong>Click overlay to close</strong><br>Enabling this option will cause popup to close when user clicks on overlay.<br><br><strong>Press ESC to close</strong><br>Checking this will cause popup to close when user presses ESC key.<br><br><strong>Press F4 to close</strong><br>Enabling this option will cause popup to close when user presses F4 key.<br><br><strong>Show on homepage</strong><br>By checking this checkbox, the popup will only be displayed on the homepage.<br><br><strong>Show on product and category</strong><br>By enabling this checkbox, the popup will only be displayed on the product and category page.<br><br><strong>Show on all pages</strong><br>Enabling this checkbox will display the popup on all pages except for the customer page.</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></tbody></table>

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/qJzRpfcuVHblQ11tTnMk/popup.png" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Popup section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><strong>Heading</strong><br>Enter text to display as a title on the popup section.</td></tr><tr><td>Subscribe form</td><td><p>Click on the "Add block" and select the Button.</p><p></p><p><strong>Placeholder input</strong><br>Enter text to display as a placeholder input on the popup section.<br><br><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the popup section is as follows:</p><ul><li>Primary</li><li>Secondary</li><li>Tertiary</li></ul><p><strong>Button position column</strong><br>Enabling this checkbox will display the button position in column.<br></p><p><strong>Description</strong><br>Enter text to display as a description on the popup section.</p></td></tr><tr><td>Social links</td><td><strong>Icon color</strong><br>Using this setting, you can change the icon color<br><br>- By checking the checkbox below, you can display the social icons.</td></tr></tbody></table>

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/KFc3xyh6JhaYuFESzU5v/popup-blocks.png" alt=""><figcaption></figcaption></figure>


# Promotional Popup

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

The Promotional Popup: Effortlessly create and customize popups to showcase special offers, discounts, or important announcements. Choose from various display triggers, such as time delay or user interactions, to effectively capture your visitors' attention. Make your messages pop with our promotional popup feature!

{% hint style="info" %}
**Recommendation Size**\
&#x20;Promotional popup image size: 260x214
{% endhint %}

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image fit</td><td><p>The image fit customization setting is as follows:</p><ul><li>Contain</li><li>Cover</li></ul></td></tr><tr><td>Image position</td><td><p>Following is the image position customization of the popup.</p><ul><li>Left</li><li>Right</li><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a heading on the promotional popup section.</td></tr><tr><td>Text</td><td>Enter text to display as a description on the promotional popup section.</td></tr><tr><td>Show button</td><td>Enabling this checkbox will display the button.</td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button action</td><td><p>Customization of the "Button action" in the promotional popup section is as follows:</p><ul><li>Link</li><li>Accept</li></ul></td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the promotional popup section is as follows:</p><ul><li>Primary</li><li>Secondary</li><li>Tertiary</li></ul></td></tr><tr><td>Position</td><td><p>To change the position of the promotional popup, utilize the "Position" setting. Customization of the "Position" in the promotional popup section is as follows:</p><ul><li>Top left</li><li>Top</li><li>Top right</li><li>Left</li><li>Center</li><li>Right</li><li>Bottom left</li><li>Bottom</li><li>Bottom right</li></ul></td></tr><tr><td>Triggers</td><td><p><strong>Id</strong><br>By adding an ID to any text, and specifying that id as '#yourId' in this setting, clicking on the text will trigger the opening of the promotional popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.<br><br><strong>Trigger open</strong></p><p>Customization of the "Trigger open" in the promotional popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>Exit intent</li><li>Manual trigger</li></ul><p><strong>Time delay for a trigger open</strong><br>In these settings, you can define the timing for opening the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Open scroll type</strong><br>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Open scroll type" in the promotional popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Open scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should open<br><br><strong>CSS selector for manual trigger</strong><br>By adding an class to any text, and specifying that class as '.yourClass' in this setting, clicking on the text will trigger the opening of the popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.</p><p>If the html element has buttons or links inside, then clicking on them will not work.<br><br><strong>Trigger close</strong></p><p>Customization of the "Trigger close" in the promotional popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>None</li></ul><p><strong>Time delay for a trigger close</strong><br>In these settings, you can define the timing for closing the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Close scroll type</strong></p><p>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Close scroll type" in the promotional popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Close scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should close.<br><br><strong>Show close button</strong><br>Enabling this checkbox will display the close button in the promotional popup section.</p></td></tr><tr><td>Style</td><td><p><strong>Width</strong><br>Use this option to increase or decrease the popup width. You can set a minimum of “200px” and a maximum of “1920px”.<br><br><strong>Open animation</strong></p><p>Customization of the "Open animation" in the promotional popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Close animation</strong></p><p>Customization of the "Close animation" in the promotional popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Show overlay</strong><br>When this checkbox is enabled, the overlay will be displayed when the popup is triggered.</p></td></tr><tr><td>Advanced</td><td><strong>Mobile disable</strong><br>When 'Mobile disable' is enabled, the popup will be disable on mobile.<br><br><strong>Disable scrolling</strong><br>When 'Disable scrolling' is activated, it will disable scrolling on the body of the page.<br><br><strong>Click overlay to close</strong><br>Enabling this option will cause popup to close when user clicks on overlay.<br><br><strong>Press ESC to close</strong><br>Checking this will cause popup to close when user presses ESC key.<br><br><strong>Press F4 to close</strong><br>Enabling this option will cause popup to close when user presses F4 key.<br><br><strong>Show on homepage</strong><br>By checking this checkbox, the popup will only be displayed on the homepage.<br><br><strong>Show on product and category</strong><br>By enabling this checkbox, the popup will only be displayed on the product and category page.<br><br><strong>Show on all pages</strong><br>Enabling this checkbox will display the popup on all pages except for the customer page.</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></tbody></table>

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/K1jyzYwWQrW9ARnDSy6H/promotional-popup.png" alt=""><figcaption></figcaption></figure>


# Sections


# Lookbook

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

The "Lookbook" section is provide by the sitar theme. show off your products in style with a Lookbook section - a visual collection that tells the story of your brand through eye-catching images.

{% hint style="info" %}
**Recommendation Size**\
Lookbook image desktop size: 1600x600
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make full width section.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the Lookbook section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the Lookbook section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Lookbook section is as follows:</p><ul><li>Left</li><li>Center</li></ul><p><strong>Product preview style</strong></p><p>Customization of the "Product preview style" in the Lookbook section is as follows:</p><ul><li>Horizontal</li><li>Vertical</li></ul><p><strong>Hide vendor</strong> </p><p>By enabling this checkbox, you can hide product vendor in this section.</p></td></tr><tr><td>Heading/subheading alignment</td><td><p>Following is the heading alignment customization of the section:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in the lookbook section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

## **Add Image**

To add blocks to the Lookbook section, click on the 'Add image'. There are many options available similar to the lookbook.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "image" to add the image to the section.</td></tr><tr><td>Product</td><td><p><strong>Position top</strong><br>You can set the position of the product image from the top using position top. You can set a minimum of “0%” and a maximum of “100%” from the top.<br><br><strong>Position left</strong><br>You can set the position of the product image from the left using position left. You can set a minimum of “0%” and a maximum of “100%” from the left.<br><br><strong>Select product</strong><br>Select a product to display selected product in the section. </p><p></p><p><strong>Select collection list</strong></p><p>Use this setting to add list of collections in each block.<br><br><strong>Collection color scheme</strong></p><p>You can change the background and foreground color of a collection list 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></tbody></table>


# Product comparison

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

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the product comparison section is as follows:</p><ul><li>Slider</li><li>Grid</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong></p><p>Enter text to display as a title in the section. </p><p></p><p>Size </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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p></p><p><strong>Position</strong></p><p>Customization of the "Subheading position" in the section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p></p><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Column Heading</td><td><p><strong>First</strong> </p><p>Use this settings to enter the text to display as a first column heading. </p><p></p><p><strong>Second</strong></p><p>Use this settings to enter the text to display as a second column heading. </p><p></p><p><strong>Third</strong></p><p>Use this settings to enter the text to display as a third column heading.</p></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F5I26vZslWIxwl04xXRDI%2Fproduct-comparision.png?alt=media&amp;token=e1e1cd41-24c9-43de-9850-68b9eacd5043" alt=""><figcaption></figcaption></figure>

## Add product info

To add product info to the Product comparison section, click on the 'Add product info'.&#x20;

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>First column</td><td><p><strong>Image</strong></p><p>Use "Image" to add the image to the first column of product info. </p><p></p><p><strong>Title</strong></p><p>Use this setting to add product info main heading in first column.</p><p></p><p><strong>Content</strong> </p><p>Use this setting to add product info content in first column.</p></td></tr><tr><td>Second column</td><td><p><strong>Included</strong> </p><p>Customization of the "Include" in the second column of product info is as follows:</p><ul><li>Yes</li><li>No</li></ul></td></tr><tr><td>Third column</td><td><p><strong>Included</strong> </p><p>Customization of the "Include" in the third column of product info is as follows:</p><ul><li>Yes</li><li>No</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYdZiRF6JY9mslZJhBlKh%2Fproduct_comparison_block.png?alt=media&amp;token=952d8f65-2211-4033-82f8-2af5b32f7848" alt=""><figcaption></figcaption></figure>


# Social media gallery

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

The "Social media gallery" section is provide by the Sitar theme. This section is used to add a Image  with a title,description and button.

{% hint style="info" %}
**Recommendation Size**\
Social media image size: 238x238
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Background image</td><td>Use this setting to select background image for section.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image banner section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Image banner section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Image banner section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>User description</td><td><p><strong>Heading</strong> </p><p>Enter user description to display in the section. </p><p></p><p><strong>Add instagram tags</strong> </p><p>Use this setting to add instagram tags in the section.</p><p></p><p><strong>Tag size</strong></p><p>Customization of the "Tag style" in the section is as follows:</p><ul><li>Body</li><li>Subtitle</li></ul></td></tr><tr><td>Button</td><td><p><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the section.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Social media gallery section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Content color scheme</td><td><p></p><p>In this section, you can change the content background and foreground color 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>Content overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the content container overlay. Modify the "Conetent Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the Content container.</td></tr><tr><td>Post per row</td><td>"Post per row" is to specify how many post to show in a row. You can show a minimum of “2” and a maximum of “6” post.</td></tr><tr><td>Icon style</td><td><p>Customization of the "Icon style" in the Social media gallery section is as follows:</p><ul><li>None</li><li>Instagram</li><li>Facebook</li><li>Twitter</li><li>Tiktok</li><li>Vimeo</li><li>Youtube</li><li>Pinterest</li></ul></td></tr><tr><td>Layout</td><td><p></p><p>Customization of the "Layout" in the Social media gallery section is as follows:</p><ul><li>Slider</li><li>Grid</li></ul></td></tr><tr><td>Slider arrow position</td><td><p></p><p>Customization of the "Slider arrow position" style in the featured collection section is as follows:</p><ul><li>Top</li><li>Inline </li><li>Bottom</li></ul></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>Video features</td><td><p><strong>Play video on loop</strong> </p><p>Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart. </p><p></p><p><strong>Video height on desktop</strong></p><p>Use this settings to set video height for desktop device.</p><p></p><p><strong>Video height on mobile</strong><br>Use this settings to set video height for mobile device.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of social media gallery columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F3vda3CSCEeC88gTJ6yi2%2Fsocial.png?alt=media&amp;token=c92a7620-c8d1-486d-aa83-060e3823df07" alt=""><figcaption></figcaption></figure>

## Add post

To add post to the Social media gallery section, click on the 'Add post'.&#x20;

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Post</td><td><p><strong>Video</strong> </p><p>Use "Video" to add MP4 video to the post. Use only the MP4 video here.</p><p></p><p><strong>Image</strong></p><p>Use "Image" to add the image to the post. </p><p></p><p><strong>Link</strong></p><p>Use "Link" to add link to the post. </p><p></p><p><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab. </p><p></p><p><strong>Enable icon background</strong></p><p>By enable "Enable icon background" option, show background color in icon.</p><p></p><p><strong>Product</strong> </p><p>Use "Product" to select product for the post.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdpqgRaJb8cIFWpsEzWrt%2Fsocial-block.png?alt=media&amp;token=0f2bff39-01c2-4289-a480-32c7d974fca7" alt=""><figcaption></figcaption></figure>


# Image with product

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

In this section, when a point on the image is clicked, the image zooms in, and when double-clicked, the image zooms out while also activating the related product.

{% hint style="info" %}
**Recommendation Size**\
Banner image size: 1550x1488
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Text</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image with product section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Image with product section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Image with product section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in this section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNVd7ZwSpgl8Bij00j5sf%2Fs1.png?alt=media&amp;token=93f1146f-ec8c-420a-bf44-d9d75ad31acc" alt=""><figcaption></figcaption></figure>

## **Add Image**

To add blocks to this section, click on the 'Add image'. There are many options available similar to the Image with product.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "image" to add the image to the section.</td></tr><tr><td>Product</td><td><p><strong>Position top</strong><br>You can set the position of the product image from the top using position top. You can set a minimum of “0%” and a maximum of “100%” from the top.<br><br><strong>Position left</strong><br>You can set the position of the product image from the left using position left. You can set a minimum of “0%” and a maximum of “100%” from the left.<br><br><strong>Select product</strong><br>Select a product to display selected product in the section. <br><br><strong>Collection color scheme</strong></p><p>You can change the background and foreground color of a collection list 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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FtPsxh3oUB4feJ2g646S1%2Fs2.png?alt=media&amp;token=832f2c42-b41a-4c08-be6e-ad3a55622b17" alt=""><figcaption></figcaption></figure>


# Countdown timer

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

This section is taken into use to showcase special offers with a Counter timer.

{% hint style="info" %}
**Recommendation Size**\
Countdown timer background image size: 1920x350
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background image</td><td>Use "Image" to add the Background image to the section.</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>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the Countdown timer section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Button style</td><td><p>Customization of the button style in the Countdown timer section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>End date</td><td>The end date must be set to a future date and include the following format: YYYY/MM/DD Example: 2024/10/05.</td></tr><tr><td>Timer ending text</td><td>The entered text will be displayed as a timer expiration message. It will appear once the date has expired.</td></tr></tbody></table>


# Collection name

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

Sitar theme provides a section, namely "Collection name" in this section, you can show the collection name.

{% hint style="info" %}
**Recommendation Size**\
Collection image size: 300x350
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Collection name section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Collection name section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br>Customization of the "Heading/subheading alignment" in the Collection name section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Enable "View all" button</td><td>By enabling this checkbox, you can see "View all" button if list includes more collections than shown.</td></tr><tr><td>"View all" label</td><td>Use "View all button label" to add a label to the VIew all button in the section.</td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the featured collection section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Enable Bold Text</td><td><p>Enable this option to display the collection name labels using a <strong>bold font weight</strong>, making them more prominent and easier for customers to notice.</p><p></p><ul><li><strong>Enabled:</strong> Collection names are displayed in <strong>bold</strong>, giving greater emphasis and improving visibility.</li><li><strong>Disabled:</strong> Collection names use the default font weight for a cleaner, more subtle appearance.</li></ul></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></tbody></table>

## Add collection

To add collection to the collection name section, click on the 'Add Collection'. There are many options available similar to the collection name, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Bottle</li><li>Box</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Collection</td><td>Select a collection to display collection in the section.</td></tr><tr><td>Collection name</td><td>Enter text to display as a Collection name in the section.</td></tr><tr><td>Background color</td><td>You can customize the background color of collection name by using background color.</td></tr></tbody></table>


# Image Overlay

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

The "Image overlay" section is provide by the Sitar theme. This section allows blocks to overlap and swipe.

{% hint style="info" %}
**Recommendation Size**\
Image size: 795x478
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the Image overlay section is as follows:</p><ul><li>Full width</li><li>Grid</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image banner section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p></p><p><strong>Position</strong></p><p>Customization of the "Subheading position" in the Image banner section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p></p><p><strong>Heading/subheading alignment</strong><br>Customization of the "Heading/subheading alignment" in the Image banner section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Show collection description</td><td>By enabling this checkbox, you can show collection description from the admin.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the Image overlay section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Image banner section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></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>Image behavior</td><td><p>Customization of the "Banner height" in the Image banner section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FR4ImkqIEBeqNYbU3Dhs8%2Fimage-overlay.png?alt=media&amp;token=12499d77-af58-4a4a-9aa9-9ce69acc9670" alt=""><figcaption></figcaption></figure>

## Add image block

To add banner to the Image banner section, click on the 'Add image block'. There are many options available , as you can see in the below points and screenshot.

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Subheading</td><td>Enter the text you would like to display as a subheading above the block main title.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><p>Customization of the "Heading size" in the Image overlay</p><p>section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Label background</td><td>Select color to set as a background color of subheading.</td></tr><tr><td>Label text</td><td>Select color to set as a foreground color of subheading.</td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a image block by provided 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>Button</td><td><p><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the image.</p><p>Leave the label blank to hide the button.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the image block.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Style</strong></p><p>Customization of the "Button style" in the image block of</p><p>Image overlay section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FrgNX9wKJeDrCVk8H95Pb%2Fimage-overlay-block.png?alt=media&amp;token=d71a6dfc-97fc-4740-836a-6f2b07363215" alt=""><figcaption></figcaption></figure>


# Slideshow

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

The slideshow allows multiple slides to display with images and optional text. This section allows you to add a slideshow in Full Width or Grid. There are many options available similar to the slideshow, as you can see in the below screenshot:

{% hint style="info" %}

**Recommendation Size**\
Slideshow image desktop size: 1920x800\
Slideshow image mobile size: 767x750
{% endhint %}

You can add a slideshow section to display a carousel of images on a page in your store.

<table><thead><tr><th width="231">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the Slideshow section is as follows:</p><ul><li>Full width</li><li>Grid</li></ul></td></tr><tr><td>Slide height</td><td><p>Customization of the "Slide height" in the Slideshow section is as follows:</p><ul><li>Adapt to first image</li><li>Fix height</li></ul></td></tr><tr><td>Desktop fixed height</td><td>"Desktop fixed height" is to set fixed height in desktop. You can set a minimum of “200px” and a maximum of “1000px” height in desktop.</td></tr><tr><td>Mobile fixed height</td><td>"Mobile fixed height" is to set fixed height in mobile. You can set a minimum of “200px” and a maximum of “600px” height in mobile.</td></tr><tr><td>Pagination</td><td><p><strong>Pagination style</strong></p><p>The style of the slideshow navigation that appears below the images:</p><ul><li>Dots</li><li>Counter</li><li>Numbers</li></ul><p><strong>Pagination foreground on desktop</strong></p><p>You can modify the foreground color in the pagination settings to change both the color of the pagination arrows and the accompanying text in desktop.</p><p></p><p><strong>Pagination foreground on mobile</strong></p><p>You can modify the foreground color in the pagination settings to change both the color of the pagination arrows and the accompanying text in mobile.</p><p></p><p><strong>Enable border around pagination</strong></p><p>Enable this checkbox to show border around pagination.</p><p></p><p><strong>Pagination corner radius</strong></p><p>Use this option to increase or decrease the Pagination corner radius. You can set a minimum of “0px” and a maximum of “20px”.</p><p></p><p><strong>Pagination alignment</strong></p><p>The Pagination Alignment feature offers options for aligning pagination to the left, right, or center.</p><p></p></td></tr><tr><td>Auto-rotate slides</td><td>Enable this checkbox to automatically rotate through the images in the slideshow.</td></tr><tr><td>Change slides every</td><td>Use the bar to set the auto-rotate time of the slideshow. You can set a minimum of “3” seconds and a maximum of “9” seconds.</td></tr><tr><td>Animations</td><td><p>Customization of the "Image behavior" in the Slideshow section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul><p>By employing the Ambient movement feature, the slider images will exhibit motion.</p></td></tr><tr><td>Slideshow description</td><td>Describe the slideshow for customers using screen readers.</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>Scrolling bar</td><td><strong>Show scrolling bar</strong><br>Enable this checkbox to show scrolling bar.<br><br><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Space between items</strong><br>"Space between items" is to give left and right side spacing to the text of the section. You can adjust the spacing and set it to the minimum spacing of “0px” and a maximum spacing of “100px.”<br><br><strong>Speed</strong><br>Speed is used to customize the scrolling speed of the text in the section.<br><br>Direction<br>Use of "Direction" allows the rotation of the "Text" from left to right and right to left<br><br><strong>Seprater beatween text</strong><br>With the help of a Seprater beatween text, you can add a pipe sign or a dot between the text.<br><br><strong>Top padding</strong><br>"Top padding is used to create spacing above the scrollable text content. You have the flexibility to customize the padding, ranging from a minimum of '0px' to a maximum of '100px'."<br><br><strong>Bottom padding</strong><br>"Bottom padding is used to create spacing below the scrollable text content. You have the flexibility to customize the padding, ranging from a minimum of '0px' to a maximum of '100px'."</td></tr><tr><td>Mobile layout</td><td>By enabling this checkbox, you can view the slide content below the image in a mobile device.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FtK7m3bFtkbNwolnVnsGd%2Fslideshow.png?alt=media&amp;token=130e80e9-1f35-4bb9-a462-e0138d9c70d0" alt=""><figcaption></figcaption></figure>

## Add Slide

To add slides to the slideshow section, click on the 'Add Slide'. There are many options available similar to the slideshow, as you can see in the below points and screenshot:

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Video</td><td><strong>Play video on loop</strong><br>Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.<br><br><strong>Auto play video</strong><br>By enabling "Auto play video" the video will automatically start playing.</td></tr><tr><td>Shopify hosted video</td><td><strong>Video</strong><br>Use only the MP4 video here.<br><br><strong>Or embed video from URL</strong><br>Add Youtube, Vimeo  URL and display the video.</td></tr><tr><td>Image</td><td><strong>Image</strong><br>Use "Image" to add the image to the section.<br><br><strong>Mobile image</strong><br>If you want to add a separate image for mobile devices, add a image here.<br><br><strong>Image overlay opacity</strong><br>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the slide's image</td></tr><tr><td>Collection</td><td><strong>Collection</strong><br>Select a collection to display collection image and title.</td></tr><tr><td>Subheading icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Bottle</li><li>Box</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Subheading</td><td>Enter the text you would like to display as a subtitle below the slide's title.</td></tr><tr><td>Enable subheading blur background</td><td>Enable this checkbox to Use blur background on subheading.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Uppercase heading</td><td>Enable this checkbox to Use uppercase heading.</td></tr><tr><td>Heading size</td><td><p>Customization of the "Heading size" in the slideshow section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Custom</li></ul></td></tr><tr><td>Heading size</td><td>You can adjust the block heading font size using this setting.  You can set heading font size in range between “30px.” to “60px.”</td></tr><tr><td>Heading gradient color</td><td>Using this setting you can set gradient color of block heading.</td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description size</td><td><p>Customization of the "Description size" in the slideshow section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td> Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the slideshow section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the slide, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the Slideshow section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Show container on desktop</td><td>When 'Show container on desktop' is enabled, the slide's content container box will be visible on desktop.</td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Clickable image</td><td>By activating this checkbox, you can make the image clickable. This setting will only work if the button label is not added.</td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided 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 content alignment</strong></p><p>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FptptDw8oxoO2v0svHmpX%2Fslideshow-block.png?alt=media&amp;token=eccd759c-bad6-43db-9150-1c7df75448df" alt=""><figcaption></figcaption></figure>


# Collection list

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

Sitar theme provides a section, namely "Collection list" in this section, you can show the collection as a slideshow. You can display a maximum of fifteen collections in this section.

{% hint style="info" %}
**Recommendation Size**\
Collection image size: 300x350
{% endhint %}

<table><thead><tr><th width="287">Setting</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 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>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the Collection list section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the Collection list section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Collection list section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Heading/subheading alignment</td><td><p>Customization of the "Heading/subheading alignment" in the Collection list section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the Collection list section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Button position</td><td><p>Customization of the "Button position" style in the Collection list section is as follows:</p><ul><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Enable "View all" button</td><td>By enabling this checkbox, you can see "View all" button, if list includes more collections than shown.</td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" style in the Collection list section is as follows:</p><ul><li>Top</li><li>Inline </li><li>Bottom</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “5” products.</td></tr><tr><td>Auto play</td><td>Enable this checkbox to automatically rotate through the slide in the collection list.</td></tr><tr><td>Slide speed</td><td>Use the bar to set the auto-rotate time of the slide. You can set a minimum of “3” seconds and a maximum of “9” seconds.</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>Style</td><td><p>Collection list "Style" is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of "Text alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image ratio</td><td><p>In the section, Image size customization is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Collection image style</td><td><p></p><p>In the section, Collection image style customization is as follows:</p><ul><li>Collection image</li><li>Product first image</li></ul></td></tr><tr><td>Design type</td><td><p>Collection list "Design type" is as follows:</p><ul><li>Text below image</li><li>Text over image</li></ul></td></tr><tr><td>Enable rounded image</td><td>Enable this settings to show collection image in rounded shape. This feature gives better results with square images.</td></tr><tr><td>Show items count</td><td>Enable this checkbox to you can show items count in this section.</td></tr><tr><td>Collection name size</td><td><p>In the section, collection name size customization is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p>Applicable when collection name style is set to 'normal'.</p></td></tr><tr><td>Collection name style</td><td><p>In the section, collection name style customization is as follows:</p><ul><li>Normal</li><li>Fill with background</li></ul></td></tr><tr><td>Enable arrow beside the name</td><td>Enable this checkbox to you can show arrow beside the name.</td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of collection columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FysorfqoAuT0bMdPl40BP%2Fcollection-list.png?alt=media&amp;token=8eda46a5-581b-42e8-8b82-905915d03982" alt=""><figcaption></figcaption></figure>

## Add Collection&#x20;

To add collection to the collection list section, click on the 'Add Collection'. There are many options available similar to the collection list, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Select a collection to display collection in the section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FK2Trtyhm10OHTrgfHxVC%2Fcollection-list-block.png?alt=media&amp;token=10ed31d9-91c5-468b-b654-3dd21569bea7" alt=""><figcaption></figcaption></figure>


# Image with text

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

Add an image with a title, description, and Button. Choose the size of your image and upload it.

{% hint style="info" %}
**Recommendation Size**\
**I**mage size: 775x720
{% endhint %}

<table><thead><tr><th width="270">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>Enable this checkbox to set full width background in the image with text section.</td></tr><tr><td>First image</td><td>Use "First image" to add the main image to the section.</td></tr><tr><td>Second image</td><td>Use "Second image" to add the small image to the section.</td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in the Image with text section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Image position</td><td><p>Customization of the "Image position" in the Image with text section is as follows:</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td>Desktop Image width</td><td><p>Below, you will find customizations for adjusting the desktop image width within this section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop content position</td><td><p>Desktop content position customization of the text in the section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of text alignment in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Background image</td><td>You can add an image behind the content by using a background image.</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>Animations</td><td><p>Customization of the "Image behavior" in the Image with text section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul><p>By employing the Ambient movement feature, the image will exhibit motion.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile content alignment</strong><br>Customization of text alignment in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fo0mLgndt49wxbAkgamyU%2Fimage-with-text.png?alt=media&amp;token=8dff30be-83b1-42f2-8377-d8358032ab07" alt=""><figcaption></figcaption></figure>

## Add block

To add blocks to the Image with text section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Bottle</li><li>Box</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Open collapsible row</td><td>Enable this checkbox to open collapsible row.</td></tr><tr><td>Row content</td><td>Enter text to display as a row content in the section.</td></tr><tr><td>Row content from page</td><td>Used page to add the content from page in the section.</td></tr><tr><td>Heading</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Heading 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></td></tr><tr><td>Caption</td><td><p><strong>Text</strong><br>Input the text to be displayed in this section.</p><p><br><strong>Uppercase text</strong></p><p>Enable this checkbox to set uppercase text.</p></td></tr><tr><td>Text</td><td><p><strong>Sub heading</strong><br>Click on the "Add block" and select the Heading. And enter text to display as a sub heading in the section.<br></p><p><strong>Content</strong><br>Click on the "Add block" and select the text. And enter text to display as a Content in the section.<br><br><strong>Content</strong> <strong>style</strong></p><p>Customization of the "Content style" in the Image with text section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Author details</td><td><p><strong>Image</strong><br>Used image to add to the author image in the section.<br><br><strong>Image type</strong></p><p>Customization of the "Image type" in the Image with text section is as follows:</p><ul><li>Original</li><li>Circle</li><li>Rounded rectangle</li></ul><p><strong>Name</strong><br>Enter text to display as a author name in the section.<br><br><strong>Position</strong><br>Enter text to display as a author position in the section.</p></td></tr><tr><td>Button</td><td><p>Click on the "Add block" and select the Button.<br><br><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the section.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Image with text section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FA3WctMtlQpiLNguTecpZ%2Fimage-with-text-block.png?alt=media&amp;token=41a75786-9e68-4e11-9f3b-115319bdcd9a" alt=""><figcaption></figcaption></figure>


# Featured collection

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

Ideal for sales displays a collection of products such as new arrivals or adding products to any area of your store.

{% hint style="info" %}
**Recommendation Size**\
Product image size: 1000x1000\
Banner image size: 400x500
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td><p>eIn 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>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Featured Collection section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Featured Collection section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Featured Collection section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Show collection description</td><td>By enabling this checkbox, you can show collection description from the admin.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the featured collection section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Show section countdown</td><td>By enabling this checkbox, you can show section countdown.</td></tr><tr><td>Show border around section countdown</td><td>By enabling this checkbox, you can show border around countdown section.</td></tr><tr><td>End date</td><td>Add date here. The end date must be set to a future date and include the following format: YYYY/MM/DD Example: 2022/10/05.</td></tr><tr><td>Section timer ending text</td><td>The entered text will be displayed as a timer expiration message. It will appear once the date has expired.</td></tr><tr><td>Collection</td><td>Select a collection to display products in the section.</td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “5” products.</td></tr><tr><td>products full width</td><td>By enabling this checkbox, you can make products full width.</td></tr><tr><td>Enable "View all" button</td><td>By enabling this checkbox, you can see "View all" button if list includes more collections than shown.</td></tr><tr><td>"View all" label</td><td>Use "View all button label" to add a label to the VIew all button in the section.</td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the featured collection section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>"View all" position</td><td><p>Customization of the "View all button position" in the featured collection section is as follows:</p><ul><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.</td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" style in the featured collection section is as follows:</p><ul><li>Top</li><li>Inline </li><li>Bottom</li></ul></td></tr><tr><td>Banner</td><td><p><strong>Image</strong><br>Use "Image" to add the image to the section.<br><br><strong>Banner position</strong></p><p>Customization of "Banner position" is as follows:</p><ul><li>Left</li><li>Right</li></ul><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br></p><p><strong>Heading 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><br><strong>Subheading</strong><br>Enter the text you would like to display as a subtitle above the title.<br><br><strong>Button label</strong></p><p>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br> Use "Button link" to add a link to the Button in the section.</p><p></p><p>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the featured collection section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button<br></li></ul><p><strong>Content position on desktop</strong><br>Customization of "contetn position on desktop" is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom<br></li></ul><p><strong>Content alignment</strong></p><p>Customization of "content alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right<br></li></ul><p><strong>Show container</strong></p><p>When 'Show container' is enabled, the banner's content container box will be visible.</p><p></p><p><strong>Container overlay opacity</strong><br>You can set a minimum of “0%” and a maximum of “100%” overlay opacity on container.  <br><br><strong>Content color scheme</strong></p><p>In this section, you can change the background and foreground color of a 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></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of product columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li><li>2 Columns</li></ul><p><strong>Enable swipe on mobile</strong><br>When the checkbox is enabled, the products slides on mobile devices.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F7KHHbtWdcQuW2FUD3SlV%2Ffeatured-collection.png?alt=media&amp;token=fdd03e79-1ea2-4fcd-9e18-72787cbc0c9b" alt=""><figcaption></figcaption></figure>


# Video

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

Heading/subheading alignmentWhen users need to show video-related information they can use this section for displaying videos with text.

{% hint style="info" %}
**Recommendation Size**\
Video Cover image size: 1920x700&#x20;
{% endhint %}

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the video section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the video section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br></p><p>Customization of the "Heading/subheading alignment" in the video section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Play video on loop</td><td>Enabling "Play video on loop" will result in the video continuously looping. When the video finishes playing, it will automatically restart.</td></tr><tr><td>Auto play video</td><td>By enabling "Auto play video" the video will automatically start playing.</td></tr><tr><td>Enable controls</td><td>You can enable the video controls to start and stop the video.</td></tr><tr><td>Mute video</td><td>By enabling this checkbox, you can mute the video.</td></tr><tr><td>Text</td><td>Input the text to be displayed as a heading in this section</td></tr><tr><td>Text color</td><td>To change the color of the heading text, add the corresponding color code.</td></tr><tr><td>Show play button</td><td>By enabling this checkbox, you can show the play button on the video.</td></tr><tr><td>Play button image</td><td>You will add a play button image, which will appear on the video.</td></tr><tr><td>Shopify hosted video</td><td><strong>Video</strong><br>Use only the MP4 video here.<br><br><strong>Or embed video from URL</strong><br>Add Youtube, Vimeo  URL and display the video.<br><br><strong>Cover image</strong><br>You will add a cover image, which will appear on the video.<br><br><strong>Video alt text</strong><br>Add alt text to describe the video for customers using screen readers.</td></tr><tr><td>Block content position</td><td><p>Customization of the "Block content position" in the video section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Block content alignment</td><td><p>Customization of the "Block content alignment" in the video section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show container</td><td>By enabling this checkbox, you can show container in video section.</td></tr><tr><td>Style</td><td><p><strong>Make section full width</strong><br>By enabling this checkbox, you can Make section full width. </p><p></p><p><strong>Video ratio</strong></p><p>Customization of the "Video ratio" in the video section is as follows:</p><ul><li>12/4</li><li>15/6</li><li>16/9</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Show block content on mobile</strong> </p><p>Use the <strong>Show block content on mobile</strong> option to control whether the video content (such as the <strong>Heading</strong>, <strong>Text</strong>, and <strong>Button</strong>) is displayed on mobile devices.</p><ul><li><strong>Enabled:</strong> Displays the content blocks over or below the video on mobile.</li><li><strong>Disabled:</strong> Hides all content blocks on mobile, showing only the video for a cleaner, distraction-free layout.</li></ul><blockquote><p><strong>Note:</strong> This setting affects only mobile devices. The desktop layout remains unchanged.</p></blockquote></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Ff4mFys4wAF9xSsFcqjYr%2Fvideo.png?alt=media&amp;token=967942b1-360d-4cf6-a5ba-7b5e177c4b51" alt=""><figcaption></figcaption></figure>

## Add block

To add blocks to the video section, click on the 'Add block'. There are many options available.

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Text</td><td><p><strong>Description</strong> </p><p>Enter text to display as a description in the section. </p><p></p><p><strong>Description style</strong> </p><p>Customization of the "Description style" in the Video section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Buttons</td><td><p><strong>Button label</strong><br>Click on the "Add block" and select the Button. Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br>Click on the "Add block" and select the Button. Use "Button link" to add a link to the Button in the section.<br><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Video section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr></tbody></table>


# Logo list

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

Use this section to display multiple brand logos in the slider.

{% hint style="info" %}
**Recommendation Size**\
Logo image size: 150x60
{% endhint %}

<table><thead><tr><th width="286">Section</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the Logolist section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the Logolist section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Logolist section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Auto-rotate slides</td><td>Enable this checkbox to automatically rotate through the images in the logo list.</td></tr><tr><td>Change message every</td><td>Use the bar to set the auto-rotate time of the logo list. You can set a minimum of “3” seconds and a maximum of “9” seconds.</td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “7” logo.</td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel in the desktop screen.</td></tr><tr><td>Hide text</td><td>By enabling this checkbox, you can hide text in this section.</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>The logo list slides when the checkbox is activated and the logo list does not slide when the checkbox is not active.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXLKpFFfRzZT7vu2DaK02%2Flogo-list.png?alt=media&amp;token=fdf97c60-712c-45d8-b248-204a765949ac" alt=""><figcaption></figcaption></figure>

## **Add logo**

Click on "**Add logo**" and its customization is as follows.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Used image to add to the image in the section.</td></tr><tr><td>Link</td><td>Use "Link" to add a link to the section image.</td></tr><tr><td>Heading</td><td>Enter text to display as a title below the logo image.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2KIciNqwaQdXtUTn2zdu%2Flogo-list-block.png?alt=media&amp;token=c31a7f2c-5ecf-4a78-bebb-545c420619c0" alt=""><figcaption></figcaption></figure>


# Multicolumn

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

The "Multicolumn" section is provide by the Sitar theme. This section is used to add a Image wise-banner with a title,content and button. you can show the multicolumn image banner as a slideshow.

{% hint style="info" %}
**Recommendation Size**\
Image size: 600x580
{% endhint %}

<table><thead><tr><th width="306">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the multicolumn section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the multicolumn section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br></p><p>Customization of the "Heading/subheading alignment" in the multicolumn section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Image width</td><td><p>Customization of the "Image width" in the multicolumn section is as follows:</p><ul><li>One-third width of column</li><li>Half width of column</li><li>Full width of column</li></ul></td></tr><tr><td>Image ratio</td><td><p>In the section, Image size customization is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li><li>Circle</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” columns.</td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.</td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the multicolumn is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></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>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of collection columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li><li>2 Columns</li></ul><p><strong>Enable swipe on mobile</strong></p><p>The multicolumn slides when the checkbox is activated.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Foyj7kBCGYcff0xhskVk8%2Fmulticolumn.png?alt=media&amp;token=2750bc9d-3c80-46cb-8c03-b3049c375322" alt=""><figcaption></figcaption></figure>

## Add Column

To add column to the Multicolumn section, click on the 'Add column'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a heading on the image.</td></tr><tr><td>Description</td><td>Enter text to display as a description below the heading.</td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the multicolumn is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Background image</td><td>You can add an image behind the content by using a background image.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a multicolumn 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></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F5DYVIA7fWi970A8Rjaq4%2Fmulticolumn-block.png?alt=media&amp;token=cf4490ed-e58e-490e-808e-f00c5d05ec80" alt=""><figcaption></figcaption></figure>


# Featured product

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

Sitar 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.

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 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>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>You will find customizations for adjusting the desktop media width within this section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><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 layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>Stacked</li><li>2 columns</li><li>2 columns carousel</li><li>2 columns with thumbnails</li><li>Thumbnails</li><li>Thumbnail carousel</li></ul><p><strong>Thumbnail image ratio</strong><br>Thumbnail image ratio customization setting is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</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>Image zoom</strong></p><p>The Image zoom customization setting is as follows:</p><ul><li>Open lightbox</li><li>Click and hover</li><li>No zoom</li></ul><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><strong>Mobile layout</strong><br>Mobile layout customization setting is as follows:</p><ul><li>2 columns</li><li>Show thumbnails</li><li>Hide thumbnail</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FrY5AvMAnaEro6Cd43Coz%2Ffeatured-product.png?alt=media&amp;token=08d07df8-accb-4d0a-bd3c-357d14eb8262" alt=""><figcaption></figcaption></figure></div>

## 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>Custom badge</td><td><p><strong>Add custom badge</strong><br>Enter text to display as a Badge in the "Text" block.<br></p><p><strong>Background color</strong></p><p>Enter a color code for Badge background color.<br></p><p><strong>Text color</strong> </p><p>Enter a color code for Badge Text color.</p></td></tr><tr><td>Text</td><td><p><strong>Text</strong><br>Enter text to display as a Discription in the "Text" block.<br><br><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><p><strong>Text Alignment</strong></p><p>Customization of the "Text alignment" in the featured product section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Title</td><td><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>Stock bar</td><td><p>"Stock countdown" is for customizing the product stock.<br></p><p><strong>Maximum stock</strong><br>Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200".<br></p><p><strong>Limit stock cut off</strong><br>Adjust the limited stock cut-off for the stock countdown.<br></p><p><strong>Limit stock message</strong><br>Display limit stock message.<br></p><p><strong>In stock message</strong><br>Display the "In stock" message.<br></p><p><strong>Continue selling message</strong><br>Display the "Continue selling" message.<br><br><strong>Colors</strong><br>Customize the colors of  Limited stock, In stock and Continue selling text.</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>SKU</td><td><p>Show product "SKU" for your featured product section.</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>Quantity selector</td><td>Show "Quantity selector" for your featured product section.</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>Enable color swatches</strong><br>By enabling this checkbox you can show the "Variant color."<br><br><strong>Swatches source</strong><br>The Swatches source is given below. When a variant image is selected, the corresponding variant's image will be displayed. If a custom image is selected, the color from the swatches will be shown."</p><ul><li>Variant image</li><li>Custom image</li></ul><p><strong>Swatch type</strong><br>Following is the color swatches type customization of the section:</p><ul><li>Round</li><li>Square</li></ul></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>Description</td><td>After adding this block, you will be able to view the product description.</td></tr><tr><td>Tag</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Bottle</li><li>Box</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Share</td><td>Clickable text that allows customers to share the product on social media.<br><br><strong>Text</strong><br>Input the text to be displayed in this section</td></tr><tr><td>Share button</td><td><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>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>Color scheme</strong></p><p>In this section, you can change the background and foreground color of a Icon with text block 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><strong>Background image</strong><br>You can add an image behind the content by using a background image.</p><p><br><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><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul><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><tr><td>Collapsible Row</td><td><p>The <strong>Collapsible Row</strong> block allows you to display expandable content on the product page. It is ideal for showing additional product information such as Shipping &#x26; Returns, Care Instructions, Warranty, FAQs, Size Guide, or any other custom details without taking up extra space. </p><p></p><p><strong>Heading</strong></p><p>Enter the title that appears as the clickable heading of the collapsible row. </p><p></p><p><strong>Icon</strong></p><p>Choose an icon to display beside the heading for better visual representation. </p><p></p><p><strong>Open Collapsible Row</strong></p><p>Enable this option to keep the collapsible row expanded when the product page first loads.</p><ul><li><strong>Enabled:</strong> The content is visible by default.</li><li><strong>Disabled:</strong> Customers must click the heading to view the content.</li></ul><p></p><p><strong>Product Description</strong></p><p>Displays the product description dynamically inside the collapsible row.</p><p>You can enter dynamic sources such as:</p><pre><code>{{ product.description }}
</code></pre><p>This is useful when you want to reuse the product description within a collapsible section instead of entering the content manually.</p><blockquote><p><strong>Note:</strong> If Row Content is also added, it will be displayed according to your theme's implementation.</p></blockquote><p><strong>Row Content</strong></p><p>Add custom rich text content that will appear when the row is expanded. </p><p></p><p><strong>Row Content from Page</strong></p><p>Instead of writing content manually, you can select an existing Shopify Page.</p></td></tr><tr><td>Personalize label</td><td><p><strong>Label</strong></p><p>Enter text to display as a Label in the "Text" block.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FIeMdfbRwndktgou323ip%2Ffeatured-product-block.png?alt=media&amp;token=b7a05621-ab8a-461d-a7e0-1f6c3b13c446" alt=""><figcaption></figcaption></figure>


# Image banner

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

The "Image banner" section is provide by the Sitar theme. This section is used to add a Image wise-banner with a title,description and button.

{% hint style="info" %}
**Recommendation Size**\
Banner image size: 930x540
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image banner section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Image banner section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br></p><p>Customization of the "Heading/subheading alignment" in the Image banner section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Image banner section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>space between images</td><td>By enabling this checkbox, you can show space between images.</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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOt0uaB0u3BKwdnR48aWX%2Fimage-banner.png?alt=media&amp;token=c53b4b67-86fa-44ea-bd6e-7b8d9657c5b5" alt=""><figcaption></figcaption></figure>

## Add image banner

To add banner to the Image banner section, click on the 'Add image banner'. There are many options available , as you can see in the below points and screenshot.

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.</td></tr><tr><td>Icon</td><td><p></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Brightness</li><li>Rainbow</li></ul></td></tr><tr><td>Subheading</td><td>Enter the text you would like to display as a subheading above the banner's title.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><p>Customization of the "Heading size" in the Image banner</p><p>section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the Image banner section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>First button</td><td><p><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the section.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Image banner is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Second button</td><td><p><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the section.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Image banner is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Show container</td><td>When 'Show container' is enabled, the banner's content container box will be visible.</td></tr><tr><td>Container overlay opacity</td><td>By enabling this checkbox, you have the ability to change the container overlay opacity. Modify the "Container overlay opacity" setting to increase or decrease the opacity level of the overlay on the banner content.</td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the Image banner section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Mobile content position</td><td><p>To change the position of the content on the banner, utilize the "Mobile content position" setting. Customization of the "Mobile content position" in the Image banner section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Mobile content alignment</td><td><p>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a banner's content container using the provided 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>Animations</td><td><p>Customization of the "Image behavior" in the Image banner section is as follows:</p><ul><li>None</li><li>Ambient movement</li><li>Fixed background position</li></ul><p>By employing the Ambient movement feature, the banner image will exhibit motion.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXsKwf4Ih50gbqZQWP6sG%2Fimage-banner-block.png?alt=media&amp;token=9b2fb0a1-62a9-4b6f-9aca-a5d697a36a74" alt=""><figcaption></figcaption></figure>


# Collection tabs

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

Sitar theme provides a section, namely "Collection tabs". In this section, you can add a collection containing multiple products.

{% hint style="info" %}
**Recommendation Size**\
Collection tabs background image size: 1920x800&#x20;
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background image</td><td><p>B<strong>ackground image</strong></p><p>Use "Image" to add the background image to the section. </p><p></p><p><strong>Background gradient</strong> </p><p>Modifying the gradient color of the background will result in a corresponding color change for the background.</p></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the collection tabs section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the  collection tabs section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br></p><p>Customization of the "Heading/subheading alignment" in the collection tabs section is as follows:</p><ul><li>Left</li><li>Center</li><li>Next to product</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the collection tabs section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Make products full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel in the desktop screen.</td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" style in the Collection tabs section is as follows:</p><ul><li>Inline </li><li>Bottom</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “5” products.</td></tr><tr><td>Product card</td><td><p><strong>Style</strong></p><p>Customization of the "product card" style in the collection tabs section is as follows:</p><ul><li>Standard</li><li>Card</li></ul><p><strong>Text alignment</strong></p><p>Customization of the "Text alignment" in the  collection tabs section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p><strong>Card color scheme</strong></p><p></p><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><p><strong>Image ratio</strong></p><p>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p><strong>Show second image on hover</strong><br>By enabling this checkbox you can “Show the second image on hover”.</p><p></p><p><strong>Show quantity</strong><br>By enabling this checkbox you can display the “Quntity”.</p><p><br><strong>Show vendor</strong><br>By enabling this checkbox you can display the “Product vendor”.<br><br><strong>Show product rating</strong><br>By enabling this checkbox you can display the “Product rating”.<br><br><strong>Enable quick look button</strong><br>By enabling this checkbox you can display the “Quick look button.<br><br><strong>Show countdown</strong><br>By enabling this checkbox you can display the “Countdown timer”.</p></td></tr><tr><td>Variants</td><td><p><strong>Show border above the variants</strong></p><p>By enabling this checkbox you can show border above the variants.</p><p></p><p><strong>Show variants</strong><br>By enabling this checkbox you can display the “Product variants”.<br><br><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>Enable color swatches</strong><br>By enabling this checkbox you can show the "Variant color."</p></td></tr><tr><td>Stock bar</td><td><p><strong>Show stock bar</strong><br>Check this box to display the "Stock bar" in this section.<br><br><strong>Maximum stock</strong><br>Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200".<br><br><strong>Limit stock cut off</strong><br>Adjust the limited stock cut-off for the stock countdown.<br></p><p><strong>Limit stock message</strong><br>Display limit stock message.<br></p><p><strong>In stock message</strong><br>Display the "In stock" message.<br></p><p><strong>Continue selling message</strong><br>Display the "Continue selling" message.<br><br><strong>Colors</strong><br>Customize the colors of  Limited stock, In stock and Continue selling text.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of product columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li><li>2 Columns</li></ul><p><strong>Enable swipe on mobile</strong><br>The product slides in the mobile when the checkbox is activated.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FvrDn27zjG9XiWY2ZZNiy%2Fcollection-tabs.png?alt=media&amp;token=37fbd964-e22d-451e-9446-0d5a19ee2cf2" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Collection tabs section, click on the 'Add Collection'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Tab name</td><td>Enter text to display as a tab name in the section.</td></tr><tr><td>Collection</td><td>Select a collection to display products in the section.</td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4tJgFRAQJ7Qc6wTt2Kj1%2Fcollection-tabs-block.png?alt=media&amp;token=05096ddb-7f38-44b7-a7f5-cfb2c95e113d" alt=""><figcaption></figcaption></figure>


# Scrolling bar

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

Here, in the Sitar theme, with the use of the scrolling bar, you can scroll the important announcements and promotional texts. The scrolling bar section in the Sitar theme comes with various customizations.

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show top/bottom border</td><td>By enabling this checkbox you can show top or bottom border in scrolling bar section.</td></tr><tr><td>top/bottom border color</td><td>Modifying the color of the top or bottom border color.</td></tr><tr><td>Space between items</td><td>"Space between items" is to give left and right side spacing to the text of the section. You can adjust the spacing and set it to the minimum spacing of “0px” and a maximum spacing of “100px.”</td></tr><tr><td>Speed</td><td>Speed is used to customize the scrolling speed of the text in the section.</td></tr><tr><td>Direction</td><td>Use of "Direction" allows the rotation of the "Text" from left to right and right to left</td></tr><tr><td>Seprater between text</td><td>With the help of a Seprater between text, you can add a pipe sign or a dot between the text.</td></tr><tr><td>Font size</td><td>You can adjust the font size and set it to the minimum size of “16px” and a maximum size of “40px.”</td></tr><tr><td>Image size on desktop</td><td>You can adjust the Image size in desktop using this setting.  You can set image size in range between “20px.” to “70px.”</td></tr><tr><td>Section inner padding</td><td><p><strong>Top padding</strong><br>You can adjust the Top padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p><p><br><strong>Bottom padding</strong><br>You can adjust the Bottom padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FbRMnDHvkQG5p9yMiI78b%2Fscrolling-bar.png?alt=media&amp;token=ff8bae12-6079-4ff7-91d0-7404dc3e0261" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the scrolling bar section, click on the 'Add block'. There are many options available similar to the scrolling bar, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text </td><td><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Icon</strong></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li><li>Brightness</li></ul><p><strong>Uppercase heading</strong></p><p>By using the "Uppercase text" option, you can convert the text to uppercase .</p><p></p><p><strong>Enable Bold Text</strong> </p><p>Makes the announcement text bold to increase visibility.</p><ul><li><strong>Enabled:</strong> Displays bold promotional text.</li><li><strong>Disabled:</strong> Displays text with the default font weight.</li></ul><p></p><p><strong>Icon width</strong><br>"Icon width" is to customize the icon. You can show a minimum of “14px” and a maximum of “36px” icon width.<br></p><p><strong>Button label</strong></p><p>Use "Button label" to add a label to the Button in the section.</p><p><br><strong>Button link</strong><br> Use "Button link" to add a link to the Button in the section.</p><p><br><strong>Button style</strong></p><p>Customization of the "Button style" in the scrolling bar section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button<br></li></ul><p><strong>Heading color</strong><br>Modifying the color of the text will result in a corresponding color change for the scrollable text content.</p></td></tr><tr><td>Collection</td><td><strong>Collection</strong><br>Select a collection to display products in the section.<br><br><strong>Maximum products to show</strong><br>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “1” and a maximum of “4” products.</td></tr><tr><td>Image with text</td><td><p><strong>Image</strong><br>Used image to add to the author image in the section.<br></p><p><strong>Image radius</strong><br>"Image radius" is to customize the radius of image. You can show a minimum of “0” and a maximum of “40” image radius.<br></p><p><strong>Text</strong><br>Enter text to display as a title in the section.<br><br><strong>Uppercase text</strong><br>By using the "Uppercase text" option, you can convert the text to uppercase .<br><br><strong>Text color</strong><br>Modifying the color of the text will result in a corresponding color change for the scrollable text content.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgsbB0jsdShbNoyhmTKMj%2Fscrolling-bar-block.png?alt=media&amp;token=776fd72e-ba9d-4a8e-9bb0-2fabb25a4855" alt=""><figcaption></figcaption></figure>


# Product banner

The "Product banner" section is provide by the Sitar theme. This section is used to add a Product wise-banner with a title,description and button.

{% hint style="info" %}
**Recommendation Size**\
Product banner image size: 780x638
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image banner section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Image banner section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br></p><p>Customization of the "Heading/subheading alignment" in the Image banner section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Image banner section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>space between images</td><td>By enabling this checkbox, you can show space between images.</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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2nNZuVfBpHDarV8aIZhk%2Fproduct-banner.png?alt=media&amp;token=280e7c90-f1a1-45f2-9eb6-3e85a0138876" alt=""><figcaption></figcaption></figure>

## Add image banner

To add banner to the Image banner section, click on the 'Add image banner'. There are many options available , as you can see in the below points and screenshot.

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.</td></tr><tr><td>Product</td><td>Use this setting to select product in the section.</td></tr><tr><td>Desktop content position</td><td><p>Customization of the "Desktop content position" in the Product banner section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Show container</td><td>When 'Show container' is enabled, the banner's content container box will be visible.</td></tr><tr><td>Container overlay opacity</td><td>By enabling this checkbox, you have the ability to change the container overlay opacity. Modify the "Container overlay opacity" setting to increase or decrease the opacity level of the overlay on the banner content.</td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the Image banner section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a banner's content container using the provided 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>Animations</td><td><p>Customization of the "Image behavior" in the Product banner section is as follows:</p><ul><li>None</li><li>Ambient movement</li><li>Fixed background position</li></ul><p>By employing the Ambient movement feature, the product banner image will exhibit motion.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FjFpgNYggd9INq054Xeou%2Fproduct-banner-block.png?alt=media&amp;token=4a433eef-a4c8-4076-8a15-1279624798a5" alt=""><figcaption></figcaption></figure>


# Testimonials

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

This section is used to collect feedback and reviews from happy customers. This section can be seen as a slider. You can add a maximum of nine slides that will display as a slideshow in this section.

{% hint style="info" %}
**Recommendation Size**\
Testimonial banner image size: 185x306
{% endhint %}

<table><thead><tr><th width="286">Section</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 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>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the testimonials section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the  testimonials section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the testimonials section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” products.</td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.</td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" style in the Collection list section is as follows:</p><ul><li>Top</li><li>Inline </li><li>Bottom</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Text size</td><td><p>Customization of "Text size" is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Author image shape</td><td><p>Customization of "Text size" is as follows:</p><ul><li>Original</li><li>Circle</li><li>Curve</li></ul></td></tr><tr><td>Show quote</td><td>Enable this checkbox to show quote in testimonial section.</td></tr><tr><td>Quote color</td><td>You can customize the color of the quote in testimonial section.</td></tr><tr><td>Colors</td><td>You can customize the color of the rating stars by using the rating color option.</td></tr><tr><td>Show review star</td><td>Enable this checkbox to show review star in testimonial section.</td></tr><tr><td>Show review text</td><td>Enable this checkbox to show review text in testimonial section.</td></tr><tr><td>Enable border around product block</td><td>Enable this checkbox to show border around product block in testimonial section.</td></tr><tr><td>Enable border around product image</td><td>Enable this checkbox to show border around product image in testimonial section.</td></tr><tr><td>Product image border color</td><td>You can customize the color of product image border by using the product image border color.</td></tr><tr><td>Product image shape</td><td><p>Customization of "Product bottom position" is as follows:</p><ul><li>Original</li><li>Circle</li><li>Curve</li></ul></td></tr><tr><td>Product bottom position</td><td><p></p><p>Customization of "Product image shape" is as follows:</p><ul><li>Inside bottom</li><li>Bottom</li></ul></td></tr><tr><td>Mobile layout</td><td><p>Number of columns</p><p>"Number of columns" is used for the customization of columns in Mobile devices.</p><ul><li>1 Column</li><li>1.5 Column</li></ul><p></p><p><strong>Enable swipe on mobile</strong></p><p>When the checkbox is enabled, the testimonial slides on mobile devices.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJzrEdmBMVs9OOJhxZs0e%2Ftestimonial.png?alt=media&amp;token=e266bae9-84bd-4c83-add0-4dfa3ae1475e" alt=""><figcaption></figcaption></figure>

## **Add testimonial**

Click on "**Add Testimonial**" and its customization is as follows.

<table><thead><tr><th width="183">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Star rating</td><td>Specify how many reviews are included in the customer rating range.</td></tr><tr><td>Image</td><td>Used "image" to add to the author image in the section.</td></tr><tr><td>Text</td><td>Enter text to display as a "Description" in the section.</td></tr><tr><td>Author name</td><td>Enter text to display as a "Author name" in the section.</td></tr><tr><td>Author position</td><td>Enter text to display as a "Author position" in the section.</td></tr><tr><td>Banner image</td><td>Use "Image" to add the image to the testimonial card.</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>Product</td><td>Select a product to display selected product in the section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FY1JgoGNbqYovVwJhOLBs%2Ftestimonial-block.png?alt=media&amp;token=ace9cbb3-48a2-4231-b3e9-594cb6e6baf2" alt=""><figcaption></figcaption></figure>


# Text with icons

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

You can add text with icons to clearly define content or policies in your store.

{% hint style="info" %}
**Recommendation Size**\
Background image size: 1920x135
{% endhint %}

<table><thead><tr><th width="279">Section</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Text with icons section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Text with icons section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Text with icons section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Show heading/subheading beside the content on desktop</td><td>Enable this checkbox to show heading or subheading beside the content on desktop in text with icons section.</td></tr><tr><td>Top padding of heading/subheading</td><td>"Top padding of heading/subheading" is used to apply top-padding of heading/subheading. You can give the minimum padding "0px" and maximum padding"60px".</td></tr><tr><td>Icon width</td><td>"Icon width" is used to change the size of the section icon. You can give the minimum width "0px" and maximum width "65px" of the icon.</td></tr><tr><td>Column alignment</td><td><p>Section "Column alignment" is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Direction</td><td><p>Image with icons "Direction" is as follows:</p><ul><li>Row</li><li>Column</li></ul></td></tr><tr><td>Background image</td><td>You can add an image behind the content by using a background image.</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>Show seprator</td><td>Check this box to display the seprater between text with icon.</td></tr><tr><td>Enable Icon Background</td><td>Enable this setting to show background of the icons.</td></tr><tr><td>Mobile layout</td><td><p><strong>Enable swipe on mobile</strong> </p><p>The block slides when the checkbox is activated and the block does not slide when the checkbox is inactive.</p></td></tr><tr><td>Section margin</td><td><strong>Top margin</strong><br>You can adjust the Top margin and set it to the minimum margin of “0px” and a maximum margin of “100px.”<br><br><strong>Bottom margin</strong><br>You can adjust the Bottom margin and set it to the minimum margin of “0px” and a maximum margin of “100px.”</td></tr><tr><td>Section inner padding</td><td><p><strong>Top padding</strong><br>You can adjust the Top padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p><p><br><strong>Bottom padding</strong><br>You can adjust the Bottom padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FmpMkQtugfgkMO8jCLro9%2Ftext-with-icon.png?alt=media&amp;token=97687196-c5e8-4573-a519-cf8cff0aeaf0" alt=""><figcaption></figcaption></figure>

## **Add text with icon**

Click on "**Add text with icon**" and its customization is as follows.

<table><thead><tr><th width="193">Block</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Best Price</li><li>Return</li><li>Quality</li><li>Box</li><li>Shipping</li><li>24/7 Service</li><li>Offer</li><li>Support</li><li>Truck</li><li>Dollar sign</li><li>Gift</li><li>Color User</li><li>Color Payment</li><li>Color gift</li><li>Color shipping</li><li>Deal</li><li>Return policy</li><li>Payment</li><li>24/7</li><li>Online sale</li><li>Discount</li></ul></td></tr><tr><td>Custom svg code</td><td>Using this you can add custom svg icon code.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Description</td><td>Enter text to display in the “Description” section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FpQiVIH61vis67B7CocMK%2Ftext-with-icon-block.png?alt=media&amp;token=9ee4675a-3a22-40cf-a040-6674e58fd9e5" alt=""><figcaption></figcaption></figure>


# Blog posts

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

The blog section is for showing blogs and users can also use this to upload information about the theme’s latest collection and news.

{% hint style="info" %}
**Recommendation Size**\
Blog article image size: 1000x700
{% endhint %}

To add a Blog, go to **Blog posts > Add blog post** Add multiple blogs.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkCwSWDw0bpzMCkEoycr9%2Fadmin-blogs.png?alt=media&amp;token=58b2c9df-32a2-4825-8dfe-1ed85988ea93" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Section</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Blog posts section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Blog posts section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Blog posts section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Enable "View all" button</td><td>By enabling this checkbox, you can see "View all blogs" button, if blog includes more blog posts than shown.</td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the blog posts section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>"View all" Position</td><td><p>Customization of the "View all button position" in the blog posts section is as follows:</p><ul><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" style in the blog posts section is as follows:</p><ul><li>Top</li><li>Inline </li><li>Bottom</li></ul></td></tr><tr><td>Blog</td><td>Click on "Select blog" to show the blogs in the section and select the blog collection.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" in the blog posts section is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in the blog posts section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Featured image height</td><td><p>In the section, Image size customization is as follows.</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Design type</td><td><p>In the section, Design type customization is as follows.</p><ul><li>Content below the image</li><li>Image below the content</li><li>Content over the image</li></ul></td></tr><tr><td>Number of blog posts to show</td><td>"Number of blog posts to show" is to specify how many blog posts to show in a section. You can show a minimum of “2” and a maximum of “12” blog posts.</td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” blog posts.</td></tr><tr><td>Enable border around card</td><td>By enabling this checkbox you can show border around card in the section.</td></tr><tr><td>Show date over the image</td><td>By enabling this checkbox you can show date over the image in the section.</td></tr><tr><td>Show featured image</td><td>By enabling this checkbox you can show the “Blog image” in the section.</td></tr><tr><td>Show date</td><td>By enabling this checkbox you can show “Blog date” in the section.</td></tr><tr><td>Show author</td><td>By enabling this checkbox you can show “Blog author” in the section.</td></tr><tr><td>Show comments</td><td>By enabling this checkbox you can show “Blog comments” in the section.</td></tr><tr><td>Show tags</td><td>By enabling this checkbox you can show tags in the section.</td></tr><tr><td>Tag style</td><td><p>Customization of the "Tag style" in the blog posts is as follows:</p><ul><li>Text</li><li>Outline </li><li>Solid </li></ul></td></tr><tr><td>Blog name size</td><td><p>Customization of the "Blog name size" in the blog posts is as follows:</p><ul><li>Smal</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Show excerpt</td><td>By enabling this checkbox you can show excerpt in the blog posts cards.</td></tr><tr><td>Show read more button</td><td>By enabling this checkbox you can show “read more button” in the blog posts cards.</td></tr><tr><td>"Read more" style</td><td><p>Customization of the "Read more" style in the blog posts is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.</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>When the checkbox is enabled, the blog posts slides on mobile devices.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FQ9EcjMfh4unI9VviPjK2%2Ffeatured-blog.png?alt=media&amp;token=246aaa0c-5c9d-44a7-8bfe-e3511df7a2f4" alt=""><figcaption></figcaption></figure>


# Collapsible content

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

Collapsible content is commonly used for frequently asked questions(FAQs) page.

{% hint style="info" %}
**Recommendation Size**\
Slideshow image desktop size: 750x541
{% endhint %}

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Caption</td><td>Enter caption to display as a small text in the section.</td></tr><tr><td>Layout</td><td><p>Customization of "Layout" in desktop and mobile devices is as follows:</p><ul><li>Full width</li><li>Row container</li><li>Section container</li><li>Container with transparent background</li></ul></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>Image layout</td><td><p><strong>Image</strong><br>Use "Image" to add the image to the section.<br><br><strong>Image ratio</strong></p><p>Customization of the "Image ratio" in the collapsible content section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Desktop layout</strong></p><p>The desktop Image customization section is as follows:</p><ul><li>Image first</li><li>Image second</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FUWdqG8ftEbZlD1ESBeXc%2Fcollapsible.png?alt=media&amp;token=081c5b75-be59-4d4f-888b-0b8dd983f44c" alt=""><figcaption></figcaption></figure>

## Add collapsible row

To add row to the Collapsible content section, click on the 'Add collapsible row'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Open collapsible row</td><td>By enabling this checkbox, you can show open collapsible row.</td></tr><tr><td>Heading</td><td>Enter text to display as a heading in the section.</td></tr><tr><td>icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Chat</li></ul></td></tr><tr><td>Custom image</td><td>You can customize the icon in the collapsible row by adding a custom image in its place.</td></tr><tr><td>Row content</td><td>Enter text to display as a row content in the section.</td></tr><tr><td>Image</td><td>To add an image below the row content, select the image here.</td></tr><tr><td>Row content from page</td><td>By using these settings, the selected page will display its content like row content.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgSgbYIDZSrk5lOP8k0TG%2Fcollapsible-block.png?alt=media&amp;token=2b10d2ec-1466-4c4a-b3f5-12866d4328da" alt=""><figcaption></figcaption></figure>


# Counter

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

This section is taken into use to showcase special products or collections with a Counter timer.

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading alignment</td><td><p>Customization of "Heading alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Heading size</td><td><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>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “6” columns.</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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdaifVGvEFrxwSrRSchFn%2Fcounter.png?alt=media&amp;token=42a504f8-4512-4c5f-9d80-f919fee4c9c9" alt=""><figcaption></figcaption></figure>

## Add counter item

Click on "**Add counter item**" and its customization is as follows.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as on the "heading" section.</td></tr><tr><td>Description</td><td>Enter text to display as a "description" in the section.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0d2TLpbc3gCPRCIzOle2%2Fcounter-block.png?alt=media&amp;token=4fabdf96-3586-4f66-a8a7-a40126401914" alt=""><figcaption></figcaption></figure>


# Contact form

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

{% hint style="info" %}
**Recommendation Size**\
Contact form image size: 650x470
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the contact form section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Side content type</td><td><p>Customization of the "Side content type" in the contact form section is as follows:</p><ul><li>Show google map</li><li>Image</li><li>Text</li><li>None</li></ul></td></tr><tr><td>Google maps embed code</td><td>Add google map embed code here.</td></tr><tr><td>Image</td><td>Use "Image" to add the image to the section. If google map is enable then image not display.</td></tr><tr><td>Contact text</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Description</strong><br>Enter text to display as a description in the section.</p><p></p><p><strong>Contact info</strong><br>Enter text to display as a company information in the section.<br><br><strong>Heading company info</strong><br>Enter text to display as a company information heading in the section.<br><br><strong>Contact</strong><br>Enter Number to display as a contact number in the section.</p><p></p><p><strong>Show social media icons</strong><br>By enabling this checkbox, you can show social media icons.<br><br><strong>Follow heading</strong><br>Enter text to display as a social icons heading in the section.</p></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJplsbUt26jUag9yOCCfs%2Fcontact-from.png?alt=media&amp;token=1109ac9b-7a01-4961-83af-11c089ca4f1b" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Contact form section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

* Add the text you want for the label of the text field.
* Add the text you want for the placeholder of the text field.
* Add options for "Radio buttons" and "Select box".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FQNwgqnA4DZmR5wvDSJph%2Fcontact-from-block.png?alt=media&amp;token=a1b3b9ef-3f65-4d19-ad80-0577abb90381" alt=""><figcaption></figcaption></figure>


# Rich text

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

The Sitar theme includes a section called 'Rich text.' This section is designed for sharing information about your brand with your customers. You can add a title, description, and buttons.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the rich text section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" in desktop and mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F8slxcKwZTZ3S2bQa0Hhn%2Frichtext.png?alt=media&amp;token=034b80d7-448a-4388-bae9-029dc7ea2da7" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Rich text section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td><p><strong>Text</strong><br>Enter text to display as a title in the section.<br></p><p><strong>Text style</strong></p><p>Customization of the "Text style" in the rich text section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><p><strong>Text size</strong></p><p>Following is the font size customization of the text in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Heading</strong><br>Enter text to display as a title on the section.<br><br><strong>Heading size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul></td></tr><tr><td>Text</td><td><p><strong>Enable hide largest content button</strong></p><p>By enabling this checkbox, you can show the button of hide largest content.</p><p></p><p><strong>Description</strong><br>Click on the "Add block" and select the text. And enter text to display as a description on the section.</p><p></p><p><strong>Custom text</strong><br>Enter text to display as a custom text on the section.<br></p><p><strong>Icon</strong></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul></td></tr><tr><td>Button</td><td><p>Click on the "Add block" and select the Button.<br><br><strong>First button label</strong><br>Use "First button label" to add a label to the Button in the section.<br><br><strong>First button link</strong><br>Use "First button link" to add a link to the Button in the section.<br><br><strong>First button style</strong></p><p>Customization of the "First button style" in the Image with text section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul><p><strong>Second button label</strong><br>Use "Second button label" to add a label to the Button in the section.<br><br><strong>Second button link</strong><br>Use "Second button link" to add a link to the Button in the section.<br><br><strong>Second button style</strong></p><p>Customization of the "Second button style" in the Image with text section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul><p><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMPTvdEpJWFlD7IKGwSMj%2Frichtext-block.png?alt=media&amp;token=278c04a8-67ba-4a51-b428-815d1a12e743" alt=""><figcaption></figcaption></figure>


# Custom text

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

The Sitar theme includes a section called 'Custom text.' You can add a title, description, and buttons in this section.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><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>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p><br><strong>Style</strong></p><p>Customization of the "Subheading style" in the Custom text section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>Position</strong><br>Customization of the "Subheading position" in the Custom text  section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong><br>Customization of the "Heading/subheading alignment" in the Custom text section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Heading/subheading alignment</td><td><p>Customization of the "Heading/subheading alignment" in the Custom text section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “5” products.</td></tr><tr><td>Direction</td><td><p>Customization of the "Direction" in the Custom text section is as follows:</p><ul><li>Row</li><li>Column</li></ul></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>Popup modal</td><td><p><strong>Enable popup modal</strong> </p><p>Enable this setting to open popup model. This features does not work when the direction is set to "Row".</p><p></p><p><strong>Heading font size</strong> </p><p>Customize popup model main heading font size using this setting. you can adjust the font size in range between "18px" to "28px". </p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJqwm1UKAjOnJ9FMPzMUo%2Fcustom-text.png?alt=media&amp;token=a6bd9a01-2eaa-4405-af66-8b1f65488c60" alt=""><figcaption></figcaption></figure>

## **Add text**

Click on "**Add text**" and its customization is as follows.

<table><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Content</td><td>Enter text to display as a content in the section.</td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the Custom text is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a text card using the provided 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>Popup modal</td><td><p><strong>Heading</strong> </p><p>Enter text to display as a main heading of popup model. </p><p></p><p><strong>Content</strong> </p><p>Enter text to display as a description of popup model. </p><p></p><p><strong>Button Label</strong> </p><p>Use "Button label" to add a label to the button of popup model. </p><p></p><p><strong>Button Link</strong> </p><p>Use "Button link" to add a link to the button of popup model.  </p><p></p><p><strong>Open this link in a new window</strong> </p><p>By using the "Open this link in a new window" option, the link will open in a new tab.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlFkM4XDe5HD4UtiHAQUF%2Fcustom-text-block.png?alt=media&amp;token=f4e2098d-37f4-4556-b00f-b7d215294dac" alt=""><figcaption></figcaption></figure>


# Newsletter

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

The newsletter section allows you to collect your audience's email addresses, keeping them informed about your latest news, promotions, and updates. It's a powerful tool for building customer relationships, driving conversions, and growing your business.

{% hint style="info" %}
**Recommendation Size**\
Newsletter background image size: 1920x230
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Background image</td><td>By adding a "Background image", you can set a background image for the content.</td></tr><tr><td>Mobile image</td><td>By adding a "Mobile image", you can set a mobile image for the content. mobile image is optional. The newsletter will use the main image on mobile by default.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the image.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the newsletter section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the newsletter section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Show container on desktop</td><td>When "Show container on desktop" is enabled, the content container box will be visible on desktop device.</td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></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>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGraymYM6qp8SQr307Xiw%2Fnewsletter.png?alt=media&amp;token=0d847cd1-ad6a-4697-82f6-c5f7fd85301c" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Newsletter section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Heading size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Paragraph</td><td><p><strong>Description</strong><br>Click on the "Add block" and select the paragraph. And enter text to display as a description on the section.<br><br><strong>Description style</strong><br>Customization of the "Description style" in the newsletter section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRwrPFyf8kJjFClNh146p%2Fnewsletter-block.png?alt=media&amp;token=897238ef-c66d-41ca-93a6-e5cf06e2e96c" alt=""><figcaption></figcaption></figure>


# Hero banner

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

The "Hero banner" section is provide by the Sitar theme. This section is used to add a Image banner with a title,description and button.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Background image</td><td><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>Mobile image</td><td>If you want to add a separate image for mobile devices, add a image here.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Hero banner section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the Hero banner section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Show container on desktop</td><td>When 'Show container' is enabled, the banner's content container box will be visible on desktop device.</td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FiMqUjdKD4srbDDpccdKK%2Fhero-banner.png?alt=media&amp;token=779dea7d-da65-49e3-86b9-0d0b49492099" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Hero banner section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Subheading</td><td><p><strong>Subheading</strong><br>Enter text to display as a subheading in the section.<br></p><p><strong>Subheading style</strong></p><p>Customization of the "Subheading style" in the hero banner section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><p><strong>Text size</strong></p><p>Following is the font size customization of the text in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Heading</strong><br>Enter text to display as a title on the section.<br><br><strong>Heading size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul></td></tr><tr><td>Paragraph</td><td><p><strong>Description</strong><br>Click on the "Add block" and select the paragraph. And enter text to display as a description on the section.</p><p></p><p><strong>Description style</strong></p><p>Customization of the "Description style" in the Hero banner section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Button</td><td><p>Click on the "Add block" and select the Button.</p><p></p><p><strong>Button label</strong><br>Use "Button label" to add a label to the button in the section.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the button in the section.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the Hero banner section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul><p><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgWFYrtPHumd8xxjt3UKG%2Fhero-banner-block.png?alt=media&amp;token=07815769-ce44-45f0-9046-ec2d6121e6f5" alt=""><figcaption></figcaption></figure>


# Footer

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

Sitar theme provides a section, namely "Footer" in this section. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Policy links</td><td>By enabling this checkbox, you can see policy links in the footer section.</td></tr><tr><td>Follow on Shop</td><td>Use shopify app. </td></tr><tr><td>Localization Heading</td><td>The text you add in the localization Heading will be displayed in the format of a heading above the country and language selector.</td></tr><tr><td>Country/region selector</td><td>By enabling this checkbox, you can see country/region selector in the footer section.<br><br><strong>Enable country flag</strong><br>By enabling this checkbox, you can see the country flag in the announcement bar section.</td></tr><tr><td>Language selector</td><td>By enabling this checkbox, you can see Language selector in the footer section.</td></tr><tr><td>Copyright</td><td>By enabling this checkbox, you can see copyright text in the footer section.</td></tr><tr><td>Payment methods</td><td>By enabling this checkbox, you can see payment icons in the footer section.</td></tr><tr><td>Scroll to top</td><td>By enabling this checkbox, you can see scroll to top button in the footer section.</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>Spacing</td><td><strong>Top margin</strong><br>You can adjust the range of the Top margin to increase or decrease the Top spacing as needed.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXWhcgLdkItt1UPaM6S7a%2Ffooter.png?alt=media&amp;token=97182628-9a98-4715-8afa-fc81d3f40b8c" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the Footer section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

## Menu

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title on the footer menus.</td></tr><tr><td>Menu</td><td>Click on "Select menu" to add a menu in the footer.</td></tr></tbody></table>

## Brand information

The "Brand information" block can be taken into use to highlight important information, such as store details, promotions, or contact information.

<table><thead><tr><th width="219">Block</th><th>Description</th></tr></thead><tbody><tr><td>Show icon</td><td>By enabling this checkbox, you can show icon before the text.</td></tr><tr><td>Info heading</td><td>Enter text to display as a title on the brand information content.</td></tr><tr><td>Address</td><td>Enter text to display as a "Address" on the "Brand information" block.</td></tr><tr><td>Call</td><td>Enter text to display as a "Contact number" on the "Brand information" block.</td></tr><tr><td>E-Mail</td><td>Enter text to display as a contact "E-Mail" on the "Brand information" block.</td></tr><tr><td>Subtext</td><td>Enter text to display as a description on the "Brand information" block.</td></tr><tr><td>Subtext style</td><td><p>Customization of the "Subtext style" in the footer section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr></tbody></table>

## Text

<table><thead><tr><th width="199">Block</th><th>Description</th></tr></thead><tbody><tr><td>Logo</td><td>Use "Logo" to add an image in the text block.</td></tr><tr><td>Logo Width</td><td>Use "Logo width" to customize the logo size in the footer section. You can set a Minimum width "100px" and a maximum width "200px" can be given.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the text block.</td></tr><tr><td>Subtext</td><td>Enter text to display as a description in the "Text" block.</td></tr><tr><td>Subtext style</td><td><p>Customization of the "Subtext style" in the footer section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Social media icons</td><td><strong>Social heading</strong><br>Enter text to display as a social icons heading in the section.<br><br><strong>Show social media icons</strong><br>By enabling this checkbox, you can show social media icons.<br><br><strong>Show social background</strong><br>By enabling this checkbox, you can show social background.</td></tr></tbody></table>

## Image

<table><thead><tr><th width="295">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Used image to add to the image in the section.</td></tr><tr><td>Image width</td><td>"Image width" is used to change the size of the section image. You can give the minimum width "50px" and maximum width "550px" of the image.</td></tr><tr><td>Image alignment on large screen</td><td><p>Customization of "Image alignment on large screen" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

## Newsletter

<table><thead><tr><th width="218">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title on the "Newsletter."</td></tr><tr><td>Heading style</td><td><p>Customization of the "Heading style" in the footer section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description on the "Newsletter" block.</td></tr><tr><td>Subheading</td><td>Enter text to display as a subheading on the "Newsletter" block.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FctYycJO0U1DQkjyxlpgg%2Ffooter-block.png?alt=media&amp;token=7c6ab432-a32f-4f72-9a14-9325aed7de9c" alt=""><figcaption></figcaption></figure>

## Click "Add section" and use some sections.

We are providing one special feature, You can add multiple additional sections in the footer.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkuazPzPwpsZuxYo0Spdm%2Ffooter-more-sections.png?alt=media&amp;token=4cc8f684-44c9-428c-a0cb-09002f910254" alt=""><figcaption></figcaption></figure>

<br>


# Age verification popup

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

Age verification popup: Ensure compliance and user safety by implementing an age verification popup. This feature allows you to confirm your visitors' age before granting access to age-restricted content. With our age verification popup, you can responsibly and seamlessly manage age-restricted content on your website.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable age verification</td><td>Enabling this checkbox will display an age verification popup.</td></tr><tr><td>Background image</td><td><strong>Image</strong><br>Use "Image" to add the image to the section.<br><br><strong>Blur the image</strong><br>By adjusting the range of the blur image, you can control the background image's level of blurriness.</td></tr><tr><td>Age verification question</td><td><p><strong>Heading</strong><br>Enter text to display as a heading on an age verification popup section.<br><br><strong>Age verification question</strong><br>Enter text to display as an age verification question in the age verification popup section.<br><br><strong>Decline button text</strong></p><p>Use "Decline button label" to add a label to the Button in the section.<br><br><strong>Approve button text</strong><br>Use "Approve button label" to add a label to the Button in the section.</p></td></tr><tr><td>Declined</td><td><strong>Heading</strong><br>Enter text to display as a heading on an age verification popup section.<br><br><strong>Text</strong><br>Enter text to display as a description on an age verification popup section.<br><br><strong>Return button text</strong><br>Use "Return button label" to add a label to the Button in the section.</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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMRiAash5Eb9z3hHGzNYq%2Fage-varification.png?alt=media&amp;token=60511958-7c23-4dc2-a4c7-75373ccd6414" alt=""><figcaption></figcaption></figure>


# Theme Settings


# Corner radius

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

Use this setting to customize the "Corner radius" in Image, Button&#x73;**,** Variant pills, inputs, Contents, Dropdowns and pop-ups and Drawers.<br>


# Logo

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

Use this setting to customize the  "**Logo image and Favicon image**".

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Logo</td><td>Use "Logo" to add an image in the Header.</td></tr><tr><td>Transparent header logo</td><td>Use "Logo" to add an image in the transparent header logo.</td></tr><tr><td>Desktop logo width</td><td>Use "Desktop logo width" to customize the logo size in the header section. You can set a Minimum width "0px" and a maximum width "300px" can be given.</td></tr><tr><td>Mobile logo</td><td>If you want to add a separate logo for mobile devices, add a logo here.</td></tr><tr><td>Sticky mobile logo</td><td><p>If you want to add a separate logo for mobile devices, add a logo here for sticky header.</p><p>Optional. The logo will use the main logo on mobile by default.</p></td></tr><tr><td>Mobile logo width</td><td>Use "Mobile logo width" to customize the logo size in the mobile devices in the header section. You can set a minimum width "50px" and a maximum width "170px" can be given.</td></tr><tr><td>Favicon image</td><td>Use "Favicon image" to add Theme "<strong>Favicon</strong>" here.</td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxqdDAPBkD79tr2TmxT3g%2Flogo.png?alt=media&amp;token=80a35010-3ae0-44d2-871a-a473c0994bcb" alt=""><figcaption></figcaption></figure>


# Colors

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

You can use the theme settings to make changes to your online store's typography, colors, social media links, and checkout settings. When you make changes to your theme settings, the changes apply to your entire online store.

You can set primary and secondary color schemes for your online store.

From the Colors theme settings panel, you can set the context uses of the colors across the theme.

## **Customize your color settings**

* From your Shopify admin, go to Online Store > Themes.
* Click on Customize button.
* Click Theme settings.
* Click Colors.
* To open the color picker, click the color swatch for the content type color you want to change. To set a specific hex color code, click on the text field to enter the color.
* Delete the hex code value from the text field to set the color to transparent.
* Click Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0OXrI9WnUceRBkviSj33%2Fcolors.png?alt=media&amp;token=05982635-e580-4d5c-9ab0-851eec85f562" alt=""><figcaption></figcaption></figure>


# Typography

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

You can set the font style and size of the text on your online store. You can choose between a system font or a custom font.

From the Typography panel, you can set the Body font family and Font size.

## **Customize your typography settings**

* From your Shopify admin, go to Online Store > Themes.
* Click on Customize button.
* Click Theme settings.
* Click Typography.
* For each type of text, click Change to use the font picker.
* Explore fonts by using the search field, or by clicking Load more. To see all of the available fonts, see [Shopify's font library](https://shopify.dev/tutorials/develop-theme-fonts#browse-available-fonts)
* Click the name of the font that you want to use.
* To change the font to a different style, click the name of the current font style, and then select a new font style from the dropdown menu.
* Click Select.
* Click Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F3bXEo3m26hI02DH0CHah%2Ftypography.png?alt=media&amp;token=549bb5b3-fef2-4b8e-891a-9a554ee31293" alt=""><figcaption></figcaption></figure>

### **ustomize your font sizes**

* You can set the default font sizes for your heading and body text within the Typography theme setting.
* From your Shopify admin, go to Online Store > Themes.
* Click on Customize button.
* Click Theme settings > Typography.
* To change the default font size for headings, use the Font size scale to select the default font size. The minimum font size is 100%, and the maximum font size is 150%. Each increment of the size increases the font size by 5%. The default setting is 100%.
* To change the default font size for the body, use the Font size scale to select the default font size. The minimum font size is 100%, and the maximum font size is 130%. Each increment of the size increases the font size by 5%. The default setting is 100%.
* Click Save.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/NBvUPvChR65xFMXNl2bC/typography-font.png" alt=""><figcaption></figcaption></figure>


# Layout

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

Use this setting to customize the Theme "Grid" and Horizontal and Vertical spacing in all sections.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkNU3VM0fZXY5Uf4uXHBc%2Flayout.png?alt=media&amp;token=b3120dd7-b6aa-4afa-98b4-cd0999265e56" alt=""><figcaption></figcaption></figure>


# Animations

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

Use this setting to apply animation effects to all "**Cards and Buttons"**.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/jdS9B7tGfF9FNPY11wrf/animation-setting.png" alt=""><figcaption></figcaption></figure>


# Corner radius

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FWeMReesCZpoIArVGO9mU%2Fcorner.png?alt=media&amp;token=010dad65-ee2d-4e16-a89e-36b2202fb5ce" alt=""><figcaption></figcaption></figure>


# Cards

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

Use this setting to customize the "**Product cards**" Styles, Image Padding, Text alignment, Color scheme, Border, and Shadow.

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Style</td><td><p>Choose the product card style:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of "Text alignment" within the product card is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Heading size</td><td>You can adjust the product card heading size using this setting.  You can set heading font size in range between “16px.” to “20px.”</td></tr><tr><td>Make heading text bold</td><td>Enable this setting to set product card heading text bold.</td></tr><tr><td>Price font size</td><td>You can adjust the product card price font size using this setting.  You can set price font size in range between “16px.” to “20px.”</td></tr><tr><td>Card color scheme</td><td><p>Choose the color scheme for the product card..</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>Image ratio</td><td><p>Choose how the product image ratio is displayed: </p><p></p><ul><li>Adapt to image</li><li>Square</li><li>Portrait</li></ul></td></tr><tr><td>Show second image on hover</td><td>Toggle to display the second product image when a user hovers over the product card.</td></tr><tr><td>Show quantity</td><td>By enabling this checkbox you can display the “Product quantity field”.</td></tr><tr><td>Show vendor</td><td>Toggle to show the product vendor (brand) in the product card.</td></tr><tr><td>Show product rating</td><td>Enable to display the product rating (requires a product rating app)</td></tr><tr><td>Enable quick look button</td><td>Enable this checkbox to display the "Quick look button".</td></tr><tr><td>Quick look position</td><td><p>Customization of the "Quick look position" in the all product card section is as follows:</p><ul><li>Top right</li><li>Bottom left</li><li>Bottom right</li></ul><p><strong>Enable action buttons center in mobile</strong> </p><p>By enabling this checkbox, you can show action buttons in center on mobile device.  </p><p><strong>Note</strong>: This settings only visible if 'Quick look position' is set to bottom left or bottom right.</p></td></tr><tr><td>Show countdown</td><td>By enabling this checkbox, you can show section countdown.</td></tr><tr><td>Timer ending text</td><td>The entered text will be displayed as a timer expiration message. It will appear once the date has expired.</td></tr><tr><td>Variants</td><td><p><strong>Show variant</strong><br>By enabling this checkbox you can display the “Product variants”. <br><br><strong>Show border above the variants</strong></p><p>By enabling this checkbox you can show border above the variants.<br><br><strong>Show variant label</strong><br>By enabling this checkbox you can show variant label.<br><br><strong>Variant position</strong><br>Customization of the "Variant position" in the section is as follows:<br>None<br>Bottom<br>On image<br><br><strong>Type</strong></p><p>If the type is "Dropdown," then the variant would be dropdown. And if the type is "Pills," then the variant would be Pills. The variant types are as follows:</p><p>Type:</p><ul><li>Dropdown</li><li>Pills</li></ul><p></p><p><strong>Enable color swatches</strong> <br>By enabling this checkbox will show the "Variant color."ly applicable when 'show variants' is disabled </p><p></p><p><strong>Swatch style</strong> </p><p>Customization of the "Swatch style" in the product card is as follows:</p><ul><li>Over</li><li>Rounded</li></ul></td></tr><tr><td>Stock bar</td><td><p><strong>Show stock bar</strong> <br>Check this box to display the "Stock bar" in this section.<br><br> <strong>Maximum stock</strong> <br>Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200". <br><br><strong>Limit stock cut off</strong> <br>Adjust the limited stock cut-off for the stock countdown.<br></p><p><strong>Limit stock message</strong> <br>Display limit stock message.<br></p><p><strong>In stock message</strong> <br>Display the "In stock" message.<br></p><p><strong>Continue selling message</strong> <br>Display the "Continue selling" message. <br><br><strong>Colors</strong> <br>Customize the colors of Limited stock, In stock and Continue selling text.</p></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FPKmhwvT0xRyR5tUMXyQF%2Fproduct-card.png?alt=media&amp;token=0f4062d5-7fa4-4372-a1bd-bbd5e93cfb57" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Ft9jSeh8nbwYGxy4kIb94%2Fcard-variants.png?alt=media&amp;token=9b3024d3-529e-401a-95c9-419fe82dd574" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FBVWNZWJX3mswTb2nSchV%2Fcard-stockbar.png?alt=media&amp;token=3f739dc9-ac71-43d8-b364-75fcb0479afb" alt=""><figcaption></figcaption></figure>


# Badges

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

Configure product badges displayed throughout your store to highlight discounts, price savings, product availability, and newly added products. Badge settings help customers quickly identify promotions, special offers, and product status, improving product visibility and encouraging purchase decisions.

Use this setting to customize the "**Badges**" Show percentage discount, Show price differance, Corner radius and Badges color scheme.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYpwkNpQJyvFuN4AInVcB%2Fbadge.png?alt=media&amp;token=685d460b-7106-48b1-aff2-832b2f6aa5d8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEjMz5oj5dnWMiQpyGYK8%2Fbadge-2.png?alt=media&amp;token=af71cdab-7cf7-48f1-9741-0e9f610ed824" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Show Percentage Discount</td><td>Enable or disable the percentage discount badge on sale products.</td></tr><tr><td>Percentage Discount Position</td><td><p>Select the display position for the percentage discount information. </p><ul><li>Over the image</li><li>Inline price — Displays the discount percentage alongside the product price.</li></ul></td></tr><tr><td>Show price difference</td><td>Enable or disable the display of price savings on sale products.</td></tr><tr><td>Corner radius</td><td>Set the border radius applied to all product badges.</td></tr><tr><td>Icon</td><td>Choose an icon displayed within the sale badge.</td></tr><tr><td>Price sale background color</td><td>Select the background color displayed behind the sale badge text.</td></tr><tr><td>Price sale text color</td><td>Select the text color used for sale badges.</td></tr><tr><td>Icon</td><td>Choose an icon for the percentage sale badge.</td></tr><tr><td>Percentage sale background color</td><td>Select the background color for percentage discount badges.</td></tr><tr><td>Percentage sale text color</td><td>Select the text color for percentage discount badges.</td></tr><tr><td>Icon</td><td>Choose an icon displayed within the Sold Out badge.</td></tr><tr><td>Sold out background color</td><td>Select the background color displayed behind Sold Out badge text.</td></tr><tr><td>Sold out text color</td><td>Select the text color used for Sold Out badges.</td></tr><tr><td>Icon</td><td>Choose an icon displayed within the New product badge.</td></tr><tr><td>New background color</td><td>Select the background color displayed behind the New badge text.</td></tr><tr><td>New text color</td><td>Select the text color used for the New product badge.</td></tr><tr><td>New Badge Type</td><td><p>Select the method used to display the New badge on products. </p><ul><li><strong>Static</strong> — Displays the New badge on products based on manual assignment or predefined conditions.</li><li><strong>Dynamic</strong> — Automatically displays the New badge on recently added products for a specified number of days.</li></ul></td></tr><tr><td>New Badge Show Days</td><td><p>Specify the number of days newly added products will display the New badge before it is automatically removed.</p><p></p><p><em><strong>Note:</strong> This setting is primarily used when <strong>New Badge Type</strong> is set to <strong>Dynamic</strong>.</em></p></td></tr></tbody></table>


# Breadcrumb

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

Use this setting to customize the "**Breadcrumb**" Show perticular path of the product and collection.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSDsFb1wpNKkjsAB8qqBp%2Fbreadcrumb.png?alt=media&amp;token=078574b2-a498-4ab9-9e6d-2795cfe4eba7" alt=""><figcaption></figcaption></figure>


# Social media

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

Use this setting to customize the "**Social media. Add link and display social media icon in theme**".

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/tDzOlQIncshR4oNq2Ho0/social-media-setting.png" alt=""><figcaption></figcaption></figure>


# Product card review

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

You can select card review app option and install that particular app.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FnqFWMw0D9BSljir34IJn%2Freview.png?alt=media&amp;token=f5fa6cb4-5888-4181-9bb5-479e56512848" alt=""><figcaption></figcaption></figure>


# Search behavior

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

The "**Search**" popup customization as is follow:

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable voice command search</td><td>Enable or disable voice-based search functionality within the store search bar. When enabled, customers can use their device's microphone to perform searches using spoken commands. </td></tr><tr><td>Enable Search Suggestions</td><td>Enable or disable real-time search suggestions within the store search interface. When enabled, matching results are displayed automatically as customers enter search keywords.</td></tr><tr><td>Dropdown 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>Product image ratio</td><td><p>Modifying this feature allows for customization of the image size as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Search default</td><td><p><strong>Enable default search</strong></p><p> Enable or disable the default search content displayed before customers enter a search query.</p><p></p><p><strong>Quick link tags</strong></p><p>Add custom search keywords that appear in the default search interface. Separate multiple tags using commas. Customers can click a tag to instantly perform a search.</p><p><br><strong>Default products</strong></p><p>Select a collection to display products in the default search.</p><p><br><strong>Default collections</strong><br>Use this setting to add collections in the default search.<br><br><strong>Default articles</strong><br>Click on "Select blog" to show the blogs in default search.</p></td></tr><tr><td>Default articles</td><td>Select blog articles to display within the default search panel. Featured articles help customers discover useful content, announcements, buying guides, and store updates before performing a search.</td></tr><tr><td>Products</td><td><p><strong>Default products</strong> </p><p>Select products to display in the default search panel. These products appear when no search query has been entered. </p><p></p><p><strong>Show product vendor</strong> </p><p>Enable or disable the display of product vendor names in search results and featured products. </p><p></p><p><strong>Show product price</strong> </p><p>Enable or disable product prices within search suggestions and default search product cards. </p><p></p><p><em><strong>Note:</strong> This setting is visible only when <strong>Search Suggestions</strong> are enabled</em>.</p></td></tr><tr><td>Collections</td><td><p><strong>Default collections</strong></p><p>Select collections to display in the default search interface when no search term is entered. </p><p></p><p><strong>Card Color Scheme</strong> </p><p>Select a predefined color scheme for collection cards shown in the search panel.</p></td></tr><tr><td>Style</td><td><p>Control the visual appearance of collection cards displayed within the search interface.</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Choose the position of collection titles and content within collection cards.</p><p></p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fzt8tXTyjH1IfXatFmwrZ%2Fsearch%20behaviour.png?alt=media&amp;token=5b39e0aa-610c-411f-bc4d-2cfda4359810" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4SlT7uhWtvl6AdbRO8Nq%2Fsearch%20behaviour-2.png?alt=media&amp;token=eb5178ad-77ec-431f-81c8-ad77443d65c9" alt=""><figcaption></figcaption></figure>


# Currency format

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

Currency codes customization here.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/mPRHXV0LxSYemh2MfZ0w/currency-setting.png" alt=""><figcaption></figcaption></figure>


# Cart

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

"**Cart**" customization as is follow:

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FKkmtkXBxYfsDiLrADgj2%2Fcart-settings.png?alt=media&amp;token=e733a472-1224-4e25-9d57-1ce3cce7d21d" alt=""><figcaption></figcaption></figure>

"**Cart drawer**" customization as is follow:

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FizUKuRHce3AinE0nfQZa%2Fcart-drawer-settings.png?alt=media&amp;token=c2c8f802-83a0-46da-a0c7-2cd7e78fadf4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FaaiPdSD34CsuMU9r3a2P%2Fcart-countdown.png?alt=media&amp;token=1485f446-fc2b-4033-8b3b-0f07e1b176b2" alt=""><figcaption></figcaption></figure>


# Theme style

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

Changing your theme's style will affect both the settings and look and feel of your store.

Some settings will be lost when you change your style, but you will not lose any content from your store.

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Theme style</td><td><p>Customization of the "Theme style" settings is as follows:</p><ul><li>Home</li><li>Knowledge</li><li>Active</li><li>Boost</li></ul></td></tr></tbody></table>


# Checkout

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

"**Checkout**" customization as is follow:

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FFe9JgbidslRB4Hz3AArG%2Fcheckout.png?alt=media&amp;token=b00ad89f-d943-4d24-9115-49671e91dfdf" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Form fields</td><td><p>Customization of the "Form fields" settings is as follows:</p><ul><li>White</li><li>Transparent</li></ul></td></tr><tr><td>Order summary</td><td><p><strong>Background image</strong><br>Use "image" to set background image.</p><p><br><strong>Background color</strong><br>You can modify the background color in order summary.</p></td></tr><tr><td>Typography</td><td>Customize the font type for heading and body text in checkout.</td></tr><tr><td>Colors</td><td>You can modify the Accents , Buttons and Errors color in order summary.</td></tr><tr><td>Checkout layout</td><td><p>Customization of the "Checkout layout" settings is as follows:</p><ul><li>One-page checkout</li><li>Three-page checkout</li></ul></td></tr></tbody></table>


# Custom CSS

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

Theme Custom CSS add here.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/1mLplFYZ7vSjWpSdIOFt/custom-css-setting.png" alt=""><figcaption></figcaption></figure>


# Product page

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

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

You can sell goods, digital downloads, services, and gift cards through the product page. In addition, 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: 1000x1000
{% 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>You can make the content sticky on a desktop device by checking this checkbox.</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>Media</td><td><p><strong>Desktop media width</strong><br>You will find customizations for adjusting the desktop media width within this section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><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 layout</strong><br>Desktop layout customization setting is as follows:</p><ul><li>Stacked</li><li>2 columns</li><li>Thumbnails</li><li>Thumbnail carousel</li></ul><p><strong>Thumbnail image ratio</strong><br>The Thumbnail image ratio customization setting is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</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>Image zoom</strong></p><p>The Image zoom customization setting is as follows:</p><ul><li>Open lightbox</li><li>Click and hover</li><li>No zoom</li></ul><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><strong>Mobile layout</strong><br>Mobile layout customization setting is as follows:</p><ul><li>2 columns</li><li>Show thumbnails</li><li>Hide thumbnail</li></ul></td></tr></tbody></table>

## 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>Custom badge</td><td><p><strong>Add custom badge</strong><br>Enter text to display as a Badge in the "Text" block.<br></p><p><strong>Background color</strong></p><p>Enter a color code for Badge background color.<br></p><p><strong>Text color</strong> </p><p>Enter a color code for Badge Text color.</p></td></tr><tr><td>Text</td><td><p><strong>Text</strong><br>Enter text to display as a Discription in the "Text" block.<br><br><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><p><strong>Text alignment</strong></p><p>Customization of the "Text alignment" in the main product page is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Title</td><td>Show product "Title" for your main product.</td></tr><tr><td>Product meta</td><td><p>"Product meta" is for customizing product vendor, type, and tags which are as follows:</p><ul><li>Show vendor</li><li>Show type</li><li>Show tags</li></ul></td></tr><tr><td>Countdown timer</td><td>This block does not have customizable settings. After adding this block, you will be able to display the product countdown timer using a specific metafield.<br><br><strong>Timer ending text</strong><br>The entered text will be displayed as a timer expiration message. It will appear once the date has expired.</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></td></tr><tr><td>Stock bar</td><td><p>"Stock countdown" is for customizing the product stock.<br></p><p><strong>Maximum stock</strong><br>Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200".<br></p><p><strong>Limit stock cut off</strong><br>Adjust the limited stock cut-off for the stock countdown.<br></p><p><strong>Limit stock message</strong><br>Display limit stock message.<br></p><p><strong>In stock message</strong><br>Display the "In stock" message.<br></p><p><strong>Continue selling message</strong><br>Display the "Continue selling" message.<br><br><strong>Colors</strong><br>Customize the colors of  Limited stock, In stock and Continue selling text.</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>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>Inventory status</td><td><p>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>Quantity selector</td><td>This block has no customizable settings. After adding this block, you will be able to view the quantity selector.</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>Enable color swatches</strong><br>By enabling this checkbox you can show the "Variant color."<br></p><p><strong>Swatches source</strong><br>The Swatches source is given below. When a variant image is selected, the corresponding variant's image will be displayed. If a custom image is selected, the color from the swatches will be shown."</p><ul><li>Variant image</li><li>Custom image</li></ul><p><strong>Swatch type</strong><br>Following is the color swatches type customization of the section:</p><ul><li>Round</li><li>Square</li></ul></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>Description</td><td>After adding this block, you will be able to view the product description.</td></tr><tr><td>Share</td><td>Clickable text that allows customers to share the product on social media.</td></tr><tr><td>Share button</td><td><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>Custom Liquid</td><td>Add Apps.</td></tr><tr><td>Content</td><td><p><strong>Title</strong></p><p>Enter text to display as a title in the section.<br></p><p><strong>Content</strong></p><p>Enter text to display as a "Description" in the section.<br></p><p><strong>Content from the page</strong></p><p>"Select page" is for selecting a page in a section.</p></td></tr><tr><td>Trust content</td><td><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>Show payment icons: By enabling this checkbox you can show the “Payment icon”.<br></p><p><strong>Heading</strong><br>Enter text to display as a title in the section.</p><p><br><strong>Description</strong><br>Enter text to display as a "Description" in the section.<br></p><p><strong>Security :</strong></p><p><strong>Heading</strong></p><p>Enter text to display as a heading in the section.<br></p><p><strong>Image</strong></p><p>Use "Image" to add the image to the section.<br><br><strong>Image width</strong><br>"Image width" is used to change the size of the section image. You can give the minimum width "100" and maximum width "600" of the image.</p></td></tr><tr><td>Collapsible row</td><td><p>The section "Collapsible row" is for adding collapsible rows.<br></p><p><strong>Heading</strong></p><p>Enter text to display as a title in the "Collapsible row" block.</p><p></p><p><strong>Icon</strong></p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul><p><strong>Open collapsible row</strong><br>By enabling this checkbox, you can show open collapsible row.</p><p></p><p><strong>Product description</strong></p><p>Use "Product description" to add the description of the product.<br></p><p><strong>Row content</strong></p><p>Enter text to display as content in the row. <br></p><p><strong>Row content from page</strong><br>By using these settings, the selected page will display its content like row content.</p></td></tr><tr><td>Offer</td><td><p><strong>Heading</strong><br>Enter text to display as a title in the "Offer" block.<br><br><strong>Icon</strong></p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li><li>Tag</li></ul><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 tag Icon color.</p></td></tr><tr><td>Pop-up</td><td><strong>Link label</strong><br>Enter text to display as a title in the "Link label" block.<br><br><strong>Page</strong><br>By using these settings, the selected page will display its content in pop-up.</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><strong>Heading</strong><br>Enter text to display as a title in the "Complementary products" block.<br><br><strong>Heading 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>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><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul><p><strong>Maximum products to show</strong>: </p><p>"Maximum products to show" is to specify how many products to show in a section. 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>"Number of products per page" is to customize the show of products per slide. You can show a minimum of "1" and a maximum of "4" products in "1" slide.<br></p><p><strong>Pagination style</strong></p><p>The style of the Complementary products that appears below the complementary  product cards:</p><ul><li>Dots</li><li>Counter</li><li>Numbers</li></ul><h4>Product card : </h4><p><strong>Image ratio</strong><br>The customization of the image ratio in the product section are as follows:</p><ul><li>Portrait</li><li>Square</li></ul><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></td></tr><tr><td>Icon with text</td><td><p>In this block, 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><strong>Background image</strong></p><p>You can add an image behind the content by using a background image.</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><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Support</li><li>Washing</li></ul><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><tr><td>Payment icons</td><td><strong>Heading</strong><br>To display the heading for the payments icon, add text here.</td></tr><tr><td>Personalize label</td><td><p><strong>Label</strong></p><p>Enter text to display as a Label in the "Text" block.</p></td></tr></tbody></table>

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/q5fbr5wo7Uc>" %}

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

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

***

## Setting the Complementary products(Metafield)

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FIgD21AKRk32znc95DnEO%2Fcomplementary-prdt-meta1.png?alt=media&amp;token=0fe8ab58-ea7e-4b21-80ab-5100173bc58b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F26LkFx5KMAzJKQxoOt4u%2Fcomplementary-prdt-meta2.png?alt=media&amp;token=955c464f-8457-4723-9032-ce0f40887b22" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSukJv02OKs7RHwTApECT%2Fcomplementary-prdt-meta3.png?alt=media&amp;token=a7266033-e816-404d-bc76-f88a19847772" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fi1G7igUiGbXDvubxqnhO%2Fcomplementary-prdt-meta4.png?alt=media&amp;token=c0a9e0f9-0cfd-427c-aeaf-1c5ff692b5d7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FPkrGB3fpUHRLTKZODS7s%2Fcomplementary-prdt-meta5.png?alt=media&amp;token=5ac153ef-ce09-4b50-8c7e-0cccd8f74831" 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="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FzSioxmhbcpyEuALJ9PTF%2Fproduct_media.png?alt=media&amp;token=8f1f56c8-150b-4789-b713-ce32035a43d3" 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="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FZZ59M7ZNdtqohdfNBlpy%2Fmedia_url.png?alt=media&amp;token=a6c549ba-5701-45d0-a7bc-f4c25a83558a" alt=""><figcaption></figcaption></figure>


# How to create product template?

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

To create a product template, follow the steps below. It is mandatory to **create a product template in the Publish Theme** to be able to select it on the products. To create a product template, go to Customization and click on Create Template.

* go to Customization and click on **Products**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSYmL4d7ebUPUw00tObHS%2Fprd1.png?alt=media&amp;token=8623c636-17e9-49ed-b048-8842d0a87a98" alt=""><figcaption></figcaption></figure>

* Click on **Create template**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdBQeWkzV58fwo7XEFNEg%2Fprd2.png?alt=media&amp;token=4657f4b6-40ec-41d6-b73d-136728528cce" alt=""><figcaption></figcaption></figure>

* Enter the name you want to use for creating the template

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSUfIiinBzDb3w8FOAWiy%2Fprd3.png?alt=media&amp;token=73f07ebe-5cbe-4d01-bb52-7e350f015ad7" alt=""><figcaption></figcaption></figure>

* Go to the admin panel and click on the products for which you created the template.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FW44rfGZcjUjaCwLNUIYX%2Fprd4.png?alt=media&amp;token=fe279fc3-787c-4065-ba4f-b770c2805fb8" alt=""><figcaption></figcaption></figure>

* Select the template you created

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FcOFzUV51oVitnD0dybsp%2Fprd5.png?alt=media&amp;token=368a7f7a-8645-46ea-8924-5cc080457195" alt=""><figcaption></figcaption></figure>


# Countdown timer

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

In the Sitar theme product template, includes 'Countdown timer' block that displays the product countdown time.

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FrVnzxIuZVbB63wQ9A4lm%2Fc1.png?alt=media&amp;token=1287a79c-250a-4e3c-a094-0530317d6bbc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F8leA30noUWB6dREZS6QW%2Fmeta-product.png?alt=media&amp;token=c4d8e0e4-51da-4113-8148-583162361c5c" alt=""><figcaption></figcaption></figure>

2. Click **Add definition**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FzbaEbf9epuYdGa4SFs5w%2Fc3.png?alt=media&amp;token=ab1bfd99-34dd-4e8f-b7ac-5a17b5dc3a26" alt=""><figcaption></figcaption></figure>

3. In the **Name** field, enter `Product timer`

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fs0P8d5djSdLEj8geozaC%2Fc4.png?alt=media&amp;token=0ccbdd71-9869-4bd7-b971-1fac95ba3fb2" alt=""><figcaption></figcaption></figure>

4. Click **Select type** then select **Date.**
5. Click **Save** to save the definition.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FACJbLLzwXT2RMNpFs8ea%2Fc5.png?alt=media&amp;token=9437712a-6957-4e98-afef-81aabdc1b511" alt=""><figcaption></figcaption></figure>

6. You should see the **Product timer** in the list of definitions by now.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNvLBQzDjCr1JbEpUSrN6%2Fc6.png?alt=media&amp;token=8637095b-9973-4e76-9371-70075d0b404a" alt=""><figcaption></figcaption></figure>

## Add the Product timer <a href="#setting-the-countdown" id="setting-the-countdown"></a>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FTaCpuxccKgasg9L3BLUB%2Fc3.png?alt=media&amp;token=1632b056-4e95-4284-aeb8-933f2acd400f" alt=""><figcaption></figcaption></figure>

2. Scroll down to the **Metafields.** You should see the **Product timer** here.
3. Select date and click **Save** to save your changes

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fz38lHLqOSiDNpRCvJ0L5%2Fc8.png?alt=media&amp;token=1092eefc-0ec9-43e5-9aac-11c243f797dd" alt=""><figcaption></figcaption></figure>

4. Then go to the customization and select the metafield

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FE0mVECQvXCNyzBE6E5bp%2Fc4.png?alt=media&amp;token=0826b82b-be44-44f2-be5e-9051637080c7" alt=""><figcaption></figcaption></figure>


# Quick order list

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

In the Sitar theme product template, includes 'Quick order list' section that displays the product variants.

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show images</td><td>Enabling this checkbox will display the variant image beside the variant name.</td></tr><tr><td>Show SKUs</td><td>Enabling this checkbox will display the variant SKUs.</td></tr><tr><td>Hide sold out variant</td><td>By enabling this checkbox, you can hide the sold out variants.</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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fu1uy2yMYSxQSU4s0zenD%2Fquick-order.png?alt=media&amp;token=f114291e-9ed7-462e-8dd4-1fe3b8420fe0" alt=""><figcaption></figcaption></figure>


# Collection Page

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

## Collection image <a href="#collectionimage" id="collectionimage"></a>

To set up a collection image section:

* Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section.
* Select **Collections** > **Default collection**.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkxASCKq3kSKBM65PYQwz%2Fdefault-collection.png?alt=media&amp;token=c8053ce0-c61c-47cf-b361-3b5f1b457481" alt=""><figcaption></figcaption></figure>

## From the side panel, select the Collection banner block.

<table><thead><tr><th width="273">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 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>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Default collection image</td><td>Use "Default collection image" to add the image to the section.</td></tr><tr><td>Show collection image</td><td>Enabling this checkbox will allow you to display the added image in the collection.</td></tr><tr><td>Show collection description</td><td>Enabling this checkbox will allow you to display the added description in the collection.</td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" in the Image with text section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Layout</td><td><p>Customization of the "Layout" in the collection banner is as follows:</p><ul><li>Column</li><li>Overlay</li></ul></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FIXl2obmjyUB8UibrOzpa%2Fcollection-banner.png?alt=media&amp;token=b02304b4-cb23-4b81-806c-555fa5788af1" alt=""><figcaption></figcaption></figure>

## Product Grid <a href="#productgrid" id="productgrid"></a>

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Products per page</td><td>"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.</td></tr><tr><td>Product card</td><td><strong>Enable product-list description</strong><br>By enabling this checkbox you can show the “Product-list description”.</td></tr><tr><td>Filtering and sorting</td><td><p><strong>Enable filtering</strong><br>By enabling this checkbox you can display the “Product filter”.<br></p><p><strong>Desktop filter layout</strong></p><p>Product filter layout customizations in a page are as follows:</p><ul><li>Horizontal</li><li>Vertical</li><li>Drawer</li></ul><p><strong>Enable sorting</strong><br>By enabling this checkbox you can display the “sorting select box”.</p><p></p><p><strong>Enable collections filter</strong></p><p>By enabling this checkbox you can display the “collections filter”.<br><br><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Collections filter block</strong><br>Click on "Select menu" to add a menu in the collection filter block.</p></td></tr><tr><td>Pagination</td><td><p><strong>Pagination color</strong></p><p>In this section, you can change the background and foreground color of a pagination 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><br><strong>Pagination type</strong></p><p>Pagination type customizations in a page are as follows:</p><ul><li>Paged navigation</li><li>Load more button</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of product columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F1peFZDE7JctGscUVX7xe%2Fproduct-grid.png?alt=media&amp;token=0e4db012-fd2f-4d6c-b018-9939fe0c57c5" alt=""><figcaption></figcaption></figure>

## Add block

To add block to the product grid, click on the 'Add media promotion'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Position in results</td><td>Inserts the media promotion before the product card in this position. only applies to the first page of results.</td></tr><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image overlay opacity</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.</td></tr><tr><td>Heading</td><td>Enter text to display as on the "heading" section.</td></tr><tr><td>Heading size</td><td><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>Sub heading</td><td>Enter text to display as on the "sub heading" section.</td></tr><tr><td>Description</td><td>Enter text to display as a "description" in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in this section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Button label</td><td>Use "Button label" to add a label to the Button in the section.</td></tr><tr><td>Button link</td><td>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Open this link in a new window</td><td>By using the "Open this link in a new window" option, the link will open in a new tab.</td></tr><tr><td>Button style</td><td><p>Customization of the "Button style" is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Show container</td><td>When 'Show container' is enabled, the banner's content container box will be visible.</td></tr><tr><td>Container overlay opacity</td><td>By enabling this checkbox, you have the ability to change the container overlay opacity. Modify the "Container overlay opacity" setting to increase or decrease the opacity level of the overlay on the banner content.</td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in this section is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></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></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FleQhSpZcx0za2qWAOQFW%2Fproduct-grid-block.png?alt=media&amp;token=7ad299c4-435c-44cd-8eb6-aa3423759937" alt=""><figcaption></figcaption></figure>

In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting.&#x20;

With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.

## Collection page filter <a href="#collectionfilter" id="collectionfilter"></a>

Here's an overview of how to set up filters in the sidebar of your **Collection page** when using the OS 2.0 version.

Here's an example showing a collection page sidebar.

### **Add filters to your collection page**

Follow the below steps to select which product filters you want to display.

1. Install the "**Search & Discovery**" app and open it. Click on "Filters" and Add filter

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdxyWv1fWcKTAlHUX2JbC%2Fcoll-filter3.png?alt=media&amp;token=2a697d1b-51dc-4841-9312-3770717b1515" alt=""><figcaption></figcaption></figure>

2. Select the source.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FFBEy7tvfFy8tGAdDb6Bt%2Ff2.png?alt=media&amp;token=2f815068-8d64-460a-ad78-f8145c692f68" alt=""><figcaption></figcaption></figure>

3. Check the box for any filters you want to display on the collection page. If you want to display product variant options (according to your store’s already existing product variants), then select Product options and you will be able to select which ones you want to display.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fat9cclyP79Zps50ZUbU0%2Ff4.png?alt=media&amp;token=ef464a71-5387-4ffd-8860-eef34e5ad4dd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FyhxnHukVuHxi8TMEnT4G%2Ff5.png?alt=media&amp;token=a722af3a-9e24-41e6-9ced-90d037630c0f" alt=""><figcaption></figcaption></figure>

4. Check the relevant boxes, and select Done and Save to ensure the implementation of the changes is done before l leaving the area of the Shopify Admin. After selecting which filters you want to display in your collection page’s sidebar, you now need to return to the theme editor to set the collection page to display them on your store.

## **Display the filter in a sidebar**

1. Open theme editor.
2. Select **Collections** > **Default collection**.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkxASCKq3kSKBM65PYQwz%2Fdefault-collection.png?alt=media&amp;token=c8053ce0-c61c-47cf-b361-3b5f1b457481" alt=""><figcaption></figcaption></figure>

3. After opening "**Default collection**", Check "**Enable filtering**" Option.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0FKzsMQoeXJy2I2KpmrT%2Fenable-filter.png?alt=media&amp;token=ad5a23e7-1316-4e13-be88-436ed46147b2" alt=""><figcaption></figcaption></figure>

4. Select "**Save**" and ensure that your changes have taken effect before leaving the theme editor.

### **Collection page customization**

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


# How to create collection template?

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

To create a collection template, follow the steps below. It is mandatory to **create a collection template in the Publish Theme** to be able to select it on the collections. To create a collection template, go to Customization and click on Create Template.

* go to Customization and click on **Collections**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FcfDhzbGvKOB77ssYfTTf%2Fcoll1.png?alt=media&amp;token=fc852b19-4ebb-45a4-bcc8-1e6e670be6b0" alt=""><figcaption></figcaption></figure>

* Click on **Create template**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYYd21mZF3q4oiuCzG1qd%2Fcoll2.png?alt=media&amp;token=c0444a99-34b6-4212-845f-8d7f8786540a" alt=""><figcaption></figcaption></figure>

* Enter the name you want to use for creating the template

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgNoKF18fvHJ8mZOhyRJo%2Fcoll3.png?alt=media&amp;token=200ff3d3-881d-42e6-b6a6-a555503f6b1a" alt=""><figcaption></figcaption></figure>

* Go to the admin panel and click on the **Collections** for which you created the template.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FM01BaGvsKuxqx0aHnI8a%2Fcoll4.png?alt=media&amp;token=81d57c2a-e866-4727-99f9-10c539a545e9" alt=""><figcaption></figcaption></figure>

* Select the template you created

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fgz3RJcOVz3imGXJlM1nv%2Fcoll5.png?alt=media&amp;token=1b0cc0ad-9389-45fe-8a34-01acd23dae50" alt=""><figcaption></figcaption></figure>


# Collection banner

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

{% hint style="info" %}
**Recommendation Size**\
Collection image size: 248x290\
Collection banner image size: 1900x150
{% endhint %}

## Adding metafield definition <a href="#adding-metafield-definition" id="adding-metafield-definition"></a>

Before you can add Collection image(metafield value) to specific collections, you need to add the necessary metafield definition for this information.

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4gIY1uTemZzxpQ5pFBiE%2Fcountdown1.png?alt=media&amp;token=c235b991-189c-443f-a979-5c9c34ce353a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F5BusbsUPRPpGpsXP3Ezy%2Fmeta-collection.png?alt=media&amp;token=9ff197b0-6a5b-4e43-96f2-f61d6c3832ab" alt=""><figcaption></figcaption></figure>

2. Click **Add definition**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhE4wkNkm7ukMAA2reWOV%2Fcoll-banner2.png?alt=media&amp;token=c40f53d4-7365-45e3-9978-4bf3c641a089" alt=""><figcaption></figcaption></figure>

3. In the **Name** field, enter `Collection image`

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FkEsfAPiJSUbTbp7nxhIx%2Fcoll-banner3.png?alt=media&amp;token=d10b57cb-1245-49e0-9b7a-5f36fa34bf95" alt=""><figcaption></figcaption></figure>

4. In the **Namespace and key** field, enter `custom.collection_image`

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FsCpDqHgSl6uACeGdpXVX%2Fcoll-banner4.png?alt=media&amp;token=2db968c1-c6f4-48cd-936f-ffe15951fa89" alt=""><figcaption></figcaption></figure>

5. Click **Select type** then select **File.**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FIVW6wYN5UxhyI92x5piO%2Fcoll-banner5.png?alt=media&amp;token=fc812ec2-6c2d-4b8a-9c30-77265e62469d" alt=""><figcaption></figcaption></figure>

6. Than select **Accept all file types.**
7. Click **Save** to save the definition.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYrXFPsFW1Li0gr0TFp8f%2Fcoll-banner6.png?alt=media&amp;token=a61e6891-0e02-4abd-ad79-1b6f35626452" alt=""><figcaption></figcaption></figure>

8. You should see the **Collection image** in the list of definitions by now.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F63fk6XS1v17mGF1ftE14%2Fcoll-banner7.png?alt=media&amp;token=ed698f0c-14d8-4881-a7ec-b474651623d7" alt=""><figcaption></figcaption></figure>


# Color swatches

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

## Setting up color swatches <a href="#setcolorswatch" id="setcolorswatch"></a>

You can add color swatches to your product page, collection pages, and home page across the theme using these settings that you see in the below screenshot:

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FiZ59cpaVRTRjqLZ5wKQk%2Fcolor-swatches.png?alt=media&amp;token=bb1d7895-e495-477a-8605-3cf99789d9c2" alt=""><figcaption></figcaption></figure>

## Working of swatches

Once you enable the color swatch settings, Sitar will look for any variant with the name "Color."

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FpZNNdlsUoDaouOPMolKB%2Fvariant-name.png?alt=media&amp;token=b8f029d1-c7f3-4352-8bd1-fb4666043c8f" alt=""><figcaption></figcaption></figure>


# Page

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

## Use page templates <a href="#usepagetemp" id="usepagetemp"></a>

To use the custom page templates in-store, create a new Shopify page or use an existing one.

If you have a Shopify online store, then you can create webpages in your Shopify admin. Webpages contain information that rarely changes or that customers will often reference, like an “About Us” page or a “Contact Us” page.

* Go to Online Store > Pages.
* Click Add page.
* Enter a title and content for the page.

Be descriptive and clear when choosing your webpage title. The webpage title displays in the tab or title bar of browsers. It also appears as the page title in search engine results.

* Under Visibility, select when you want to publish the page. By default, your new webpage will be visible when you click Save. Select the Hidden option if you want your new webpage to be hidden from your online store, or click Set a specific publish date to [control when your webpage is published](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/future-publishing).
* Click Save.

## **Default Page**

Select "**Default Page**" to assign a template from your current theme to define how the page should display.

## **About Us**

To add an **About** us or our store **Page**, Select **Aboutus** in the Theme Template dropdown.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/FmbNlLwwORIZXBsiswrw/about-us.png" alt=""><figcaption></figcaption></figure>

When you select **aboutus** in a dropdown, you will be able to customize this page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FFmjSEVkXhrZr7JvYuxYX%2Fpage-about-us.png?alt=media&amp;token=4e7a1238-4c52-4ff9-8e59-893b16062123" alt=""><figcaption></figcaption></figure>

## **Contact Us**

To add **Contact us** page, select a **contact** in Theme Template dropdown.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F8wBAJgrHvGlejXsg4Miu%2Fcontact.png?alt=media&amp;token=144be214-ff14-4003-b203-fed05330a509" alt=""><figcaption></figcaption></figure>

To add the **Contact us** page, select contact in the Theme Template dropdown. When you select **Contact** in the dropdown, you will be able to customize the contact page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FctiY9DGhF6MBk62LWgN1%2Fpage-contact.png?alt=media&amp;token=020ef15a-3c91-481b-a7e6-3d64319a85c2" alt=""><figcaption></figcaption></figure>

## **Faq**

To add **Faq** page, select a **faq** in Theme Template dropdown.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/8XNNUr4gRgKFuwxADJlT/faqs.png" alt=""><figcaption></figcaption></figure>

When you select **faq** in a dropdown, you will be able to customize this page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEDFWEtp0IA7ZaWPWYjnA%2Fpage-faq.png?alt=media&amp;token=7f28ded0-0a96-4cc2-9280-3cd3cf1c3bdb" alt=""><figcaption></figcaption></figure>


# How to create page template?

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

To create a page template, follow the steps below. It is mandatory to **create a page template in the Publish Theme** to be able to select it on the Page.To create a page template, go to Customization and click on Create Template.

1. go to Customization and click on **Pages**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FmYSgLJfffCY15jazl0yi%2Fpage-template1.png?alt=media&amp;token=ca94f39a-149e-4c1e-8b8e-bfb2f9c7d9be" alt=""><figcaption></figcaption></figure>

2. Click on **Create template**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FadAasr2iu94KZUcx61ne%2Fpage-template2.png?alt=media&amp;token=5e243ea1-5025-49cf-87b8-03e2e9336b70" alt=""><figcaption></figcaption></figure>

3. Enter the name you want to use for creating the template

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNQ5tmWtGvGTSfmaAEZoD%2Fpage-template3.png?alt=media&amp;token=1610fbf5-8415-4849-bf7f-c18dc6d8f417" alt=""><figcaption></figcaption></figure>

4. Go to the admin panel and click on the page for which you created the template.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FbZINR8I5tjoTjyaz0zi2%2Fpage-template4.png?alt=media&amp;token=2325fd90-ae14-4d4a-aa7f-b4a3f0fdcaf3" alt=""><figcaption></figcaption></figure>

5. Select the template you created

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FQFP9z9y55tFsdAICwY4r%2Fpage-template5.png?alt=media&amp;token=99db3222-7ccb-4094-91af-37290793e7fa" alt=""><figcaption></figcaption></figure>


# Languages and Currency

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

## Languages <a href="#language" id="language"></a>

To Add Languages, log in to your admin panel and follow the below steps:

* From your Shopify admin, go to Settings.
* Click Languages.
* In Translated Languages, click Add Language.
* Choose a language from the dropdown menu, then click Add.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHaJOllB4ToRjTxLW8gm1%2Fadd-language.png?alt=media&amp;token=f8aec3e4-dae5-4c6b-a85f-0490ac9ab852" alt=""><figcaption></figcaption></figure>

To Edit default theme content, login to your admin panel and do the following settings.

As per the Shopify language translation supporting feature, we need to key all the text-based information in the “Language Editor” section so that all the information loads in the same language. Kindly refer to the following screenshot to know about editing this information. Then, just go to your store’s theme section and confirm which theme is going to be the primary one (Published theme); then do the followings

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FWkm6n4QbsbSzWvc0o0zb%2Fedit-default-content.png?alt=media&amp;token=850b4d16-f7f6-4082-acaf-ed7a1733fed5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FmoLCKOp8EUITQpRH9Lcm%2Fedit-content.png?alt=media&amp;token=56506d0b-f51f-4d6a-a8ef-935d2c77c3a4" alt=""><figcaption></figcaption></figure>

## Currency <a href="#currency" id="currency"></a>

To Currency, login to your admin panel and Go to S**ettings > Markets > Add Market**. You can add Countries/regions here.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fip6wByh6WNkd6lj87ebh%2Fadd-markets.png?alt=media&amp;token=73c27360-895d-445e-b27e-6e7f147c5e2d" alt=""><figcaption></figcaption></figure>

### **Currency format**

You can choose to have product, cart, and checkout prices always show currency codes.

* From your Shopify admin, go to **Online Store > Themes**.
* Click on **Customize** button.
* Click **Theme settings**.
* Click **Currency format**.
* To enable currency codes, click the **Show currency codes** checkbox.
* Click **Save**.


# Additional Settings

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

## Enable customer accounts <a href="#custaccount" id="custaccount"></a>

You can make customer accounts essential or optional or disable them according to your choice. Moreover, customers redirect to a separate account creation page when creating an account.

To edit your customer account settings:

* From your Shopify admin, go to Settings > Customer account.
* Enable "Show login link in the header of online store and at checkout".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHWArMhQvtfFodg84Wv4p%2Fs1.png?alt=media&amp;token=88b44853-f032-4d22-87d3-db77bb4b459a" alt=""><figcaption></figcaption></figure>

## Enable dynamic checkout buttons <a href="#dynamiccheckout" id="dynamiccheckout"></a>

Customers can use the **"Dynamic checkout"** button to buy the product they’re viewing instantly. They can skip the cart and complete their payment with the checkout method that display on the Button. The Button dynamically changes to reflect the customer’s preferences which accelerates the checkout method.

All themes include **Dynamic checkout buttons** buttons and a secondary add-to-cart button that sends the customer directly to the “Checkout page” and completes the purchase with their choice of payment type.

To enable dynamic checkout in your theme:

* From your Shopify admin, go to **Online Store & Themes.**
* Click **Customize**.
* In **Product information** section, click on **Buy buttons.**
* Select **Show dynamic checkout buttons**.
* Click **Save**.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOR4Gelbrfx5153WzAAhQ%2Fdynamic-checkout.png?alt=media&amp;token=7a41faa8-cd17-4192-a4e1-1c5df464f613" alt=""><figcaption></figcaption></figure>

## Remove "Powered by Shopify" <a href="#footercredit" id="footercredit"></a>

Log in to your store admin. In your Shopify admin dashboard, go to **Themes**, and find the theme that you want to edit. When you see a dropdown section, select **Edit code**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJRMJEPqpuazlmHPJ1lYb%2Fedit-code.png?alt=media&amp;token=6a777da8-dca3-407d-9546-d6d6016c3ca6" alt=""><figcaption></figcaption></figure>

Go to Sections > **footer.liquid.**

Press Ctrl + F (Command + F) and Search **{{ powered\_by\_link }}**.

<figure><img src="https://content.gitbook.com/content/QNL2Rsjblk1UxGDo1Rj9/blobs/ih7N2TcRGzShsU22DzM7/powered-by-link.png" alt=""><figcaption></figcaption></figure>

Delete this line and click **Save**.


# Dynamic source of color swatch variant image

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

**Follow the steps to add a color entry.**

* In the Shopify admin panel, go to the **Content > Metaobjects > Active**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNriWg04qrIQPg1ouFEfN%2Fcolor-swatch1.png?alt=media&amp;token=6ccd9b58-18f1-4155-89a9-887d612332bc" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNzpIdrXFctU0wNvkcAHU%2Fcolor-swatch2.png?alt=media&amp;token=dfbab071-1a4a-40f6-9103-bf1a0bbc0f61" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FDXpiHam0WahxgBqLwaZD%2Fcolor-swatch3.png?alt=media&amp;token=a15629d4-019c-45eb-be85-f3a26f6b67fe" alt=""><figcaption></figcaption></figure>

* Here, you can add a Color name along with its Color code, otherwise you can also upload an Image

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FZK9qczEUrO1xj4ToaBNV%2Fcolor-swatch4.png?alt=media&amp;token=a5fb2a75-45da-440d-b8d7-b483a3660344" alt=""><figcaption></figcaption></figure>

You can add images to the color swatch using the dynamic source of metafiled. Follow the below steps:

* Go to the Products
* Open anyone product.
* Click on 'Add options like size or color' and select "**color**"

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOYn13dlnF0M4MGStN9K9%2Fvarint-image1%20(1).png?alt=media&amp;token=3987477d-046b-4bd4-b1e3-688331d06c2b" alt=""><figcaption></figcaption></figure>

* Select/Add required colors.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2xa4DGXhqZRi2JfATdC6%2Fvarint-image2%20(1).png?alt=media&amp;token=5b120ddb-1d43-4125-9c86-f58815ff8038" alt=""><figcaption></figcaption></figure>

* Click on the added color to edit it.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F3PtfrLTNj905aB2xLc2I%2Fedit.webp?alt=media&amp;token=759dc538-5aec-41f7-9458-5ead82c7b413" alt=""><figcaption></figcaption></figure>

* Add image here and Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fo9q6v58bIUDc6dYYeFCa%2Fa.png?alt=media&amp;token=5c4f47cf-137c-472a-981f-abda6893f5be" alt=""><figcaption></figcaption></figure>

* When there are color swatches on the product cards and product page, the added images will be displayed.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fa8hybKpqoYq2ogQWFDdR%2Faa.png?alt=media&amp;token=9448ac30-f871-467e-b3ee-39bb8a740097" alt=""><figcaption></figcaption></figure>


# how can reset all the changes I made?

To revert the settings on the **home page**, open the `index.json` file in the code editor. Click on '**current**,' and you'll see the date and time of your last change. To reset the changes to a specific date, click on the date you wish to revert to, and the settings will be restored to that point.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FzqTo8MiYwiRioCD5JuqO%2Freset.png?alt=media&amp;token=b0ea0a28-ede5-41c8-9f64-87b157181e5d" alt=""><figcaption></figcaption></figure>

* To revert the settings on the **product page**, open the `product.json` file in the code editor.
* To revert the settings on the **collection page**, open the `collection.json` file in the code editor.
* To revert the settings on the **blog page**, open the `blog.json` file in the code editor.

You can reset changes in this way by opening the **JSON** file for the respective page.


# Turning your website layout from right to left

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

### Right-to-left website alignment - (RTL)

There are two methods to flip website content from `Right to left`.

1. We can develop custom code to flip the content. If you would like to customize the code, please feel free to contact us.

   1. Mail : <support@webibazaar.com>
   2. Whatsapp: [+91 96874 97874](https://wa.me/+919687497874)

2. Flip the content by using the app from shopify app store. You can install any app that meets your requirements from the link provided below.
   1. [https://apps.shopify.com/](https://apps.shopify.com/search?q=RTL)


# Use of 'Translate & Adapt' App

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

The '**Translate & Adapt**' app in Shopify helps merchants easily translate their store content into multiple languages and tailor it to different markets.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FijV8hM3B8ATde3j8N2vG%2Ftranslate.png?alt=media&amp;token=7885e06c-0f2d-4f35-afde-07dcfd1a558a" alt=""><figcaption></figcaption></figure>

Even if you have added multiple languages, if you want certain content to be displayed in a different language, you can manually translate that specific content

1. **If the content is added from the admin side, it will automatically show when you open the app. Follow the steps below.**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxYNC2UzcEJzB3nKOWlxw%2Ftranslate1.png?alt=media&amp;token=c9aa4604-8ecb-4260-93ec-c425f358725e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHDtDhQA43vwfVkACHK6o%2F1.png?alt=media&amp;token=57a62114-7eca-4146-9b06-f61ce0a70e84" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FvRBeHe5KZE0MGecitlU0%2F2.png?alt=media&amp;token=60c87648-6a0e-44a1-8bf8-ffe20e09dde5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FZq76WQRJvyoay6Lvmf6L%2F1.png?alt=media&amp;token=714867d3-85b1-489d-9f4e-0c94c86213de" alt=""><figcaption></figcaption></figure>

2. **If you have added any sections in the page template and need to translate them, follow the steps below.**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FLjSOWYvR6olZ5frSwZN6%2F2.png?alt=media&amp;token=a9a7a0f5-1a2c-4c50-a638-cda7a1bbcf31" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhYHGUzhawDzocRTzhq0o%2F3.png?alt=media&amp;token=2d96d4db-cefa-4c36-83ef-9a5dceb5f8b0" alt=""><figcaption></figcaption></figure>


# Continue selling when out of stock

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

When the '**Continue selling when out of stock**' setting is enabled on the admin side, products can still be added to the cart even if their quantity is 0.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FZxHYng8AaxkE0Kx63wtS%2Fselling.png?alt=media&amp;token=7810d4cb-abcd-47ce-aace-2946d3d0b3ac" alt=""><figcaption></figcaption></figure>


# Collection filter color swatch from metaobject

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

#### To display the color swatch using the metaobject in the collection filter, follow the steps below

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FAhQofrFEa1skBj1lNDCI%2Fmetafield.png?alt=media&amp;token=8f6f4208-ac11-4470-8bb4-9fb6d041ec25" alt=""><figcaption></figcaption></figure>

* Click on "**Add definition**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FoMtXCaBexnjqgaZJwVBo%2Fmeta2.png?alt=media&amp;token=8f6e8f93-5520-41b8-a489-f4ae5cd0ddf4" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEoF7qkxpLgBVZ2RQFo7j%2Fmeta4.png?alt=media&amp;token=17643f6b-6980-4818-8980-2a611eb5921a" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FBAYQ3j1MDff6oaMp61KG%2Fmeta5.png?alt=media&amp;token=0df706f0-38c9-495b-90b3-313055634236" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Accept all file types, then click on **Add** button.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FaX9fVkGIcRIpA9gEo5jn%2Fmeta6.png?alt=media&amp;token=95cfcd5c-757b-4e65-98d8-5f2c5eb21a38" alt=""><figcaption></figcaption></figure>

* To add a second field, click on '**Add Field**' again.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYZGXvxr4PePt64ud9l7f%2Fmeta7.png?alt=media&amp;token=33b3a702-e647-47f9-be15-52a75a16ee16" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlMZvcDeg24tIjr0L8J0c%2Fmeta8.png?alt=media&amp;token=bd9d9375-d6af-40d4-8f5a-efc4278d1acc" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and click on "Use as filter in metaobject index", then click on **Add** button.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4Asx0EkNKGIaS6zklg5D%2Fmeta9.png?alt=media&amp;token=18324b1f-2b4b-4016-9913-9819c4f9e6ab" alt=""><figcaption></figcaption></figure>

* The metaobject fields you created will be displayed. Then click 'Save'.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxlpTCYdurxhzcUiLqpLw%2Fmeta3.png?alt=media&amp;token=c41e68ab-c6ba-4e76-81d1-8d70fecd2bd5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwESwJxoto0ITRKMYQwHV%2Fmeta1.png?alt=media&amp;token=9a14c276-ef1e-47f2-b211-4452ccb8a1d9" alt=""><figcaption></figcaption></figure>

* Click on "**Add definition**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwHnGBo6gcFtP0R9Czt3E%2Fmeta4.png?alt=media&amp;token=096dc79a-0e86-46f7-9c75-12e2c11d86a0" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed. The name you add here will be displayed in the collection page filter. then click on Select type.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGocSVYJvS3oL4BF66DyE%2Fmeta5.png?alt=media&amp;token=e60f2b02-cacb-4873-9d9a-a148b5e0fcd6" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FbtRVkRGS9MiEeNbxnByc%2Fmeta14.png?alt=media&amp;token=71329a23-5454-4455-b7a0-52e8587d98de" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FuqNjJkZJckEWzGwdTncH%2Fmeta15.png?alt=media&amp;token=c7c4664f-073f-4a4f-bb9d-d120b69d1b07" alt=""><figcaption></figcaption></figure>

* Click on created metaobject, then select the "List of entries" and **Save**.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FG55fSCguz3C1hK8HLhmp%2Fmeta16.png?alt=media&amp;token=256dff9f-fbb3-4a5a-a583-c32dd7fffedb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwFn49qBjvJQX47hRjYq9%2Fmeta6.png?alt=media&amp;token=5045e0c7-c5d4-4354-a9ea-bce4d3a3df94" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Content > Metaobjects.**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdLrCtHYyJoAdtoO0QKz4%2Fmeta18.png?alt=media&amp;token=d352337a-a60f-446a-905e-686fe8395833" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F9qNRfsodf2RAqDzgCX56%2Fmeta19.png?alt=media&amp;token=58db166f-6f97-4c42-b15c-8a4c070140ab" alt=""><figcaption></figcaption></figure>

* Select the image you want to display in the color swatch filter and add a label, Then Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGlqbep07doW5EzqK6mUy%2Fmeta20.png?alt=media&amp;token=57e6b1f5-3025-4d3c-902a-300686b0721c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FCAdi7Q3874eD177pBP51%2Fmeta21.png?alt=media&amp;token=9216aa80-37d8-46ad-8aab-e9d74f511bd9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhA06GF9Vm4mhxWR93GQY%2Fmeta22.png?alt=media&amp;token=129be3c2-8857-423a-b3a8-a2a2a1d43ee6" alt=""><figcaption></figcaption></figure>

* Install the "**Search & Discovery**" app and open it.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4enWOo8fqrCL4mZXdXgP%2Fmeta23.png?alt=media&amp;token=1e02bc8d-62ab-485a-845e-54467fc9ed81" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FI4aiQiSCkDGEbGLAePhq%2Fmeta24.png?alt=media&amp;token=d5a4ec69-bcdf-45c8-ba8d-5c7542c4c8ad" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNOdRvqi843ORAG2MPHaM%2Fmeta25.png?alt=media&amp;token=eb48150a-19cb-4cd0-a62b-a4b16a10b17e" alt=""><figcaption></figcaption></figure>

* Select the metafield for the name that you created in the product here and Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2yJhQMDEFeoBK5mUsVPH%2Fmeta26.png?alt=media&amp;token=b2d79e37-ba58-4365-ac49-32a875cc133f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwM7IcKquDrlAMlM6lsrv%2Fmeta27.png?alt=media&amp;token=b534c55f-ca99-4872-8b34-81c47c806524" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Products** and select any one product.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F77SnvutbNdiKDOMsgdix%2Fmeta28.png?alt=media&amp;token=32af3121-a156-4645-8b73-548d876e85fe" alt=""><figcaption></figcaption></figure>

* Select the entry you added in the metaobject under the content section here and Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMKC9zY8YGSTBqt6FPZWX%2Fmeta29.png?alt=media&amp;token=0382784c-1e75-42be-934f-834d76ccd13c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdV4TJRE2uF0PGo1SUMK7%2Fmeta30.png?alt=media&amp;token=c1180c90-703e-4ad1-bef7-1db3f1f70a3c" alt=""><figcaption></figcaption></figure>

* The color swatches created from the metaobject will be displayed within the filter on the collection page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRxgPx37bfjgHOJGw2onr%2Fs_meta31.png?alt=media&amp;token=a5b19150-6747-4946-ac5f-7c9499ecab4d" alt=""><figcaption></figcaption></figure>


# Quick Links

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

Sitar's Quick Links (F\&Q) section streamlines answers for clients with instant access to common queries. Clear links ensure efficient navigation for a seamless Sitar experience.

* [How to enable customer accounts](https://sitar-doc.winterinfotech.com/additional-settings#custaccount)
* [How to add product swatch images](https://sitar-doc.winterinfotech.com/color-swatches)
* [How to customize the footer?](https://webibazaar.gitbook.io/sitar-documentation/footer)
* [How to enable the Dynamic checkout button?](https://webibazaar.gitbook.io/sitar-documentation/additional-settings#dynamiccheckout)
* [How to remove Powered by Shopify?](https://webibazaar.gitbook.io/sitar-documentation/additional-settings#footercredit)
* [How to add a filter to the collection page?](https://webibazaar.gitbook.io/sitar-documentation/collection-page#collectionfilter)
* [How to create a multi-column mega menu?](https://webibazaar.gitbook.io/sitar-documentation/header/mega-menu)
* [How to add language/currency?](https://webibazaar.gitbook.io/sitar-documentation/languages-and-currency)
* [How to add a default page or contact page?](https://webibazaar.gitbook.io/sitar-documentation/page)


# Change Log

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

* #### [Version 2.0.8](https://sitar-doc.winterinfotech.com/change-log/version-2.0.8)
* #### [Version 2.0.7](https://sitar-doc.winterinfotech.com/change-log/version-2.0.7)
* #### [Version 2.0.6](https://sitar-doc.winterinfotech.com/change-log/version-2.0.6)
* #### [Version 2.0.5](https://sitar-doc.winterinfotech.com/change-log/version-2.0.5)
* #### [Version 2.0.4](https://sitar-doc.winterinfotech.com/change-log/version-2.0.4)
* #### [Version 2.0.3](https://sitar-doc.winterinfotech.com/change-log/version-2.0.3)
* #### [Version 2.0.2](https://sitar-doc.winterinfotech.com/change-log/version-2.0.2)
* #### [Version 2.0.1](https://sitar-doc.winterinfotech.com/change-log/version-2.0.1)
* #### [Version 2.0.0](https://sitar-doc.winterinfotech.com/change-log/version-2.0.0)
* #### [Version 1.0.6](https://sitar-doc.winterinfotech.com/change-log/version-1.0.6)
* #### [Version 1.0.5](https://sitar-doc.winterinfotech.com/change-log/version-1.0.5)
* #### [Version 1.0.4](https://sitar-doc.winterinfotech.com/change-log/version-1.0.4)
* #### [Version 1.0.3](https://sitar-doc.winterinfotech.com/change-log/version-1.0.3)
* #### [Version 1.0.2](https://sitar-doc.winterinfotech.com/change-log/version-1.0.2)
* #### [Version 1.0.1](https://sitar-doc.winterinfotech.com/change-log/version-1.0.1)
* #### [Version 1.0.0](https://sitar-doc.winterinfotech.com/change-log/version-1.0.0)


# Version 2.0.8

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

&#x20;`29 July 2026`

#### Newly Introduced Functionality

* Added a new "Show Block Content on Mobile" setting in the Video section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwiEg5pa2u4PkYlsyxhFL%2Fvideo%20content.png?alt=media&amp;token=33f26e3e-99f7-4d5a-8ced-096e3170c29a" alt=""><figcaption></figcaption></figure>

* Added "Enable Bold Text" setting for the Scrolling Bar text block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FtmTHTYiPEdb3pVLW18VF%2Fscrollbar%20text%20bold.png?alt=media&amp;token=96cd92de-80b0-48f9-9392-e20a13c105c9" alt=""><figcaption></figcaption></figure>

* Added "Enable Bold Text" setting for Collection Name.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXmevgwp81g9Q0LdMI7hs%2Fcollection%20name%20bold.png?alt=media&amp;token=1f2e848d-08fe-49df-9b17-098f0fa5c7ad" alt=""><figcaption></figcaption></figure>

* Added support for Collapse Row Block in the Feature Product section based on client ticket requirements.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FBeLPRDsI4SZz74ZGHEBJ%2Fimage.png?alt=media&amp;token=6f1acc23-b045-488f-b7b5-9a1d2131bf1b" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Updated Button typography to preserve the selected text casing (no automatic uppercase transformation for Outline and Solid button styles).
* Changed Search Results outline button design to a text link for a cleaner UI.
* Improved Transparent Container option by fixing text and icon color handling.
* Fixed Admin button hover effects for consistent behavior.
* Applied various spacing, border radius, and overall UI refinements across the theme.
* Newsletter subscription popup no longer reappears after a user has successfully subscribed.
* Fixed the Quick View Size Chart tabs that were not switching correctly.
* Fixed the Collection Tabs section where changing product variants, quantity, or Add to Cart caused product title and related information to update incorrectly.


# Version 2.0.7

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

&#x20;`18 June 2026`

#### Added

* Added a new "Enable Voice Command Search" option under Global Settings → Search Behavior, allowing customers to perform searches using voice commands.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEoOXj5srS4fOTAjVskLC%2Fenable%20voice%20search.png?alt=media&amp;token=46a0288d-e73f-4e24-9c38-ea7b42755dc7" alt=""><figcaption></figcaption></figure>

* Added a new "New Badge Type" setting under Global Settings → Badges with two options: **Static** – Displays the badge based on the assigned tag. **Dynamic** – Displays the badge for a specified number of days.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FyuVVrKSKhe1TMCrZnuMT%2Fnew%20badge%20type.png?alt=media&amp;token=5bbc8903-f0b2-4311-bf15-c8af067e82d5" alt=""><figcaption></figcaption></figure>

* Added a new "Megamenu Banner" block in the Header section, allowing merchants to add up to two banners inside the mega menu.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYDGwOw5T0II60752zmKU%2Fmegamenu%20banner.png?alt=media&amp;token=cf103d66-7f18-4d6c-83dc-48b39fef1668" alt=""><figcaption></figcaption></figure>

* Added a new "Percentage Discount Position" setting under Global Settings → Badges with the following options: "Over the Image" and "Inline with Price"

<div data-with-frame="true"><figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FyPHbE5Xt6HHjqx2SDv9s%2Fpercentage%20badge%20-%20over%20the%20image.png?alt=media&amp;token=ed344a69-1f75-47fa-8836-0acb1c20034e" alt=""><figcaption><p><strong>Percentage discount badge position — Over the image</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FizLkhZGRbIt0YxfseoAn%2Fpercentage%20badge%20-%20inline%20price.png?alt=media&amp;token=f90cc5b7-928c-4269-b14a-82b778384294" alt=""><figcaption><p><strong>Percentage discount badge position — Inline price</strong></p></figcaption></figure></div>

* Added a new "Enable Default Search" setting, allowing merchants to enable or disable the default search functionality.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRMhkjzpobXIEH2lSrgG7%2FEnable%20dafault%20search.png?alt=media&amp;token=a73fefa1-f494-4acb-96a9-e6d72cf5e9b4" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Fixed an issue where the sold-out label appeared on product cards even when variants were available in combined listings.
* Added missing schema settings and translations across all languages.
* Fixed an overlap issue with the "View All" button inside the Quick View collapse section.
* Fixed a grid layout issue in the Featured Product section at 991px where the image occupied only half the grid and left blank space.
* Resolved a major issue where Quick View data was displayed after the footer on collection pages.
* Fixed the zoom functionality issue when clicking dots in the Image with Product section.
* Fixed a UI issue where text touched the top edge in the Icon with Text section.
* Improved the design of the product card progress bar.
* Refined the Newsletter section design, especially for mobile devices.
* Fixed an issue in Safari where the Go to Top button icon color did not update correctly.
* Added an underline hover effect to links in the Header and Footer for improved user experience.
* Fixed an issue where page scrolling was disabled after opening and closing the localization popup in the mobile footer.
* Updated the Cart Drawer cart button with an outline style.
* Disabled thumbnail pagination for the main product gallery on the Product page.
* Added smooth zoom-in and zoom-out effects when opening and closing the Quick View modal, improving the overall UX and design consistency.
* Fixed a mobile issue where button designs broke when hovered across various sections.
* Updated the delete icon design on the Cart page to match the Cart Drawer for better consistency.
* Fixed a major issue where the product image pagination count displayed incorrectly on mobile devices.
* Fixed an issue where extra blank space appeared below the mobile menu; the menu height is now properly set to full screen.
* Improved the header menu open/close animations for a smoother user experience.
* Added an interactive hover effect to header icons, creating subtle movement with the cursor.
* Fixed a modal design issue on the Search page in Safari browsers.
* Standardized spacing between all sidebar blocks on the Blog page.
* Fixed inconsistent field spacing in the Contact page form.
* Added smooth stock bar animation when switching product variants on product cards.
* Updated the Collection Tabs section with a button-style tab design for improved UX.
* Reduced the size of the Featured Collection timer for a cleaner UI.
* Disabled pagination icons in Complementary Products when pagination is unavailable.
* Fixed a design issue in Collection page list view where products with empty descriptions still reserved fixed-height space.
* Updated the Twitter icon color on the Product page.
* Fixed an issue where a 15px gap appeared on the right-side overlay when opening search.
* Fixed an issue where the timer ending text was not visible in the Countdown Timer section.
* Improved overall theme accessibility and Lighthouse performance scores.


# Version 2.0.6

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

&#x20;`08 April 2026`

#### Added

* Added a new section: Product comparison

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FI2XrMN6s5O4QxEi4KYj4%2Fproduct_compare.png?alt=media&amp;token=5e54d4aa-bdfb-428a-bde1-ab7d72fbfaca" alt=""><figcaption></figcaption></figure>

* Added a 'Show image' feature for all images in the Mega Menu Submenu/Gallery block in the header.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEoCVyiv4x7HXEmQ1s2OI%2Fmegamenu_gallery_img_show.png?alt=media&amp;token=64a81828-995a-49f5-9a5a-0af104f81af7" alt=""><figcaption></figcaption></figure>

* Added an 'Enable action buttons center in mobile' feature in the cards under theme settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhtTzfTkyPBYJqKJFtqqz%2Faction_btn_mobile.png?alt=media&amp;token=ffe64bbe-6010-4331-aaff-7168dfd83247" alt=""><figcaption></figcaption></figure>

* Added a 'Price font size' feature in the cards under theme settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FnY7wBKPaWBjjNWCsOqCs%2Fprice_font_size.png?alt=media&amp;token=f2b8fabb-b646-45ee-b71a-a20c734c1e12" alt=""><figcaption></figcaption></figure>

* Added color scheme for the product grid on the collection page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F3BjDs5VV3rJBwCGwSmpl%2Fproduct_grid-colorscheme.png?alt=media&amp;token=e213313e-764d-448e-af4e-3d52e7775d90" alt=""><figcaption></figcaption></figure>

* Added video related features to the Social Media Gallery section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMaAoh3VYtaSggm9vNCBj%2Fsocial_gallery_video_feature.png?alt=media&amp;token=553e3dce-0660-41fa-912e-e63c4b47e93c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FAjSYhj4CHWTVYLepyz8v%2Fsocial_media_video_2.png?alt=media&amp;token=a970164a-9c8c-4de7-9752-dc611dea0a1b" alt=""><figcaption></figcaption></figure>

* Added 'Custom svg code' feature to the Text with icons section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXLdjGJkSukErZtE5NLn4%2Fcustom_svg_code.png?alt=media&amp;token=271e8eb7-7e49-4a32-aac3-7d0652c843bc" alt=""><figcaption></figcaption></figure>

* Added a 'Number of columns' setting for mobile in the Testimonials section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRbAQ8Hg529U5pfvrZdHd%2Ftesti_mobile_col.png?alt=media&amp;token=4abf2336-3055-4e9e-af0a-9727b79ffc46" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Added content effect to multiple banner-related sections.
* Resolved price filtering issue on collection page for Safari and Firefox browsers.
* Added smooth rotation transition to the caret icon on header menu label hover.
* Fixed overlapping issue of collection titles in the search modal.
* Fixed banner height in the Featured Collection section.
* Fixed content alignment to maintain proper page width in Lookbook section when full-width is enabled.
* Made the image sticky in the Collapsible content section.
* Resolved main media update issue when changing variants in Quick View with 2-column desktop layout.
* Resolved size chart popup opening issue in Quick View modal.
* Resolved some minor spacing related bugs across the entire theme.
* Improved overall site performance.


# Version 2.0.5

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

&#x20;`06 March 2026`

#### Fixes and other improvements

* Added a new 'visible\_if' condition as per the latest Shopify update to ensure users do not face confusion while using settings.
* Fixed a design break issue that occurred when dynamic variants were present in the product card.
* Resolved an issue where YouTube videos were not loading in the video section.
* Fixed a UI issue on the collection page where hover effects on active filters made the text difficult to read.
* Resolved an issue with small-width images in product variants.
* Improved the UX of the Scrolling Bar section by adding a cursor indicator.
* Fixed a mobile UI issue in the newsletter popup where the field and button heights were inconsistent.
* Resolved a text cutting issue in the Rich Text section when the Read More feature was enabled by default.
* Fixed the missing hover effect on the Quick View button on product cards in mobile view.
* Fixed a loader icon color issue in Quick View on mobile devices.
* Improved the user experience of the subtitle in the Image with Text section by properly setting the cursor behavior.
* Fixed several minor hover effect issues across the site.
* Improved overall site performance and accessibility, and removed unnecessary CSS code.


# Version 2.0.4

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

&#x20;`30 January  2026`

#### Added

* Added a new "Slider Arrow Position" setting in the multicolumn section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FoDV854KxsI0fq3MTBbMM%2Fmulticolumn.png?alt=media&amp;token=aca806f0-ebd2-424a-a56d-107fb07f8de8" alt=""><figcaption></figcaption></figure>

* Added a new "Enable Only Quickview Icon" setting in global settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRoWoFZVeD82dMiosgkuV%2Fquickview-btn.png?alt=media&amp;token=e88156e0-4ed4-4898-abcf-c56bbd8d5b72" alt=""><figcaption></figcaption></figure>

* Added a "Collection Title Style" feature for the cart in global settings, which will be used for default collections.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxNbpSDA0YpP6IDgjlZqK%2Fcart.png?alt=media&amp;token=61e0f6d1-cc9d-4ef5-a76a-0678d2f24eaf" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Resolved an issue where the background color and text appeared the same when the sticky header\
  was disabled on mobile devices.
* Fixed a design issue where predictive search results were not displaying correctly in the Safari browser.
* Resolved an issue where the menu box was getting cut off in responsive view when no child menu was present.
* Fixed an issue where default collection images appeared blurry in the cart drawer.
* Fixed UI inconsistency in Quickview where "Add to Cart" and "Buy It Now" buttons had different heights.
* Improved UX by fixing the "Apply" button design at the bottom on tablet devices on the collection page.
* Fixed UI issues in the tab product section and properly highlighted the active tab.
* Increased spacing for the mobile drawer badge in the header to improve readability.
* Enabled modal close on overlay click in the newsletter popup to improve UX.
* Fixed an issue on mobile where the Quickview icon and loader overlapped on product cards.
* Resolved an issue where the marquee did not appear in the slideshow when a video was used.
* Fixed an issue where the TikTok icon was getting cut off in the announcement bar.
* Made the "Go to Top" button border radius dynamic instead of static.
* Updated to the latest Shopify version and added the "Visible If" setting to all sections so users only see relevant and useful settings.
* Added image information in both section-level and global images to prevent upload size issues.
* Added a new hover effect to buttons to enhance UI and UX.


# Version 2.0.3

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

`2 December  2025`

#### Added

* Added a feature to display the collection title in the cart drawer block within the global settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwwpmsOmtoo0hDHpvEChg%2Fglobalcart-setting.png?alt=media&amp;token=07cf80c0-b3ee-436c-bf04-454a5060740b" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Enhanced overall performance and accessibility, resulting in higher Lighthouse scores.
* Improved spacing-related issues on the blog page.
* Fixed the issue where the selected variant was not being added to the cart in the product tab section.
* Improved the collection filter design for a better user experience.
* Enhanced blog image visibility on mobile devices.
* Fix header search overlay cut issue.
* Improved content overlap issues in the slideshow section on responsive devices.
* Enhanced collection image visibility on mobile devices.


# Version 2.0.2

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

`12 September  2025`

**Added**

* Added a new Image Overlay section that allows blocks to overlap and swipe.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwgMROmlQAygGgEiMBm7I%2Fimagebanner-mobile-content.png?alt=media&amp;token=3429634a-e540-413d-80c9-217e523551cd" alt=""><figcaption></figcaption></figure>

* Added custom font size options for Slideshow block headings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FzfovUfWgyjiN7dOSvM48%2Fslideshow-block-custom-heading.png?alt=media&amp;token=d77813af-bc1a-47fe-8434-35cffe99a5d5" alt=""><figcaption></figcaption></figure>

* Added "Enable Rounded Image" setting in the Collection List section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FziDabbqDDZFTbFCy0tvm%2Fcollection-list-rounded-img.png?alt=media&amp;token=3c9340bd-246e-4583-a78f-057c0c1cc5b6" alt=""><figcaption></figcaption></figure>

* Introduced "Image Size on Desktop" setting in the Scrolling Bar section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F8eMKiXXFr2l8ODOv6VXh%2Fscrolling-bar-image-size.png?alt=media&amp;token=ee50af0c-bcfd-402e-ac29-c9df97d95aef" alt=""><figcaption></figcaption></figure>

* Added "Enable Icon Background" feature in the Text with Icon section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwFWlj8QZlA5TGVvxtMgI%2Ficon-with-text-icon-bg.png?alt=media&amp;token=ce084695-4418-4cc4-a933-09a3e6c3a9b5" alt=""><figcaption></figcaption></figure>

* Added a "Text" block to the Video section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJ1kdn0ufgCnbAxdI4VlX%2Fvideo-text-block.png?alt=media&amp;token=8442e5db-cf8d-43f8-a663-fc67ee831500" alt=""><figcaption></figcaption></figure>

* In the Header, added options for two types of Customer Account icons.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSwMmFmtY9ERo7W7KSE2V%2Fheader-account-icons.png?alt=media&amp;token=7ca160c6-b67c-471c-b89c-a52c5e314a75" alt=""><figcaption></figcaption></figure>

* Added a "Popup Modal" feature in the Custom Text section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0WMO90BvdhupIJvMt8ct%2Fcustom-text-popup-model.png?alt=media&amp;token=3c0b4d4b-1cff-4b8e-85c0-ae437033d70a" alt=""><figcaption></figcaption></figure>

* In the Image Banner section, added "Mobile Content Alignment" and "Mobile Content Position" options.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F7YjKVwkURrP8QtskhcoK%2Fimage-banner-mobile-content.png?alt=media&amp;token=3534a106-5117-445c-b142-c234e0eedb45" alt=""><figcaption></figcaption></figure>

* In Global Settings > Typography, added a new "Text Transform" setting.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F6KxhHTw41TN154CEz9Fl%2Ftypography-text-transform.png?alt=media&amp;token=fa91fdad-867e-4826-b907-60e8565cc19b" alt=""><figcaption></figcaption></figure>

* In the Global Product Card, added "Heading Size" setting for custom fonts.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FjD7bNQqAiDiMXDQ5sjJ3%2Fproduct-card-heading-size.png?alt=media&amp;token=4b42f527-f9cc-4f7b-a1b8-ef5ba2bb55bb" alt=""><figcaption></figcaption></figure>

* Added "Make Heading Text Bold" option under Product Card in Global Settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FWkQUvsvgznRDTr4BpJEK%2Fproduct-card-heading-bold.png?alt=media&amp;token=3aa45d3c-bc42-41b1-bcd5-23bb7b8d11c0" alt=""><figcaption></figcaption></figure>

* Added "Swatch Style" options (Oval and Rounded) for variant design in Global Product Card.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FeS4beur1RJBm1M7SQq6z%2Fcard-variant-swatch.png?alt=media&amp;token=9a29d067-f270-4d3b-ac11-6b2486b4e37f" alt=""><figcaption></figcaption></figure>

* Added "Body or Heading" Font Family setting for menu text in the Header.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FG0Zf3JfDhyOe9IkpN5Oh%2Fheader-menu-text-settings.png?alt=media&amp;token=59f64ce9-2dd8-4bc9-9d66-1c3d634931e4" alt=""><figcaption></figcaption></figure>

* Introduced Custom Font Weight setting for menu text in the Header.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FUkj6IGosRIn7tBgjtPt3%2Fheader-menu-font-weight.png?alt=media&amp;token=72b10daa-7999-46aa-8477-dde27bfcdd82" alt=""><figcaption></figcaption></figure>

* Added "Heading Gradient Color" feature for block headings in the Slideshow section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FJlfecwA3XzfgosuRVn2i%2Fslideshow-block-heading-color.png?alt=media&amp;token=b33c524e-c49c-4a7f-bcf2-9e203bb561f2" alt=""><figcaption></figcaption></figure>

* In the Collection Page Banner, added Mobile Content Position and Alignment settings.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FM6Y0NLk0lsrO6ZyMLNG8%2Fproductgrid-media-mobile-content.png?alt=media&amp;token=07233c26-487a-4046-8741-74a7f18e02c3" alt=""><figcaption></figcaption></figure>

* Added a new "1.5 Column" (half-cut) option for mobile in the following sections:&#x20;
  * Collection List
  * Multicolumn
  * Social Gallery
  * Related Products
  * Collection Tab

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F6yKchpLuVEjxliCO9tuV%2Fsocial-gallery-mobile-column.png?alt=media&amp;token=2424f964-1b75-487f-9eb1-7e20f3e3c088" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Fixed text alignment issues in placeholders within the Collection List section.
* Fixed border-radius issues in the Collection List.
* Resolved mobile text overlap issues in the Scrolling Bar section with separator text.
* Fixed cover image issue when hosting videos in the Video section.
* Fixed text-button overlap issues in the Video block and improved UI alignment.
* Resolved word-break issue in the Custom Text section.
* Fixed alignment information errors in the Image with Text section.
* Removed unwanted blank space above the image in the Quick View Modal.
* Fixed minor translation and UI/UX issues throughout the theme.
* Improved overall performance and accessibility, resulting in better Lighthouse scores.


# Version 2.0.1

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

`05 August 2025`

#### Added

* Added 'Outline Button' style option for Collection Name in the Collection List section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F8rMhd7oNeKeFKBZo1xEw%2Fcoll.png?alt=media&amp;token=f18da3f2-bec1-4cd7-9f3d-295a21b80ce3" alt=""><figcaption></figcaption></figure>

* Added 'Link, Outline, Solid' button style options to the Lookbook block.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FskEfV5eaRlZOzpOZAHdM%2Flookbook.png?alt=media&amp;token=10e7bc11-9c83-446d-a782-5e039dc8e489" alt=""><figcaption></figcaption></figure>

* Added a 'Link' option in the Image with Text block of the Scrolling Bar section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FVIUtehYrJY6OwPS2bkXF%2Flink.png?alt=media&amp;token=99ea7e07-2147-4548-ab85-60210b692c1e" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Fixed tab index issue in the Load More feature on the Collection page.
* Resolved a console error that occurred when changing variants in Combined Product if the first product image was blank.
* Fixed spacing issues in Rich Text where top/bottom spacing was getting affected.
* Fixed font issue in the Featured Product section.
* Added spacing to Image Banner when set to full width, as the UI appeared cluttered.
* Resolved radius and spacing issues when the Image with Text section was set to full width.
* Properly aligned the UI in the Countdown Timer section.
* Improved UX by adding hover functionality to quantity in the Cart hover.
* Fixed hover design issue for color filters on the Collection page.
* Resolved width issue of the Sidebar Image Banner on the Blog page.
* Fixed issue where Quick View Close Button was difficult to tap.
* Resolved country flag alignment issue in Localization.
* Fixed dot overlapping issue on product images in the Lookbook.
* Resolved border-radius issue in Full-Width Header Mega Menu.
* Fixed SVG shrink issue on product card hover to enhance cart UX.
* Made Header animations smoother during open and close actions.
* Resolved banner height issue in tablet view on the Collection page.
* Fixed issue in Collection Filter where filters could not be removed after search.
* Made minor spacing and UI/UX adjustments across the theme.
* Improved performance and accessibility lighthouse scores.


# Version 2.0.0

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

`19 June 2025`

#### Changed

* Updated the file structure to follow Shopify's new system, making it easier to set up presets exactly like the live demo.


# Version 1.0.6

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

`5 May 2025`

#### Added

* <mark style="background-color:yellow;">**Important:**</mark> Combined listing functionality for product variations.
* Added a new feature for add a link in the main menu.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F9lgixj7IiUtMa0p7IZ2R%2Fmenulink.png?alt=media&amp;token=1452db66-083e-4edd-a766-0c72f6dc6aba" alt=""><figcaption></figcaption></figure>

#### Changed

* Moved all features related to product cards in section settings to global settings in "cards."

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FsbYBTJDyPhIZm48ewy42%2Fsitar-variant.png?alt=media&amp;token=0e138894-7892-4866-8d5f-2e42f9bc7344" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Optimized overall theme performance for faster load times and smoother functionality.
  * Fixed some alignment issues for UI/UX improvements.
  * Resolved some design and spacing related bugs across the entire theme.
  * Make sticky header smooth effect.
  * Fixed the overlay in the search modal on mobile.
  * Fixed the slider arrow size on all devices.
  * Resolved the issue with the Country and Language selector dropdown not closing in some device.
  * Aligned the position of the inline slider arrows.
  * Resolved the double border issue in the active variant.
  * Fixed the color issue of the icon of the blog sidebar.
  * Resolved the grid issue in the media of the featured product section.
  * Fixed the the timer text wrapping in the product card on mobile device.
  * Resolved the sidebar on the blog page was not closing on outside click.
  * Fixed the alignment of the image and text in the product card of the social media gallery section.


# Version 1.0.5

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

`31 January 2025`

#### Added

* Added a feature to enable the country flag in the announcement bar and footer.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FXCruMbGTLhyy4D5cObMV%2Fsitar1.png?alt=media&amp;token=eeff1617-87fe-4323-8be8-4fc7dbc5eeb1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRX4ngwe3LHbVcpRTeWiq%2Fsitar2.png?alt=media&amp;token=455cfc22-0482-4b63-95e8-2d16c486af41" alt=""><figcaption></figcaption></figure>

* Added a new section for images with products.
* Added features related to images, products, and product positioning.
* In this section, when a point on the image is clicked, the image zooms in, and when double-clicked, the image zooms out while also activating the related product.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHsnAK2a2r6uZmNfEgIAX%2Fsitar3.png?alt=media&amp;token=2a308852-4f35-4f85-aa1f-c7cfbbd6c205" alt=""><figcaption></figcaption></figure>

#### Changed

* Shopify will phase out many fonts, meaning themes must stop using those outdated fonts.\
  Since our presets relied on fonts that are now being deprecated, we've swapped them with\
  new ones. Shopify will notify merchants using deprecated fonts and provide suggestions for suitable alternatives.
* Changed the compare price font size for a better appearance of the product card.

#### Fixes and other improvements

* Improved the Quickview popup design by adjusting the gap between the media and information.
* Reduced the gap in the footer block.
* Fixed the issue with multiple "Read More" buttons in the Rich Text section.
* Reduced extra spacing in the Instagram section and the icon with text section.
* Removed extra space in the header when the text with icon info is blank.
* Fixed the separator overlapping issue in the slideshow and scrolling bar section.
* Removed the bottom radius in the product card when the style is set to "Card."
* Fixed the issue with the product timer expired message where words were breaking improperly.
* Fixed the social icon background issue in the Instagram section.
* Fixed the alignment issue in the Collapsible Content section.
* Fixed the image overlay radius issue in the compare image section.
* Fixed the background image repeating visibility issue in the countdown timer section.
* Fixed the description icon color issue in the product description.
* Fixed newsletter popup without enter email id submitting issue.
* Adjusted the space between product information blocks.
* Fixed the corner radius issue in the collection banner on the collection page.
* Fixed a bug where the "Show Featured Image" option was disabled and the design type was set to "Content over the Image."
* Fixed the border cutting issue in the horizontal filter layout on the collection page.
* Fixed the overlay opacity issue for mobile devices.


# Version 1.0.4

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

`14 December 2024`

#### Added

* A new global setting has been added for selecting the review app for product card reviews.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FnqFWMw0D9BSljir34IJn%2Freview.png?alt=media&amp;token=f5fa6cb4-5888-4181-9bb5-479e56512848" alt=""><figcaption></figcaption></figure>

* Meta swatch can now be applied on the collection page as well.
* A new feature has been added to hide the "largest content" button in the rich text section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FqoKX7lNwG9od5qsi0coV%2Fhide_content_button.png?alt=media&amp;token=da8ff4d2-5203-496e-83f2-c8f4c259004e" alt=""><figcaption></figcaption></figure>

* A new global setting for controlling the visibility of the breadcrumb on the product page has been added.
* A new global setting for controlling the visibility of the breadcrumb on the collection page has been added.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSDsFb1wpNKkjsAB8qqBp%2Fbreadcrumb.png?alt=media&amp;token=078574b2-a498-4ab9-9e6d-2795cfe4eba7" alt=""><figcaption></figcaption></figure>

#### Changed

* The height of the "Add to Cart" button has been decreased for mobile devices only.

#### Fixes and other improvements

* The issue with image height for blog images without article images has been fixed.
* Extra blank space in the sidebar in horizontal or drawer filter layouts has been fixed.
* A bug in the newsletter popup, where there was an alternating open and close effect, has been fixed.
* The stock bar design on the product card has been fixed.
* Side space in the box header has been managed.
* An extra border in the search drawer has been removed.
* The issue with variant change image updates in the quick view popup has been fixed.
* The issue with variant visibility in the tab product section in the quick view has been fixed.
* The "Add to Cart" functionality in the tab product section has been fixed.
* The issue of two videos playing at the same time on the product page when set to loop has been fixed.
* The issue with the popup heading italic font style and font size has been fixed.
* The collection banner full-width radius issue has been fixed.
* The banner image visibility issue when the banner height is set to small, medium, or large has been fixed.
* The issue of overlapping text in the email field when text is entered has been fixed.
* The issue with search suggestions being cut off on tablet devices has been fixed.
* The singular or plural form of the "article comments" word in blog cards has been fixed.
* The issue with the "Load More" product count on the collection page has been fixed.
* The product thumbnail slider icon disable identity issue on the product page has been fixed.
* The announcement direction issue when changing slides multiple times has been fixed.
* The issue with the "Add to Cart" functionality breaking in the collection list view design has been fixed.
* The search drawer overlay design has been improved.
* The empty card drawer design on mobile devices has been improved.


# Version 1.0.3

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

`22 October 2024`

#### Added

* A new setting has been added for the timer ending message for every countdown in the theme.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Flgu6akv1cerZJPCdA1qU%2Ftimer-text.png?alt=media&amp;token=4bd5dcaa-5498-460d-87d0-36c2b97cf8d1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYW1fZNyFcV0tvjXiRHzx%2Ftimer-text2.png?alt=media&amp;token=f6b29778-17b8-434b-af3f-31773f4d9274" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fh29QNL1lxHxjqatVdQHA%2Ftimer-text1.png?alt=media&amp;token=48adcf78-8e1d-4ebb-a894-088c0d8264c8" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Enhanced color variant swatches for product variants.
* Design Fixes: Various design-related issues throughout the theme have been addressed.
* Corrected grammatical errors across the entire theme.
* Fixed alignment issues throughout the theme.
* Resolved accessibility issues with the open megamenu on hover in the header.
* Fixed a separator design issue in the blog posts section.


# Version 1.0.2

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

`05 September 2024`

#### Added

Important: Product Banner Section: Added a new section for showcasing special offers on specific products.

* Important: Collapsible Product Description: Added a new liquid field in the product page's collapsible row block to display product descriptions within the collapsible section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYxjnWZJND5XRqwpqThhO%2Fproduct-description.png?alt=media&amp;token=9d8ad5e9-4fe6-449e-b768-fb460bb483d9" alt=""><figcaption></figcaption></figure>

* Scrolling Bar in Slideshow: Added a scrolling bar feature in the slideshow section.
* Scrolling Bar Settings: Added settings for the scrolling bar, including "Direction," "Separator between Text," and "Space between Items."

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FSdbSyQ5ItGampi479bLQ%2Fscrolling.png?alt=media&amp;token=e101eb80-be33-4782-84d9-da86089a2b15" alt=""><figcaption></figcaption></figure>

* Auto Play in Collection List: Added an auto-play feature for the collection list.
* Collection Image Options: Added a new feature to use either the collection image or the first product image in a collection.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FaR0jb9JqtpK2YU6snUfO%2Fauto-play.png?alt=media&amp;token=3a4bfbb3-68b2-473a-9207-c65abe3b861e" alt=""><figcaption></figcaption></figure>

* Quick View Position: Added a new feature to customize the position of the quick view.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGuBFoUvj7Gkho6OTcmTe%2Fquick-view_position.png?alt=media&amp;token=3c97cadc-280e-45ec-843e-a00a7b2a9705" alt=""><figcaption></figcaption></figure>

* Video Ratio Feature: Added a new option to adjust the video aspect ratio.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRu4DICe7S0YCE0zpq5ki%2Fvideo-ratio.png?alt=media&amp;token=533418a6-2f94-4ecf-9056-42f084da38c9" alt=""><figcaption></figcaption></figure>

* Custom Badge in Featured Product Section: Added a new feature for custom badges in the featured product section.
* Personalized Label in Featured Product Section: Added a new feature to include personalized labels in the featured product section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNwSkjdB3KHHEQFFpC1MF%2Ffeature-product.png?alt=media&amp;token=2a19a760-78a7-42a5-8044-ced08998e9ba" alt=""><figcaption></figcaption></figure>

* Background Image/Color in Collection Tabs: Added options to set a background image or color in the collection tabs section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F7r7yvat4RvyylrqdfjIY%2Fbg-color.png?alt=media&amp;token=654d58a7-38cc-46cf-9a55-1ce33318b9a7" alt=""><figcaption></figcaption></figure>

* Alignment Options in Collection Tabs: Added a new alignment option, "Next to Product," in the collection tabs section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMIV0pWomaHoTExg3DP5x%2Fnext.png?alt=media&amp;token=1811f176-b265-427a-9519-d480d64192f3" alt=""><figcaption></figcaption></figure>

* Image Radius Management: Added a new feature to manage image radius in the scrolling bar section.
* Testimonials Product Position: Added a new feature to customize the position of products in the testimonials section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlBNgvY871z4kbSbyWhU5%2Fproduct-position.png?alt=media&amp;token=9d944a10-62eb-49a9-80a3-3a6ecc0b8700" alt=""><figcaption></figcaption></figure>

* Author Image Visibility in Testimonials: Added a new feature to hide or show the author's image in the testimonials section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fr4KohbGG83oHHzfDN6zU%2Fhide-image.png?alt=media&amp;token=465be475-3121-4cfd-9a06-d79c2f1f2412" alt=""><figcaption></figcaption></figure>

* Text with Icon Slider/Grid: Added a new feature to display text with icon content as a slider or grid.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F0eShG5jvuNKINFMd0O2w%2Ftext-icon.png?alt=media&amp;token=3fe2482f-4815-48ff-a990-38d6f3807c93" alt=""><figcaption></figcaption></figure>

* Top Padding for Headings/Subheadings: Added an option to adjust the top padding for headings and subheadings in the text with icon section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FM9IwLzHTuUqyvH3Nduue%2Fpadding.png?alt=media&amp;token=2d1e5a11-8354-486b-8a2c-1c7090b2b616" alt=""><figcaption></figcaption></figure>

* Lookbook Collection List: Added a new feature to select a collection list in the lookbook section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOCNmllwDqQOVUtg4FCnA%2Flist.png?alt=media&amp;token=c3125dee-0479-4697-8908-4537b0a155dc" alt=""><figcaption></figcaption></figure>

* Lookbook Product Preview Style: Added a new feature to customize the preview style of products in the lookbook section.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FN1rpuiZGoJSMSR0Xkfr5%2Fstyle.png?alt=media&amp;token=f87ed6e5-05e7-428d-bbe1-44d8afd8ee01" alt=""><figcaption></figcaption></figure>

* Social Media Gallery Section: Added a new section to display a social media gallery and promote your business across platforms.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FUHIWZCdY0wX0qzvqzyxi%2Fsocial.png?alt=media&amp;token=be8fe409-7086-4e86-a09c-d0e36a22ca0e" alt=""><figcaption></figcaption></figure>

* Sticky Vertical Filter on Collection Page: Added a new feature for a sticky vertical filter that remains visible on scroll on the collection page.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F7PnB2dZ8xG9bVr7w8sse%2Ffilter.png?alt=media&amp;token=a2592d57-c703-4ba4-b33a-f410e199de96" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

Country Search Functionality: Improved the search functionality for country selection.

* Drawer Filter Design: Enhanced the design of the drawer filter.
* Fix menu hover visibility issue.
* Customer Avatars Display: Improved the display of customer avatars.
* Newsletter Popup Issue: Fixed an issue with the newsletter popup where the open and close effects did not work correctly when selected differently.
* Slider Arrow Visibility on Tablets: Fixed an issue with slider arrow visibility on tablet devices.
* General Design Issues: Fixed various design-related issues throughout the theme.


# Version 1.0.1

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

`03 June 2024`

#### Added

* Added new setting 'Top center' for logo position in header.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FF0uzIIy2mXCSphzsmxoP%2Flog_1.png?alt=media&amp;token=c848c3ae-8453-451b-96d7-c36c74c88d6f" alt=""><figcaption></figcaption></figure>

* Added background color on hover when transparent header is enabled.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fvqq42qdR3k6HjHs4muO8%2Flog_2.png?alt=media&amp;token=dde4cd8a-4aca-4d66-a4c0-e37f51fef0d2" alt=""><figcaption></figcaption></figure>

* Added new setting 'Image' for pagination style in slideshow.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FD5n2kXA4LyzuacAJ0mUE%2Flog_3.png?alt=media&amp;token=e65e7c33-93e5-48cb-9538-6a463541c8cf" alt=""><figcaption></figcaption></figure>

#### Fixes and other improvements

* Fixed the slider height issue when Mobile image is selected in Slideshow.
* Fixed the spacing issue on card in featured collection.
* Fixed the alignment issue of description in featured collection.

#### Removed

* Removed 'Mobile logo', 'Sticky mobile logo' and 'Mobile logo width' option in Logo setting.


# Version 1.0.0

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

Initial release