> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Product Details

**Theme:** Shine · **Section type:** Product page section

The Product details section is the main part of every product page. It shows the product media next to the title, price, variant selector, and buy buttons, and you can add blocks such as a gift toggle, an ingredient list, a countdown, or a back-in-stock form to help customers decide and buy.

> **Note:** Product details is part of the product template. You can hide it, but you can't remove it or add it to other templates. To show a product on another page, use the Featured product section.
![Product details section on a Shine product page](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/product-details-1_4komkx.jpg)

**What you can do**
- Add, remove, and reorder blocks
- Choose how product media is shown
- Show a sticky add to cart bar
- Set up the variant selector and size guide
- Offer gift wrapping with the Gift toggle
- Collect back-in-stock requests
- Show ingredients for each product
- Recommend complementary products
- See what customers see
- Look up every section and block setting in "Settings reference"
- Fix common problems

---

## Add, remove, and reorder blocks
1. In the theme editor, open a product template, for example **Default product**.
2. In the left sidebar, click **Product details**.
3. Click **Add block** and select a block.
4. Drag blocks by their handle to change their order in the product information column.
5. Click **Save**.

You can add each of these blocks once: Product variation, Title, Vendor, Product code, Price, Variant selector, Gift toggle, Buy buttons, Description, Pickup availability, Complementary products, Share, Disclosures, Countdown timer, and Back in stock. You can add Feature with icon, Icon with text, Collapsible item, Ingredients, Popup content, Custom text, Custom liquid, and Separator as many times as you need. You can also add app blocks.

> **Tip:** Keep the title, price, variant selector, and buy buttons near the top. Put supporting content, such as collapsible items or ingredients, below the buy buttons.

## Choose how product media is shown
1. Click **Product details**.
2. Under **Media**, choose a **Media ratio** and a **Thumbnails ratio**.
3. Under **Large screen**, choose a **Media layout**: thumbnails on the left, thumbnails below, an image grid, or a slideshow of 2 main images.
4. Under **Mobile screen**, choose whether to **Show thumbnails**.
5. Click **Save**.

> **Tip:** If your product photos have different shapes, pick Square or Portrait for **Media ratio** so the gallery doesn't jump in height when customers switch images.

## Show a sticky add to cart bar
1. Click **Product details**.
2. Under **Sticky add to cart**, select **Enable sticky add to cart**.
3. Choose a **Sticky add to cart position**: Bottom left or Bottom right.
4. Click **Save**.

The bar appears when the buy buttons scroll out of view. On phones, it always fills the full width of the screen.

## Set up the variant selector and size guide
1. Click the **Variant selector** block.
2. Under **Selector**, choose a **Selector style**: Block or Dropdown.
3. To show color swatches, select **Show variant swatches**. Swatches use the option you set in **Theme settings** > **Product information** > **Variant swatches**.
4. To add a size guide, select **Enable size guide**, enter a **Label**, and select the page that holds your size chart in **Content**.
5. Click **Save**.

> **Note:** The size guide link appears next to an option named Size. Create the size chart page in **Online Store** > **Pages** first.

> **Tip:** To show several separate products as one product with an extra option (for example, one product per color), add the **Product variation** block. You set it up in **Theme settings** > **Product information** > **Product variation**.

## Offer gift wrapping with the Gift toggle
The Gift toggle adds a switch so customers can add gift wrapping to the product they buy. Available in Shine 3.5 and later.

1. In your Shopify admin, create a product for gift wrapping, for example "Gift wrap", with its own price.
2. In the theme editor, click **Product details** > **Add block** > **Gift toggle**.
3. Under **Product**, select the product in **Gift wrap product**.
4. Under **Content**, enter a **Title** and a **Subtitle**.
5. Click **Save**.

> **Note:** The block is hidden when no gift wrap product is selected or when that product is sold out.

> **Tip:** Hide the gift wrap product from your collections and search, so customers only add it through the toggle.

## Collect back-in-stock requests
The Back in stock block shows a short form where customers leave their email to hear when a product is available again. Available in Shine 3.5 and later.

