# Featured product

{% hint style="success" %}
**Tip:** Product information will be displayed for a product with the configured settings in your *Shopify admin -> Products*. Read more about setting up products and collections in the admin [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/products).
{% endhint %}

## Featured product

Connect a desired product with the section using the **"Product"** selector. If you need to create a new product, press the **"Create product"**  button to navigate to your *Shopify admin -> Products*.

The **"Action after selecting a variant"** contains options for grouping images by the selected product variant. To deactivate this functionality, select the "No" option.

{% hint style="warning" %}
**Note!** If you use one of the options described below, firstly, group images by product variants in your *Shopify admin -> Products*. Read the detailed instructions on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-group-product-images-by-variants).
{% endhint %}

* **"Hide other variants' media"**. This option is relevant if each color variant includes a single image in your admin. To hide images of unwanted color variants, select the current setting from the drop-down. Otherwise, all product images will be displayed in the gallery. The product variant images can be replaced with the appropriate ones when you select another variant.
* **"Group gallery by options"**. Group product images by the selected color variant. Images related to another color variant will be hidden. Initially, all product images will be displayed in the gallery when landing on a product page. This functionality is triggered by pressing the color swatch.

{% hint style="success" %}
View the example of the functionality on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/products/interior-sofa-decoration-set).
{% endhint %}

* **"Group with tag 'group-gallery'"**. This option works the same as the "Group gallery by options" in the storefront, with one exception: you can specify products in your admin to apply this functionality. Activate the option for a particular product using the tag 'group-gallery' in your Shopify admin -> Products. This option is unavailable for products without a custom tag.

Use the **"Enable sticky product information"** option to fix the product details while scrolling down the page to the bottom of the product gallery. Works for only the large screens.

### Gallery

In the **"Layout"** drop-down, select the type of image gallery on the desktop view:

* **"Only first image"**. Use this option to display only the first image of the related product variant without a product gallery, regardless of the settings applied in your admin.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVYlnJEWy0Kgo6vFUepuJ%2Ffeatured%20product_first%20image.png?alt=media&#x26;token=9aa6ae85-34bd-4a72-8418-1cc8571210ca" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** The following options can be applied to host the image gallery. Using one of these options initiates a view of product images assigned to product variants in the admin. The first image will be replaced with the corresponding one when clicking the color variant. The product variants can not be changed by hitting an image in the gallery.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjaaT12rVicXQuGbpIYtl%2Fadmin_product%20variant%20images.png?alt=media&#x26;token=b4a6a789-e168-4dad-8595-5e7fd130c686" alt=""><figcaption></figcaption></figure>

* **"Stacked"**. The following layout displays the main product variant image across the media width with two additional images in each row underneath.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FuOi4mrB209WnCQQWRz25%2Ffeatured%20product_stacked.png?alt=media&#x26;token=22767059-abc6-4ee6-9919-600f6d282e2f" alt=""><figcaption></figcaption></figure>

* **"2 columns"**. This layout portrays two images in each row.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FyYl5mjUSln9x25MjuxLw%2Ffeatured%20product_2%20columns.png?alt=media&#x26;token=8e2688b6-b409-414e-a171-1dd4f753a12b" alt=""><figcaption></figcaption></figure>

* **"Thumbnails"**. Show the image gallery below the main variant image by activating the current option.

{% hint style="success" %}
The "Thumbnails" option can be viewed on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/products/interior-sofa-decoration-set).
{% endhint %}

* **"Thumbnail carousel".** To place an image carousel instead of a thumbnail list underneath the product image, select the option.

{% hint style="success" %}
The "Thumbnail carousel" option can be viewed on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-sunny.mpthemes.net/products/sand-dune-one-piece-tankini-2).
{% endhint %}

Once selecting the **"Thumbnail carousel"** option above, use the **"Thumbnails in row"** scale (ranging from 4 to 10) to determine the number of visible thumbnails in the carousel on the desktop view.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FwTlAimvAKjoqIRgWX8CF%2Ffeatured%20product_thumbnails%20number.png?alt=media&#x26;token=94b4f953-c414-41d8-9582-55b498dd710d" alt=""><figcaption></figcaption></figure>

