# Featured product

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FCtiRfP3rAEDQ2Cwd7Iix%2F2025-04-04_00-03-37.jpg?alt=media&#x26;token=d8bc4ab9-a71f-4b78-a357-62b665a05716" alt=""><figcaption></figcaption></figure>

## How to add a Featured product section?

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Featured product.**
3. Make necessary changes. > **Save.**
   {% endhint %}

## How to customize your Product information section

### General Settings

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F02WShEMxYYh6kYA3RMoE%2F2025-04-04_00-04-11.jpg?alt=media&#x26;token=5e1b6bbd-d7e7-42ac-b2c4-412456f74791" alt=""><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FUHBoYREUDNojihA1NTpL%2F2025-04-04_00-04-30.jpg?alt=media&#x26;token=6bd101f4-4bfe-42e9-9e8c-57050acd4bcb" alt=""><figcaption></figcaption></figure></div>

* **Width** - There are 3 options for with product information section: *Boxed / Wide / Full*
* **Enable sticky content on desktop** - When you enable it, the product content will be fixed in position
* **Show sticky add to cart bar** -  Display sticky add to cart bar on the product page.

#### Media

Learn more about [media types.](https://help.shopify.com/manual/products/product-media)

* **Desktop media width**  -  Set width for desktop media.
* **Image ratio** - There are 4 options : *Adapt to image / Square / Portrait / Landscape*
* **Thumbnail ratio** - There are 4 options : *Adapt to image / Square / Portrait / Landscape*
* **Desktop layout** - There are 5 options  : *Stacked / Grid mix column / Grid 2 columns / Thumbnail left ( Carousel ) / Thumbnails bottom ( Carousel )*
* **Desktop media position** - Left / Right
* **Show Lightbox** - Display zoom image when you click to image
* **Enable video autoplay** - Grid mode, Stacked on desktop turn off autoplay.
* **Enable video looping** - When enabled, the video will loop if the product has a video
* **Mobile layout** - Show thumbnails / Hide thumbnails&#x20;

#### Colors

* **Background**
* **Text**
* **Border**

#### Section padding

* **Padding top**
* P**adding bottom**

## Block settings

### 1. Text

* Add the custom content you want

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FAbeOGXWdh1V9wDl8I8Qk%2F2025-04-04_00-06-40.jpg?alt=media&#x26;token=c7d89176-e27f-40af-8748-bfcb35e8a09e" alt=""><figcaption></figcaption></figure>

### 2. Link text

* Display text or button has link

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Ffc4CzodqrtxFmpBcqA3d%2F2025-04-04_00-07-14.jpg?alt=media&#x26;token=b7b670ff-ce08-4306-ae21-7f5528ea3975" alt=""><figcaption></figcaption></figure>

### 3. Title

* Display product title - You can edit size for title

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/jrpniQp6NTkhYvNGZdLN/title1.jpg" alt=""><figcaption></figcaption></figure>

### 3. Product rating

* To display a rating, add a product rating app. [Learn more](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-grid-section-settings)

### 4. Price

* Display product price

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FVoRG6Zlldzf2lK32lVeK%2F2025-04-04_00-08-03.jpg?alt=media&#x26;token=75a0ef87-c3e6-4057-af23-42468c9bb8d7" alt=""><figcaption></figcaption></figure>

### 5. Description

* Display the product description.

### 6. Divider

* Display border and spacing

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FgfzfGohS5MEOT7Cc7FXm%2F2025-04-04_00-08-51.jpg?alt=media&#x26;token=ff1c0ada-ea03-45b3-903a-07b71ed14c69" alt=""><figcaption></figcaption></figure>

### 7. SKU

* Display SKU&#x20;

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FibhFUgSoIldHP2GAzUYo%2F2025-04-04_00-09-38.jpg?alt=media&#x26;token=1cfab902-00c7-4b5a-a03e-b01fb1bbfa76" alt=""><figcaption></figcaption></figure>

### 8. Inventory status

* **Inventory status** indicates product availability, essential for maintaining stock levels, managing inventory effectively, and updating customers about availability on your website.

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FNnMAgdnH5OhYQPdvM8z7%2F2025-04-04_00-10-11.jpg?alt=media&#x26;token=bfd219c1-bd5d-4e48-958c-2e1a5a737600" alt=""><figcaption></figcaption></figure>

### 9. Sibling products&#x20;

* Shopify allows you to use variants to offer multiple options for a single product. Although variants are highly versatile, they may fall short if you need to design significantly distinct pages for each variant.
* **Sibling products** allow direct linking to other products as swatches, resulting in a detailed product page that features images representing each variant option.

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FLIQhjVoXDwAbSuvx8MqD%2F2025-04-05_13-44-23.jpg?alt=media&#x26;token=7d9ad132-8aae-4794-99af-842524d40423" alt=""><figcaption></figcaption></figure>

#### Individual products

Each sibling is an individual product. Using custom metafields, The theme will connect these products together and auto-generate the swatch images.

Create individual products that are similar. Begin with the same name for each product to help maintain naming consistency for each sibling:

#### How to Set Up Sibling Products

{% hint style="success" %}
Access:

1. On the left-sidebar, add **Product information.**
2. Click and access **Sibling Products**
   {% endhint %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FY02xgMyENIKUwdNdBGQr%2F2025-11-18_12-26-21.jpg?alt=media&#x26;token=e3528077-6994-4dfb-921b-0652a93867e3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

* Configure Picker Type
* Set Up Show Siblings Sale Dot
* Configure Option Name
  {% endhint %}

### 9.1 Quick Setup (3 Steps)

#### Step 1: Create Metafields <a href="#step-1-3a-create-metafields" id="step-1-3a-create-metafields"></a>

**What you need to create:**

1. **Color Metafield** (stores the color name)
   * Go to: Settings → Custom data → Products → Add definition
   * Name: `Sibling Color`
   * Namespace and key: `custom.sibling_color`
   * Type: Single line text
   * Click Save

<div data-with-frame="true"><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FVqLqHOs76zkzUENe0Kwh%2F2025-11-18_12-54-16.jpg?alt=media&#x26;token=4f30ff7f-27a5-49ed-88b2-929e1fad535c" alt=""><figcaption></figcaption></figure></div>

1. **Siblings List Metafield** (stores related products)
   * Go to: Settings → Custom data → Products → Add definition
   * Name: `Siblings`
   * Namespace and key: `custom.siblings`
   * Type: List of products
   * Click Save

<div data-with-frame="true"><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FnOZ9c58WTK2ljVuo5GY0%2F2025-11-18_12-54-45.jpg?alt=media&#x26;token=683eea41-172c-4108-9cc5-bf59c14ec0f2" alt=""><figcaption></figcaption></figure></div>

#### Step 2: Add Values to Your Products <a href="#step-2-3a-add-values-to-your-products" id="step-2-3a-add-values-to-your-products"></a>

For each product in your sibling group:

1. Open the product edit page
2. Scroll down to find the Metafields section
3. Fill in:
   * **Sibling Color**: Enter the color name (e.g., "Black Oiled")
   * **Siblings**: Select all related products (including this product itself)

**Example:** For Black sandals:

* Sibling Color: `Black Oiled`
* Siblings: Select Black sandals, Brown sandals, Tan sandals, Gray sandals

<div data-with-frame="true"><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FcztX1u7lpHbDhhYKitqz%2F2025-11-18_12-58-06.jpg?alt=media&#x26;token=2963cb9f-655c-4d07-a6fa-dbe771618d54" alt=""><figcaption></figcaption></figure></div>

#### Step 3: Configure in Theme Editor <a href="#step-3-3a-configure-in-theme-editor" id="step-3-3a-configure-in-theme-editor"></a>

{% hint style="success" %}

1. On the left-sidebar, add **Product information.**
2. Click and access **Sibling Products**
   {% endhint %}

**Picker type:**

* Choose `Product image / Block / Color Swatch`&#x20;

**Option name:**

* Content: `Color:`

**Option value metafield:**

* Content: `custom.sibling_color`

**Siblings products metafield:**

* Content: `custom.siblings`

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FlBPpCQPpc7gaqqMZvkAq%2F2025-11-18_13-11-46.jpg?alt=media&#x26;token=afdf3953-1645-42dc-baf6-c520a847140e" alt=""><figcaption></figcaption></figure>

### 10. Variant picker

Products with variants provide customers with more choices. To learn more about variants and how to add them to your store, visit the following [link](https://help.shopify.com/en/manual/products/variants).

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FYTFbGnejaHGzvs4PL4Al%2F2025-04-04_00-11-12.jpg?alt=media&#x26;token=a46adc07-33d0-4eee-93d3-e3aa0d686b97" alt=""><figcaption></figcaption></figure>

* **Picker type** - *Dropdown / Block*
* **Hide sold out variants**
* **Color picker type** - *Block / Dropdown / Color swatch / Variant image*
* **Block type -** *Outline / Solid*
* **Option name** - When variant product has option name will be show popup size chart
* **Size chart page** - Display size chart from page. You can also create a different size chart for each product using metafeild

### 11. Quantity selector

* Allows customers to increase or decrease quantity
* Enable quantity rules

### 12. Buy buttons

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F3PHqmYTYPxXAXnC3N1jJ%2F2025-04-04_00-11-56.jpg?alt=media&#x26;token=602d9b03-380d-44d4-bb10-d41e8a132914" alt=""><figcaption></figcaption></figure>

* Show 2 columns
* Show dynamic checkout buttons
* Show recipient information form for gift cards
* Show pickup availability
* Show back in stock notification
* Text back in stock

### 13. Rich text

* A featured block allows you to promote your content

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FAl8bPIdXzQ4wWznkBbf1%2F2025-04-04_00-13-14.jpg?alt=media&#x26;token=a70f42fe-3e43-441c-b1e0-0f650c551404" alt=""><figcaption></figcaption></figure>

### 14. Complementary products

* To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FYYi6LJAZIXS5tyxH560z%2F2025-04-04_00-13-55.jpg?alt=media&#x26;token=fdb3cb6c-4635-433a-b675-a08cfdfb6804" alt=""><figcaption></figcaption></figure>

### 15. Icon with text

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F8SOYmd5oRV5pXJnMEQrH%2F2025-04-04_00-14-39.jpg?alt=media&#x26;token=cb43a034-335a-432b-9381-e6b3cfcc37be" alt=""><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Fx2J6T3rIkMK45HaZpTQg%2F2025-04-04_00-14-53.jpg?alt=media&#x26;token=370826d8-0199-4ff8-bbd2-5d759af7eb02" alt=""><figcaption></figcaption></figure></div>

### 16. Share

The option to display social networks for sharing or copying links to share.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/kwFi0pZAqQEUaQMvAvWV/sha.jpg" alt=""><figcaption></figcaption></figure>

### 17. Trust badge

* Display image or payment gateway logo on the product page. Help customer to trust your store.

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FEpkSMBVSChq6eZuKwsxL%2F2025-04-04_00-15-55.jpg?alt=media&#x26;token=60d3b3c5-856f-4015-bfa0-4288e77958d7" alt=""><figcaption></figcaption></figure>

### 18. Countdown timer

Display the promotion countdown.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/rI3WQChweKBlBun9YiDQ/cd.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

1. Create a custom **metafield** for product with namespace and key: '**ortheme.countdown**' and field type is **Date and time**
   {% endhint %}

### 19. Custom Liquid

* Add app snippets or other Liquid code to create advanced customizations.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/hFx3pwwzBAPt0xszYR16/liquid.jpg" alt=""><figcaption></figcaption></figure>

### 20. Pop-up

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FS66kmOI6cXMoDnpFjEIB%2F2025-04-04_00-17-05.jpg?alt=media&#x26;token=d22b356f-e67f-4231-b919-3e84ac9abba4" alt=""><figcaption></figcaption></figure>

### 21. Image

* Display image on the product page.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/m6gB4afWGmi8nNpeXRtY/im.jpg" alt=""><figcaption></figcaption></figure>

### 22. Custom option

Custom option are used to collect customization information for an item added to the cart. This information can be collected from the buyer on the product page.

There are 4 options : Text / Textarea / Dropdown / Radio

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FQKCQtdwTXC4DTzcmtB8p%2F2025-04-04_00-18-11.jpg?alt=media&#x26;token=dc97f05c-acca-454b-9ad5-a32f673e34ad" alt=""><figcaption></figcaption></figure>

### 23. Collapsible row

* Add a heading and extra information on the tabs.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/MTXZxDt57hztSJhiumcU/coll.jpg" alt=""><figcaption></figcaption></figure>

### 24. Fit guide

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FD75CJUH7VImljZ2JP7qZ%2F2025-04-04_00-19-26.jpg?alt=media&#x26;token=5218bb5f-cf94-4451-9027-dfc3c45b5030" alt=""><figcaption></figcaption></figure>