1. Click **Product details** > **Add block** > **Back in stock**.
2. Keep **Show only when sold out** selected so the form appears only for sold-out products.
3. Under **Text**, enter a **Heading**, a **Text**, and **Your message**.
4. Optional: select **Show variant selector** so customers can say which option they want.
5. Click **Save**.

Each request is sent to your store's email address through the Shopify contact form. It includes the customer's email, the product, the chosen variant, and your message.

> **Caution:** The theme doesn't send a restock email for you. When the product is back, you need to contact these customers yourself, or use a back-in-stock app.

## Show ingredients for each product
The Ingredients block shows key ingredients as cards, with an optional full ingredient list in an accordion. Available in Shine 3.5 and later.

1. Click **Product details** > **Add block** > **Ingredients**.
2. Under **General**, enter a **Heading** and choose **Columns per row**.
3. Under **Ingredient content**, choose a **Content source**:
   - **Manual (same on every product)**: fill in **Ingredient 1** to **Ingredient 4**.
   - **Product metafield (per product)**: enter the **Ingredients metafield key**. See the steps below.
4. Optional: under **Full ingredient list**, select **Show full ingredient list** and add the list.
5. Click **Save**.

To load each product's own ingredients from metafields:
1. In your Shopify admin, go to **Settings** > **Metafields and metaobjects** > **Metaobjects** and create a metaobject named "Ingredient" with these fields: name (Single line text), role (Single line text), description (Rich text), and icon (Image).
2. Add one entry for each ingredient.
3. Go to **Settings** > **Metafields and metaobjects** > **Products** and add a definition that is a list of Ingredient metaobjects, for example custom.key_ingredients.
4. Optional: add a second product definition of type Rich text or Multi-line text for the full list, for example custom.full_ingredients.
5. On each product, select the ingredients to show in its metafield.
6. In the theme editor, enter the keys in **Ingredients metafield key** and **Full list metafield key** as namespace.key, then click **Save**.

## Recommend complementary products
1. In the Shopify **Search & Discovery** app, add complementary products to your product.
2. In the theme editor, click **Product details** > **Add block** > **Complementary products**.
3. Enter a **Heading** and set **Products to show**.
4. Choose a **Layout** (Carousel or Grid) and an **Image ratio**.
5. Click **Save**.

## What customers see
- **Media:** customers click a thumbnail or swipe to change images. When **Enable zoom function** is on, clicking the main image opens it in a lightbox.
- **Variants:** when customers pick a variant, the price, stock status, SKU, and media update to match. Sold-out options are crossed out.
- **Sticky add to cart:** after customers scroll past the buy buttons, a bar shows the selected variant, the price, and an **Add to cart** button.
- **Gift toggle:** when the switch is on, the gift wrap product is added to the cart as a separate line linked to the product. If the customer removes the product from the cart, the gift wrap is removed too.
- **Back in stock:** after customers submit the form, a success message replaces it.
- **Countdown timer:** the timer counts down to the end date and time. When it ends, it either hides or shows the end text.
- **Phones:** the media sits above the product information. Blocks set to show below the gallery on desktop stay in their normal place.
![Sticky add to cart bar with the selected variant after scrolling past the buy buttons](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/product-details-2_191xsu8.jpg)

## Settings reference

### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |

### Media
| Setting | What it does |
| ---- | ---- |
| Media ratio | Sets the shape of the main media: Square, Portrait, Landscape, or Adapt to image. |
| Thumbnails ratio | Sets the shape of the thumbnails: Square, Portrait, or Landscape. Each shape is listed twice, once to fill the thumbnail (crop) and once to fit the whole image inside it. |
| Enable zoom function | Opens the media in a lightbox when customers click it. |
| Media background | Sets the color behind media with a transparent background. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Media layout | Main media with thumbnails (left), Main media with thumbnails (below), Image grid, or 2 main images slideshow. |
| Media width | Makes the media column Regular or Large. |
| Enable sticky media when scrolling | Keeps the media in view while customers scroll through the product information. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Show thumbnails | Shows thumbnails under the main media on phones. |