The full-width image gallery can be used if the **"Enable lightbox"** has been enabled. The zooming logo will be placed in the bottom right corner of product images on all screen sizes. To view the zooming logo on the desktop view, hover over each image. The zoom-in icon is designed to appear on mobile without the mouse hover.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FX13tKhjV7mEiylhBQ3Yl%2Ffeatured%20product_lightbox.png?alt=media&#x26;token=aa7a648a-14c3-49df-b866-0225886d2eef" alt=""><figcaption></figcaption></figure>

If you filled in the product information with video content in your admin, enable the **"Enable video looping"** option to display a video continuously.

Activate the **"Enable zoom scale"** option to use the feature. The zooming coefficient scale will be displayed after activating the option.

To change the image zoom for the desktop view, use the **"Zoom coefficient"** scale from 1 to 5 in increments of 0.1 to 0.9 points. If you leave the default value equal to 1, image scaling will be disabled.

### Media

{% hint style="success" %}
**Tip:** Due to the wide range of interaction options, explore media settings to achieve the best look of a product page.&#x20;
{% endhint %}

The screen width filled with a product media/image gallery can be set in the **"Width"** picker. Hit the "Small", "Medium", or "Large" options to change the gallery size. This functionality determines the size of the image gallery in relation to product information. The area allocated for product information will be reduced when selecting "Medium" or "Large" options. These settings only work on large screen sizes.

{% tabs %}
{% tab title="Small" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FwuvwFHMnsro3rRFb5NTd%2Ffeatured%20product_media%20small.png?alt=media&#x26;token=826fbb20-8e6e-44c0-a010-106c49c65a2d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Medium" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtxrUiJAolgsZVG1dGEQN%2Ffeatured%20product_media%20medium.png?alt=media&#x26;token=d54c850b-0554-4b43-bdd2-9eac511abdca" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Large" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FWGS50ZG6dF1pUlEsOwKT%2Ffeatured%20product_media%20large.png?alt=media&#x26;token=64e01458-75a0-43b9-be1c-27499323a0e1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Swap the image gallery to the left or right in the **"Position"** picker. These options work on the desktop view.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FGyWsXs6WEDR0zaPdu2Sw%2Ffeatured%20product_position.png?alt=media&#x26;token=f79f122f-2a4d-40f3-8ce7-3b1edf719de2" alt=""><figcaption></figcaption></figure>

By activating the "Constrain media to screen height" feature, you can further control the populated area to display a main product image in its original size or fill in the entire media width. Operate an image appearance in the **"Fit"** to "Original" or "Fill".

If you used "Medium" or "Large" options in the width picker above, you can limit the size of the main product image to fit the screen by checking the **"Constrain to screen height"**.

### Section layout

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the **"Dividing line"** drop-down. It will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Mobile settings

In the **"Gallery layout"** drop-down, change the image gallery appearance on mobile view. Select one of the options that works best for your store design:

* **"Only first image"**. Use this option to display only the first image of the related product variant, regardless of the settings applied in your admin.
* **"Thumbnails"**. To show the image gallery below the main image, select the provided option.

{% hint style="success" %}
View the example of the layout on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/products/interior-sofa-decoration-set).
{% endhint %}

* **"Arrows"**. The product image navigation can be illustrated as arrows with the number of available product images located centrally.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F0nUujSdbLna54EAij0By%2Fgallery%20layout_arrows.png?alt=media&#x26;token=57258504-08ff-491e-88b4-aee26bef5dd0" alt=""><figcaption></figcaption></figure>

* **"2 columns and bullets"**. The current option implements navigation through the product images using markers. The number of markers-rectangles indicates the available images in the product gallery.

<mark style="color:orange;">**Note!**</mark> This option can be a useful solution for product galleries with a limited number of product images that display rectangular markers in a line.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F9nZHz5N2KDtRJqjO4hDs%2Fgallery%20layout_2%20columns%26bullets.png?alt=media&#x26;token=37600315-d933-48ce-bfbf-c55346cfea76" alt=""><figcaption></figcaption></figure>

* **"2 columns and arrows"**. The product images will be placed next to each other, two items per row, and will rotate one at a time when pressing the arrows below the product gallery.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FzNRPUKnV2yRbSKQL2YkZ%2Fgallery%20layout_2%20columns%26arrows.png?alt=media&#x26;token=093bc6fc-01c0-4e3f-b8ca-2452039c7f71" alt=""><figcaption></figcaption></figure>

The product information (such as title, price, SKU, product type, collection, inventory status, stock, and question popup, share, and popup) can be aligned to the left or center on mobile view by selecting the required option in the **"Text alignment"** picker.

### Transparent header

The provided setting is applied to the "[<mark style="color:blue;">Header - transparent</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/advanced-settings)" feature.

Enable the **"Invert header colors"** to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "[Background](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#base)" item.

## Theme Blocks

{% hint style="success" %}
**Tip:** Use dynamic blocks to display only the selected product information. Change the position of each block by dragging it up or down to the desired place in the product information section.
{% endhint %}

The "Featured product" section can be added with the dynamic content blocks, such as: "[<mark style="color:blue;">Text</mark>](#text)", "[<mark style="color:blue;">Title</mark>](#title)", "[<mark style="color:blue;">SKU</mark>](#sku)", "[<mark style="color:blue;">Collection</mark>](#collection)", "[<mark style="color:blue;">Product type</mark>](#product-type)", "[<mark style="color:blue;">Price</mark>](#price)", "[<mark style="color:blue;">Time countdown</mark>](#time-countdown)", "[<mark style="color:blue;">Free shipping</mark>](#free-shipping)", "[<mark style="color:blue;">Delivery countdown</mark>](#delivery-countdown)", "[<mark style="color:blue;">Inventory status</mark>](#inventory-status)", "[<mark style="color:blue;">Quantity selector</mark>](#quantity-selector)", "[<mark style="color:blue;">Variant picker</mark>](#variant-picker)", "[<mark style="color:blue;">Buy buttons</mark>](#buy-buttons)", "[<mark style="color:blue;">Stock and question popup</mark>](#stock-and-question-popup)", "[<mark style="color:blue;">Availability status</mark>](#availability-status)", "[<mark style="color:blue;">Question popup</mark>](#question-popup)", "[<mark style="color:blue;">Description</mark>](#description)", "[<mark style="color:blue;">Icon with text</mark>](#icon-with-text)", "[<mark style="color:blue;">Share</mark>](#share)", "[<mark style="color:blue;">Custom liquid</mark>](#custom-liquid)", "[<mark style="color:blue;">Collapsible tab</mark>](#collapsible-tab)", "[<mark style="color:blue;">Pop-up</mark>](#pop-up)", and "[<mark style="color:blue;">Complementary products</mark>](#complementary-products)". Each block can be moved to the needed position in the product information section.

You can add the following blocks more than once: "Text", "Icon with text", "Custom liquid", "Collapsible tab", and "Pop-up".&#x20;

### Text

Use the block if you need to add a product subtitle, paragraphs, promotion text, and more. The **"Text"** field allows you to paste any text line or to choose a Metafield that will be displayed as text. Press on the dynamic source icon to add a Metafield. In order to create a metafield, go to *Shopify admin -> Settings -> Metafields and metaobjects -> Products*. How to build metafields can be read in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/metafields).

### Title

Add this block if you need to display a title in the product information section.