### Sticky add to cart
| Setting | What it does |
| ---- | ---- |
| Enable sticky add to cart | Shows the add to cart bar when the buy buttons scroll out of view. See "Show a sticky add to cart bar" above. |
| Sticky add to cart position | Places the bar at the Bottom left or Bottom right. On phones it's always full width. |

### Product variation block
This block has no settings of its own. It shows other products linked through a product metafield as an extra option. You set it up in Theme settings > Product information > Product variation:

| Setting | What it does |
| ---- | ---- |
| Variation option name | The label shown before the current variation, for example Color. |
| Product variation metafield | The product metafield (a list of metaobjects) that links the products, as namespace.key. |
| Variation selector style | Shows the linked products as Product images, Color swatches, or Buttons. |

### Title block
| Setting | What it does |
| ---- | ---- |
| Heading size | Sets the title size: Headline, H1, H2, H3, H4, H5, or H6. |

### Vendor block
This block has no settings. It shows the product vendor.

### Product code block
| Setting | What it does |
| ---- | ---- |
| Show SKU | Shows the SKU of the selected variant. |
| Show barcode | Shows the barcode of the selected variant. |

### Price block
| Setting | What it does |
| ---- | ---- |
| Show tax and shipping policy | Shows the tax and shipping note under the price. |
| Text size | Sets the price size: Default, Medium, Large, or Extra large. |
| Enable item background | Adds a background behind the price. |
| Background | Sets the background color. |
| Content | Sets the price text color. |
| Show Sold out badge | Shows a Sold out badge when the selected variant is out of stock. |
| Show Sale badge | Shows a Sale badge as Text only or Text + Sale amount, or Never. |
| Show New in badge | Shows a New in badge on new products. You set how long a product counts as new in Theme settings > Product information > New in date limit. |

### Variant selector block
| Setting | What it does |
| ---- | ---- |
| Show inventory status | Shows whether the selected variant is in stock. |
| Show stock number | Shows how many items are left. You set the low stock threshold in Theme settings > Product information. Appears when Show inventory status is on. |
| Selector style | Shows options as Block buttons or a Dropdown. |
| Show variant swatches | Shows swatches for the option set in Theme settings > Product information > Variant swatches. |
| Variant swatches size | Sets the swatch size: Small, Regular, or Large. |
| Enable size guide | Adds a size guide link next to the Size option. |
| Label | The text of the size guide link. |
| Content | The page that opens in the size guide popup. |

### Gift toggle block
| Setting | What it does |
| ---- | ---- |
| Title | The main text next to the switch. |
| Subtitle | The smaller text under the title. |
| Default checked | Turns the switch on when the page loads. |
| Theme library | The icon shown next to the text. |
| Gift wrap product | The product added to the cart when the switch is on. See "Offer gift wrapping with the Gift toggle" above. |
| Show top border | Adds a line above the block. |
| Show bottom border | Adds a line below the block. |

### Buy buttons block
| Setting | What it does |
| ---- | ---- |
| Show quantity selector | Shows the quantity selector. It's hidden automatically when all variants are sold out. |
| Inline add to cart with quantity | Places the Add to cart button on the same row as the quantity selector. Appears when Show quantity selector is on. |
| Show dynamic checkout buttons | Shows express checkout buttons, such as PayPal or Apple Pay, based on your payment settings. |
| Show recipient information form for gift card products | Lets customers send a gift card to someone else with a personal message. |
| Show payment method | Shows the icons of your store's payment methods. |
| Heading | The text above the payment icons. |

### Description block
| Setting | What it does |
| ---- | ---- |
| Show Icon | Shows an icon next to the heading. |
| Icon source | Uses an icon from the Theme library, an Image, or Custom SVG code. |
| Theme library | The theme icon to show. |
| Image | A custom icon image. Use a square image. |
| Custom SVG | SVG code for a custom icon. |
| Custom icon color | Sets the icon color. |
| Heading | The description heading. |
| Display type | Shows the description as Plain text or in a Collapsible item. |
| Expand item by default | Opens the description when the page loads. Applies only with Collapsible. |
| Show below gallery on desktop | Moves the description under the product gallery on large screens. Phones aren't affected. |