In the **"Mobile text alignment"** picker, set one of the options "Use section setting" or "Center". If you hit the "Use section setting" option, the [<mark style="color:blue;">mobile alignment</mark>](#featured-product) will be used from the section settings. To center the title position regardless of the section settings, use the "Center" option.

In the following example, you can view how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fx8er8HxfKqyfx1e404Zr%2Ffeatured%20product_title.png?alt=media&#x26;token=48978066-bfc2-46bc-aea8-0c9e19c96516" alt=""><figcaption></figcaption></figure>

### SKU

Use the following block to place the Stock Keeping Unit in the product information section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fxi4Mecvxm0Id9p6StgxN%2Ffeatured%20product_sku.png?alt=media&#x26;token=01430ac8-f169-43ba-a6e4-2aca1bba9936" alt=""><figcaption></figcaption></figure>

Be aware of adding the necessary information in your admin for each product.

### Collection

To display a link to a collection with the corresponding products, add the current block. You can assign each product to the required collection in your *Shopify admin -> Products -> Collections*. Read more details in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/products/details#product-organization).

In the following example, you can view how the block might appear in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FTdXU68HQAeTCccPjF6iY%2Ffeatured%20product_collection.png?alt=media&#x26;token=713e5d16-2d6f-459d-8f8a-0d64ceff0a10" alt=""><figcaption></figcaption></figure>

### Product type

To place the product type, add the block.

Here is how the block appears in the product information section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7DtNvIZWaGJswlLrxS8b%2Ffeatured%20product_type.png?alt=media&#x26;token=91349262-a709-4bb1-bc1f-34f9834df765" alt=""><figcaption></figcaption></figure>

Be aware of adding the necessary information in your admin for each product. Read more details in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/products/details#product-organization).

### Price

This block sets a price on the desired place in the section. Ensure that each product includes price settings in the admin. How to add and edit products can be read in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/products/add-update-products).

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4XEWI1aWbr2yAUkzfhJ6%2Ffeatured%20product_price.png?alt=media&#x26;token=86773a2c-b9a8-4aed-b7b7-65d762e7cf16" alt=""><figcaption></figcaption></figure>

### Time countdown

If you need to display the sale countdown on product pages, the theme allows you to add the "Time countdown" block to the product information section.

{% hint style="warning" %}
**Note!** The Time countdown is a custom feature that requires additional settings applied in your *Shopify admin -> Settings -> Metafields and metaobjects -> Products*. To display the sale countdown for an individual product page, use the Metafield functionality that is described in the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-customize-metafields).
{% endhint %}

In the **"Title"**, place the block heading.

**Colors**

Use the provided color pickers to colorize the time countdown: "Background", "Border", "Title", "Icon", "Counter background", and "Counter text".

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVln1rCBF7y28wxaigTuO%2Ffeatured%20product_countdown.png?alt=media&#x26;token=ab9b38a3-c63e-4a7c-8822-79e387ecdf7c" alt=""><figcaption></figcaption></figure>

### Free shipping

To show the Free shipping progress bar in the product information section, two steps should be completed:

* activate the option in *Theme settings ->* [*<mark style="color:blue;">Cart</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/cart#free-shipping-progress-bar);
* add the current block.

**Show top dividing line**

To show a separator line before the block, enable the option.

**Show bottom dividing line**

To show a separator line below the block, tick the checkbox.

Check the example of how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVI6euuxjkpGacjbbTrqj%2Ffeatured%20product_free%20shipping.png?alt=media&#x26;token=92fd9318-e164-4337-9322-86e6f609ec58" alt=""><figcaption></figcaption></figure>

### Delivery countdown

Use the following block to display the calculated delivery date of the products purchased in your store.

The **"Hours of the day to reset delivery countdown"** slider specifies a time of day to reset the delivery time countdown, ranging from 0 to 23 hours.

*Example:*

So, if you move the value on the slider to 14, the delivery will be shifted one day later at 2 pm every next day at the same time.

The **"Average delivery time of delivery countdown (days)"** slider allows one to set how many days will pass before the delivery date. The scale range can be set from 1 to 30 days.

*Example:*

Let's say you set the reset time to *2 pm* and the delivery time to *3 days*.&#x20;

The delivery date depends on the time the customer purchases the item from your store. If the purchase time is:

* On Thursday *before* 2 pm, the delivery time will be displayed as "Order in the next x hours x minutes to get it by Sunday xx/xx/xxxx";
* On Thursday *after* 2 pm, the delivery time will be displayed as "Order in the next x hours x minutes to get it by Monday xx/xx/xxxx".

In the **"Format of delivery countdown date"**, you can specify the date format. The supported date formats and date orders are:

* Day DD/MM/YYYY
* Day MM/DD/YY
* YY/MM/DD

Use the **"Exclude days of the week"** input field in order to paste the days of the week that should be skipped for delivery. For example, the weekends or holidays.

*Example:*

Let's say you set the reset time to *2 pm* and the delivery time to *3 days*. And then added the excluded days: *Saturday* and *Sunday*. So, if a customer purchased an item:

* On Thursday *before* 2 pm, the delivery time will be displayed as "Order in the next x hours x minutes to get it by Tuesday xx/xx/xxxx";
* On Thursday *after* 2 pm, the delivery time will be displayed as "Order in the next x hours x minutes to get it by Wednesday xx/xx/xxxx".

**Show top dividing line**

To show a separator line before the block, enable the option.

**Show bottom dividing line**

To show a separator line below the block, tick the checkbox.

Here is how this feature might be displayed in the product information section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FGfZHGFWDhrkAFCwKUe2y%2Ffeatured%20product_delivery.png?alt=media&#x26;token=00067ff0-db1b-43c6-9250-0768144b69ce" alt=""><figcaption></figcaption></figure>

### Inventory status

{% hint style="warning" %}
The "Inventory status" illustrates the number of products in stock with a green or red color point depending on the limit set in the block.
{% endhint %}

Add the block to add the stock information status and the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your *Shopify admin -> Products*.

Activate the **"Enable low inventory threshold"** option to display the inventory threshold slider.

Use the **"Threshold"** slider to set the minimum value for when the products display low inventory. The boundary value can be set from 1 to 100 items, which determines how to display the stock status of the product variant: "X in stock" or "Low stock".

* **In stock**. This information will be added to the product information section when the threshold is less than the in-stock products. The products will be displayed as always available until they are completely out of stock if you set the value to 0.
* **Low stock**. It will only be shown for products whose stock status is equal to or less than the boundary value you set on the slider.

Enable the **"Show inventory count"** checkbox to add the product count to the stock status.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FrhyTAWCvGavLgAlFHr4t%2Ffeatured%20product_inventory.png?alt=media&#x26;token=3025b464-4706-4c9e-b2c5-891e6d03867e" alt=""><figcaption></figcaption></figure>

### Quantity selector

Use the "Quantity selector" block to add a quantity input box where visitors can enter the number of products added to the cart. Or use the plus and minus symbols to increase or decrease the number of product items.

{% hint style="warning" %}
**Note!** Using the **"Show quantity selector"** in the "[<mark style="color:blue;">Buy buttons</mark>](#buy-buttons)" block hides the display of the quantity selector input box in a separate area.
{% endhint %}

Check the following example of how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbJL506qYWA5kvgvKiukO%2Fproducts_quantity%20selector.png?alt=media&#x26;token=8de1bb87-dc3f-42a2-8be0-51d4988b22ab" alt=""><figcaption></figcaption></figure>

### Variant picker

This block is valuable if you want to showcase product variants for products that have multiple options, for example, color, size, material, etc.

**Show dividing line**

To display a dividing line in front of the block, enable this option.

Choose the **"Type"** of product variants in the selector. It is presented as "Dropdown" or "Button":

In the following examples, you can view how the block might be displayed in the section:

{% tabs %}
{% tab title="Dropdown" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FlxJE8rJxjxah6tIMiFGG%2Ffeatured%20product_picker%20dropdown.png?alt=media&#x26;token=8fb5ecc4-dfa9-4dfc-9589-651a85c3efa0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FoLkzzTXovYu3yF3xgZ2q%2Ffeatured%20product_picker%20button.png?alt=media&#x26;token=58651826-9a39-445a-b686-fdd265bdd716" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The theme provides numerous options to change the design of the color variants. Read more information in the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/variant-picker).

### Buy buttons

​The "Buy buttons" block allows you to display the "Add to cart" button and dynamic checkout buttons in the "Featured product" section.

If you hit the **"Show quantity selector"** checkbox, the quantity input box will be placed next to the "Add to cart" button.

The dynamic checkout buttons help skip the process of adding products to the cart and navigate directly to the checkout page. Read more about the checkout method displayed on the button in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/online-store/dynamic-checkout).

Add the block to display the buttons in the product information section. The "Add to cart" button will be displayed after adding the block. The dynamic checkout buttons will be shown by activating the **"Show dynamic checkout buttons"** option.

Here is how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FPGnDeHp7xQpKvHuc5yq2%2Ffeatured%20product_buy%20bttns.png?alt=media&#x26;token=f169ea3c-4bbf-449c-94dd-9e365b234f63" alt=""><figcaption></figcaption></figure>

Enable the **"Show recipient information form for gift card products"** option to add the Gift card recipient form. The recipient form can be displayed by accepting the "I want to send this as a gift" checkbox. For how to set up a gift card in your *Shopify admin -> Products -> Gift card*, read the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/products/gift-card-products).