### Feature with icon block
| Setting | What it does |
| ---- | ---- |
| Text | The feature text, for example Free shipping over $50. |
| Link | Makes the feature clickable. |
| Icon | The theme icon to show. |
| Custom icon | An image to use instead of the theme icon. A 128 x 128 px PNG works best. |
| Icon width | Sets the icon width, from 12 px to 48 px. |
| Background | Sets the background color. |
| Content | Sets the text and icon color. |
| Border | Sets the border color. |

### Icon with text block
| Setting | What it does |
| ---- | ---- |
| Enable item background | Adds a background behind the item. |
| Background | Sets the background color. |
| Content | Sets the text and icon color. |
| Icon source | Uses an icon from the Theme library, an Image, or Custom SVG code. |
| Icon size | Sets the icon size: 32px, 48px, or 64px. |
| Theme library | The theme icon to show. |
| Image | A custom icon image. Use a square image. |
| Custom SVG | SVG code for a custom icon, shown at the selected icon size. |
| Heading | The item heading. |
| Description | The item text. |
| Enable full container width (Large screen and Mobile screen) | Makes the item full width. Turn it off on 2 blocks in a row to show 2 items side by side. |

### Collapsible item block
| Setting | What it does |
| ---- | ---- |
| Show Icon | Shows an icon next to the heading. |
| Icon source | Uses an icon from the Theme library, an Image, or Custom SVG code. |
| Theme library | The theme icon to show. |
| Image | A custom icon image. Use a square image. |
| Custom SVG | SVG code for a custom icon. |
| Custom icon color | Sets the icon color. |
| Expand item by default | Opens the item when the page loads. |
| Heading | The item heading. |
| Description | The content shown when the item is open. |

### Ingredients block
| Setting | What it does |
| ---- | ---- |
| Heading | The block heading. |
| Columns per row | Shows 2, 3, or 4 ingredient cards per row. |
| Content source | Manual (same on every product) uses the ingredients you enter in the block. Product metafield (per product) loads each product's ingredients. See "Show ingredients for each product" above. |
| Ingredients metafield key | The product metafield with the ingredient list, as namespace.key. Appears with Product metafield. |
| Icon, Name, Benefit tag, Description (Ingredient 1 to 4) | The image, name, short tag (for example Hydration), and text of each ingredient card. Used with Manual. |
| Full list metafield key | The product metafield with the full ingredient list, as namespace.key. Appears with Product metafield. |
| Show full ingredient list | Shows the full list in an accordion under the cards. |
| Open by default | Opens the accordion when the page loads. Appears when Show full ingredient list is on. |
| Accordion title | The accordion heading. |
| Full ingredient list (INCI) | The full list text. Used with Manual. |

### Pickup availability block
| Setting | What it does |
| ---- | ---- |
| Show expected pickup time | Shows when the order is usually ready for pickup. |
| Enable item background | Adds a background behind the block. |
| Background | Sets the background color. |
| Content | Sets the text color. |

### Popup content block
| Setting | What it does |
| ---- | ---- |
| Text | The link text, for example Shipping and returns. |
| Popup content | The page whose content opens in a popup. |

### Custom text block
| Setting | What it does |
| ---- | ---- |
| Text | The text to show. |
| Text (color) | Sets the text color. It's also used for links in the text. |

### Custom liquid block
| Setting | What it does |
| ---- | ---- |
| Custom liquid | Adds app snippets or other Liquid code. |

### Separator block
| Setting | What it does |
| ---- | ---- |
| Style | Draws a Solid, Dashed, or Dotted line. |
| Thickness | Sets the line thickness, from 1 px to 10 px. |
| Color | Sets the line color. Leave it empty to use the border color of the color scheme. |
| Top spacing | Adds space above the line, from 0 px to 100 px. |
| Bottom spacing | Adds space below the line, from 0 px to 100 px. |