To add the recipient fields to the gift card form, follow the steps from the [<mark style="color:blue;">help page</mark>](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields).

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F2lpLrcCCwDLNuL36Y7DJ%2Ffeatured%20product_gift%20card.png?alt=media&#x26;token=f1a63da6-532d-44eb-96c5-32d5b2c45ec9" alt=""><figcaption></figcaption></figure>

#### "Add to cart" button

The "Add to cart" button style can be changed from "Primary" to "Secondary" using the **"Style"** picker.

Additionally, set the button color in the **"Color"** picker using the hex code or by specifying the color in the paint palette. The background color will be changed for the "Primary" style. For the "Secondary" style, the colorized text and inside button border will be added.

The button styles can be viewed below:

{% tabs %}
{% tab title="Primary" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVwACo96d7f4PoUFpN8iu%2Ffeatured%20product_button%20primary.png?alt=media&#x26;token=bd36ccc5-6c74-43b5-81bd-f10255e0e997" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Secondary" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F79MKyLat8hzjp6OK98Za%2Ffeatured%20product_button%20secondary.png?alt=media&#x26;token=f08821ce-9915-4eb5-a85c-449272c85003" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Stock and question popup

Use the given block if you need to showcase the inventory status of product variants, and add the contact form pop-up for clarifications:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVEj4ns1ez8cp8QzNqA4T%2Ffeatured%20product_stock%26question.png?alt=media&#x26;token=efc17157-995b-4a73-a619-97ab3fe32c82" alt=""><figcaption></figcaption></figure>

**Stock**

{% hint style="info" %}
The "Stock" option shows the product inventory status below the limit set in the block.
{% endhint %}

Enable the **"Show stock"** checkbox to place the information line with the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your *Shopify admin -> Products*.

Use the **"Minimum stock count"** slider to set the minimum weight of available product variants in a store to display information about the number of remaining products in stock. The boundary value can be set from 1 to 10, which determines whether to display the stock status of the product variant. It will only be shown for those variants whose stock status will be equal to or less than the boundary value you set on the slider.

For example, if you set the value to 10 on the slider, then **"Low stock - X items left"** will only be shown for product variants that have an inventory number equal to or less than 10:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FhFt35DvZMX5dCjYciFU4%2Ffeatured%20product_stock.png?alt=media&#x26;token=5597c16a-c75e-4b30-bf6d-455d1b3aaab8" alt=""><figcaption></figcaption></figure>

**Question popup**

For quick and easy customer contact with the owner, display a pop-up feedback form in the product information section. To use the pop-up, turn on the **"Show question popup"** option. It will be displayed on the right side of the screen after hitting the **"ASK A QUESTION"** button next to stock availability:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FCzt4x5AUwedRhoVNWRBK%2Ffeatured%20product_popup.png?alt=media&#x26;token=77c99b27-4767-418a-a2d0-6ad18007027e" alt=""><figcaption></figcaption></figure>

### Availability status

Add the block to display information about the product availability in a separate line. The example configurations of the block can be viewed above.

Enable the **"Show stock"** checkbox to place the information line with the number of available product variants. The value will automatically change according to the selected product variant. The stock quantity of each product variant can be edited in your *Shopify admin -> Products*. Additionaly, make sure to activate quantity tracking for each product/product variant in your admin.

Use the **"Minimum stock count"** slider to set the minimum weight of available product variants in a store to display information about the number of remaining products in stock. The boundary value can be set from 1 to 10, which determines whether to display the stock status of the product variant. It will only be shown for those variants whose stock status will be equal to or less than the boundary value you set on the slider.

### Question popup

Use the block to display the Question pop-up in a separate line. Turn on the **"Show question popup"** option to display the text button. It will be displayed on the right side of the screen after hitting the **"ASK A QUESTION"** button next to the product image.

### Description

This block shows a product description from your admin.

To display information about the product in the closed tab, activate the **"Show as accordion"** option. This option can be practical for product pages with a long description.

Check the following example of how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FMb6jm8yPXT9Qp5zWszUS%2Fproducts_description.png?alt=media&#x26;token=10b8430e-bacb-4ed0-81ed-6d8c1527c77d" alt=""><figcaption></figcaption></figure>

### Icon with text

If you need to place the list of icons with the text strings, use the **"Icon with text"** block.

Decide on the layout of the block by selecting one of the options, "Horizontal" or "Vertical", in the **"Layout"** picker.

{% tabs %}
{% tab title="Horizontal" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fhs3pWAtG4tQpkxaZwKkY%2Fproducts_icons%20horizontal.png?alt=media&#x26;token=8a7748f3-2d52-43b3-9a93-9477972d9f9d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FKLdyutmSKBMfeAsjYywk%2Fproducts_icons%20vertical.png?alt=media&#x26;token=66bcaa43-d7c0-4e4d-9815-01cb638c373e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

To display a dividing line in front of the block, enable the **"Show dividing line"** option.

#### Content

**First section - Sixth section**

The **"Icon SVG"** field is designed to link SVG icons that come with the theme or your custom SVG icons:

* To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/icons).
* Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/svg-icons#the-new-approach) for step-by-step instructions on the required modifications.
* Leave the field blank to hide an icon.

To display an image instead of an icon, use the image picker. Press the **"Select"** in the **"Icon image"**.

The descriptive paragraph can be added to the **"Text"** input field. This field can be used to add content using Metafields. Press on a dynamic source icon to add a Metafield. In order to create a metafield, go to *Shopify admin -> Settings -> Metafields and metaobjects -> Products*. How to build metafields can be read in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/metafields).

### Share

To display a share button in the section, use the provided block.

The button's title can be changed in the **"Text"** field.

Check the example of how the block might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FHM2CniHRVWD5nGeB0rgg%2Ffeatured%20product_share.png?alt=media&#x26;token=c772e780-83f1-4102-8eb5-85fb281f587c" alt=""><figcaption></figcaption></figure>

### Custom liquid

This is an advanced option that requires additional developer skills. More about Liquid can be read [<mark style="color:blue;">here</mark>](https://shopify.dev/api/liquid).

### Collapsible tab

Add this block if you need to display collapsible tabs in the product information section. To showcase an accordion, add several content blocks.

This block allows you to display text by typing it in the input field, connect a page with the product details or additional information, and add content via Metafields.

Enable or disable the **"Show as accordion"** option to decide whether to display the information in the tab or as an open paragraph.&#x20;

In the **"Heading"**, put the tab's title. The paragraph inside the tab will be displayed if you edit the **"Tab content"** field. This field can be used to add content using Metafields. Press on the dynamic source icon to add a Metafield. In order to create a metafield, navigate to *Shopify admin -> Settings -> Metafields and metaobjects -> Products.* How to build metafields can be read in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/metafields).

To connect **"Tab content from page",** press "Select". Detailed instructions on creating a page can be found [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-create-webpages).

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fcu4IvY35d7YjUGA4ydb9%2Ffeatured%20product_collapsible%20tab.png?alt=media&#x26;token=8da5e57d-3f9c-41ec-874b-27c31de89831" alt=""><figcaption></figcaption></figure>

### Pop-up

This block allows you to display a whole page as content in the side-out drawer.&#x20;

Add the title to the **"Link label"** field. Then, select a page. Detailed instructions on creating a page can be found [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-create-webpages).

The **"Page"** option enables adding content using Metafields. Press on the dynamic source icon to add a Metafield. In order to create a metafield, navigate to *Shopify admin -> Settings -> Metafields and metaobjects -> Products*. How to build metafields can be read in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/metafields).