### Complementary products block
| Setting | What it does |
| ---- | ---- |
| Heading | The block heading. |
| Products to show | Shows 1 to 10 products. |
| Layout | Shows the products in a Carousel or a Grid. |
| Image ratio | Sets the image shape: Square, Portrait, Landscape, or Adapt to image. |

### Share block
| Setting | What it does |
| ---- | ---- |
| Social media icons style | Shows the share buttons as a Filled button or a Ghost button. On devices that support it, customers see their device's native share menu. |

### Disclosures block
| Setting | What it does |
| ---- | ---- |
| Heading | The heading of the collapsible item. |
| Collapse content | Keeps the item closed when the page loads. |

The block shows the product disclosures you set up in your Shopify admin that are set to display on the product page. It's hidden when the product has none.

### Countdown timer block
| Setting | What it does |
| ---- | ---- |
| Heading | The heading above the timer. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. Appears when the heading isn't empty. |
| Subheading | The text under the heading. |
| Content alignment | Aligns the content Left or Center. |
| Hide the countdown when it ends | Hides the timer when it reaches zero. |
| End date | The end date as YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight. |
| End time (optional) | The end time as HH:MM, on a 24-hour clock. |
| End text | The text shown when the countdown ends. Leave it empty to show nothing. |
| Enable item background | Adds a background behind the numbers. |
| Countdown number size | Sets the number size: H2, H3, H4, or H5. |
| Countdown background | Sets the background color of the numbers. Appears when Enable item background is on. |
| Countdown number | Sets the color of the numbers. |
| End text (color) | Sets the color of the end text. |

### Back in stock block
| Setting | What it does |
| ---- | ---- |
| Show only when sold out | Shows the form only when the selected variant is sold out. |
| Color scheme | Sets the colors of the block. |
| Heading | The form heading. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. Appears when the heading isn't empty. |
| Text | The text under the heading. |
| Your message | The note included in the email you receive. |
| Show variant selector | Lets customers choose the variant they want. It's hidden for products without variants. |
| Variant selector label | The label of the variant selector. Appears when Show variant selector is on. |
| Show mailing-list opt-in | Adds a checkbox so customers can ask to join your mailing list. Their choice is written in the email, and you add them to your list yourself. |
| Mailing-list label | The checkbox text. Appears when Show mailing-list opt-in is on. |
| Tick the opt-in by default | Checks the opt-in box when the page loads. Appears when Show mailing-list opt-in is on. |
| Button label | The text of the submit button. |
| Button style | Shows a Primary or Secondary button. |
| Full-width button | Makes the button full width. |
| Success message | The message shown in place of the form after it's submitted. |

## Troubleshooting
**The Gift toggle doesn't show on the product page.**
The block is hidden when no **Gift wrap product** is selected or when that product is sold out. Select an available product in the block, or restock it.

**The back-in-stock form doesn't appear.**
With **Show only when sold out** on, the form shows only when the selected variant is sold out. To test it, preview a sold-out product, or turn the setting off.

**I don't get an email when a product is back in stock.**
The theme only sends the customer's request to your store email. It doesn't track inventory or email customers. Contact them yourself, or use a back-in-stock app.

**The Complementary products block is empty.**
The block shows only products you add as complementary products in the Search & Discovery app. Add them for this product, then refresh the page.

**The size guide link is missing.**
The link appears only next to an option named Size, and only after you select a page in **Content**.

## Related articles
- [Shine Featured product](https://doc.ecomx.co/en/article/shine-featured-product-x3ilzf/)
- [Shine Related Products](https://doc.ecomx.co/en/article/shine-related-products-hdf7ui/)
- [Shine Quick Shop](https://doc.ecomx.co/en/article/shine-quick-shop-18cw684/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)

**In other themes:** [Blum Product Template](https://doc.ecomx.co/en/article/blum-product-template-cv3oj3/) · [Electro Product Template](https://doc.ecomx.co/en/article/electro-how-to-use-electro-product-template-hwchis/) · [Normcore Product Template](https://doc.ecomx.co/en/article/normcore-product-template-6ob83p/)