Here is how the text drawer might be displayed on product pages:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fp4hVcTBaG2K2JxuglGiq%2Ffeatured%20product_popup%20link.png?alt=media&#x26;token=1e424f2f-adae-4c2d-ac39-29a583a9dfd0" alt=""><figcaption></figcaption></figure>

### Complementary products

{% hint style="warning" %}
**Note!** This block requires using the **Shopify Search & Discovery app** in your *Shopify admin -> Apps*. Learn more about Complementary Products [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations).
{% endhint %}

Add this block to display the desired products in the product information section.

To display a title for the block, insert the text into the **"Heading"** field. If there is no need to title the block, leave the field empty.

The block can be displayed as a collapsible tab if you activate the **"Show as accordion"** option.

Here, you can control the number of products displayed for the block using the **"Maximum products to show"** scale. It can be changed from 1 to 10 items.

In the **"Number of products per page"**, arrange the number of products that should be placed in the column on the first viewing page. If the number of complementary products exceeds the quantity you set on the scale, the products will be displayed in a carousel. The value can be set from 1 to 4.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FohgcKBBLMyOAsBwfBl93%2Fcomplementary%20products.png?alt=media&#x26;token=ff10e7cb-1cab-4413-b6f1-ea507350a1aa" alt=""><figcaption></figcaption></figure>

Use the settings from the **"Pagination style"** to display pagination as "Dots", "Counter", or "Numbers".

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FJDbLCjnBIjzkyuOHGcx3%2Fcomplementary_pagination.png?alt=media&#x26;token=6c7d3732-5491-46b1-a603-a0eb23a16caf" alt=""><figcaption></figcaption></figure>

#### Product card

Choose the appropriate product image aspect ratio in the **"Image ratio"** drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

**Enable quick add button**

The "Add to cart" button will be shown next to each product if you enable the "**Enable quick add button**" option.

**Show vendor**

Display the product vendor above the product title by simply enabling the checkbox.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FNVtwtAuR94O5Fk5m8mF1%2Ffeatured%20product_complementary.png?alt=media&#x26;token=b1170861-a7dd-4f7a-a9d0-542f59654346" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** To display the complementary products in the section, go to your admin and apply the settings described below:
{% endhint %}

**Step 1**

In your *Shopify admin -> Apps*, select the **Shopify Search & Discovery** app:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fk94Plz1vwvLLRT9xklYk%2Fadmin_search%26discovery%20app.png?alt=media&#x26;token=8ba96b4e-4bd6-462e-b531-1ed87f3fbdaa" alt=""><figcaption></figcaption></figure>

**Step 2**

Then, you can press the **"Recommendations"** item in the side menu to navigate to the needed chapter:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FY7CbWqWNpTVLWcNzkSjf%2Fsearch%26discovery_recommendations.png?alt=media&#x26;token=876db048-b5b4-4eb1-844d-9d9fa67aae78" alt=""><figcaption></figcaption></figure>

**Step 3**

Here you can select or search for the desired product to edit recommendations:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FIXLHRe3GTN6HjoWAzIVi%2Fsearch%26discovery_search%20product.png?alt=media&#x26;token=1dad5f99-6773-4c12-bb2f-43d53a304acb" alt=""><figcaption></figcaption></figure>

Select a product.

**Step 4**

In the **"Edit complementary products"** block, press the "Browse" button to search for products or type the product name in the search bar:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FIC1SMyzOLOJCQm8HetiT%2Fapp_browse%20products.png?alt=media&#x26;token=9f00f359-8564-4ef5-ae5d-5068cae557de" alt=""><figcaption></figcaption></figure>

**Step 5**

Add up to ten products to display on the product page:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FgQ2llctxbqbzvEu81Z8O%2Fsearch%26discovery_add%20complementary.png?alt=media&#x26;token=1c048c04-e028-4d79-9954-f46ae8e30853" alt=""><figcaption></figcaption></figure>

After you specify the complementary products in the list, hit the **"Add'** button on the pop-up.

**Step 6**

Save the settings:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F19AVECsVJekEHP7Z4gCd%2Fsearch%26discovery_save%20complementary.png?alt=media&#x26;token=1a50744c-d5d7-4926-990d-8ea7609f10af" alt=""><figcaption></figcaption></figure>