> ## 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).

# Blum Product Template

**Theme:** Blum · **Section type:** Template (product page)

The product template controls how every product page looks. Use it to choose how product media appears, which product details customers see, and what extra content (disclosures, complementary products, related products) helps them decide to buy.

> **Note:** The default product template has a Product details section and a Product recommendation section, plus any other sections you add. Most Product details blocks can be added once. Custom Liquid and Custom text can be added several times.
![Product page with a collage gallery, variant swatches, and the buy buttons](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pt-1_7trfyn.png)

**What you can do**
- Open the product template
- Choose how product media appears
- Add and arrange product information blocks
- Show safety and regulatory disclosures
- Show complementary products and pickup availability
- Let customers send a gift card to someone else
- Add an advanced description below the product
- Turn on the sticky purchasing bar
- Show related products below the product
- Take pre-orders on the product page
- See what customers see
- Change the Product details and Product recommendation settings
- Fix common problems

---

## Open the product template
1. In the theme editor, open the page selector at the top.
2. Click **Products** > **Default product**.
3. In the left sidebar, click **Product details** to open the section settings.

> **Tip:** Changes to the default product template apply to every product that uses it. To give some products a different layout, create a new product template and assign it to those products in the Shopify admin.

## Choose how product media appears
1. Click **Product details**.
2. Under **Media**, choose the **Media ratio** and **Thumbnail ratio**.
3. Choose the **Layout on large screen**: thumbnails left, right, or below one large image, or a gallery grid (**Collage**, **1 column**, or **2 columns**).
4. Choose the **Width on large screen**: **Wide** or **Compact**.
5. Optional: select **Enable zoom function**, so customers can open the images full screen.
6. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Thumbnail ratio | Sets the shape of the thumbnails. Options under Fill crop the image to fill the shape. Options under Fit show the whole image inside the shape. |
| Media background | Fills the space around transparent images (for example PNG files) with a color. |

## Add and arrange product information blocks
1. In the left sidebar, under **Product details**, click **Add block**.
2. Select a block, for example **Size guide**, **Extra information**, or **Rating**.
3. Drag the blocks up or down to change their order on the page.
4. Click a block to change its settings.
5. Click **Save**.

> **Tip:** Keep **Title**, **Price**, **Variant selector**, and **Purchasing** near the top, so customers see the price and the buy button without scrolling.

## Show safety and regulatory disclosures
The **Disclosures** block shows the safety warnings and regulatory notices that you add to a product in the Shopify admin. Available in Blum 3.9 and later.

1. In the Shopify admin, add the disclosures to the product, and choose to show them on the product page.
2. In the theme editor, under **Product details**, click **Add block** > **Disclosures**.
3. Enter a **Heading**, for example "Safety information".
4. Optional: clear **Collapse content** to show the disclosures open.
5. Optional: select **Show below gallery on desktop** to place the disclosures under the product images on large screens.
6. Click **Save**.

> **Note:** The block appears only on products that have disclosures set to show on the product page. Disclosures set to show in the cart appear under the product in the cart and the cart drawer.

## Show complementary products and pickup availability
**Complementary products**
1. In the Shopify admin, use the Search & Discovery app to choose the complementary products for each product.
2. In the theme editor, under **Product details**, click **Add block** > **Product cross sell**.
3. Enter a **Heading**, for example "Frequently bought together".
4. Set **Maximum products to show**, from 1 to 10.
5. Click **Save**.

**Pickup availability**
1. In the Shopify admin, set up local pickup for your store locations.
2. In the theme editor, click **Add block** > **Pickup availability**.
3. Choose the **Accent scheme**, and select **Show expected pickup time** if you want customers to see when the order is ready.
4. Click **Save**.

## Let customers send a gift card to someone else
1. Under **Product details**, click the **Purchasing** block.
2. Select **Show recipient information form for gift card products**.
3. Click **Save**.

On gift card products, customers see a **Send a gift** check box. When they select it, they can enter the recipient's email, name, a message of up to 200 characters, and a send date. Other products don't show the form.

## Add an advanced description below the product
The advanced description shows extra content under the product details, across the full width of the page.

1. Click **Product details**.
2. Under **Advanced description**, choose a **Content source**:
   - **Static page**: select a page. Its content shows on every product that uses this template.
   - **Product metafield**: connect **Product metafield name** to a product metafield with the dynamic source button. Each product shows its own content.
3. Click **Save**.

## Turn on the sticky purchasing bar
1. Click **Product details**.
2. Under **Sticky purchasing bar**, select **Show sticky purchasing bar when scrolling down**.
3. Choose what the bar shows: **Show price**, **Show variants**, and **Show product information on mobile**.
4. Choose the **Button type**: **Add to cart** or **Dynamic checkout button**.
5. Choose the **Position**: **Bottom left** or **Bottom right**.
6. Click **Save**.

## Show related products below the product
The **Product recommendation** section shows products related to the one customers are viewing. Shopify picks them from product information and order history. To choose them yourself, use the Search & Discovery app.

1. In the left sidebar, click **Product recommendation**.
2. Enter a **Heading**.
3. Under **Layout**, choose the **Style**, the **Items per row on desktop** and **on mobile**, and **Items to show**.
4. Click **Save**.

## Take pre-orders on the product page
Pre-order is available in Blum 3.9 and later. You set it up in **Theme settings** > **Product information** > **Pre-order**. See the article "Pre-order" for the full setup.

When pre-order applies to the selected variant, the **Add to cart** button and the sticky purchasing bar button show the pre-order **Button label** instead. In the cart, the item shows the pre-order **Cart message**, for example "Pre-order: Ships in 2 weeks".

## What customers see
- **Large screens:** the media appears on the left and the product details on the right. With **Enable sticky content when scrolling**, the shorter column stays in view while customers scroll.
- **Media:** customers click an image to open it full screen and zoom, when **Enable zoom function** is on. On mobile, they swipe through the media and see a number counter or thumbnails.
- **Variants:** when customers pick a variant, the price, stock, image, and buy button update for that variant.
- **Popups:** **Size guide** and **Popup content** appear as links. Customers click them to open the page content in a popup.
- **Sticky purchasing bar:** when customers scroll down the product details, the bar appears at the bottom of the screen, so the buy button stays in reach. On screens 458 px wide or less, it spans the full width.
- **Below the product:** the advanced description, then your other sections, then the related products.
![Pickup availability block and the sticky purchasing bar](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/pt-2_1f93bda.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit the schemes in Theme settings > Colors. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Enable sticky content when scrolling | Keeps the shorter column (media or product details) in view while customers scroll the longer one. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Media
| Setting | What it does |
| ---- | ---- |
| Media ratio | Sets the shape of the main media: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
| Thumbnail ratio | Sets the shape of the thumbnails: Square (1:1), Portrait (2:3), or Landscape (3:2). Fill options crop the image. Fit options show the whole image. |
| Enable zoom function | Lets customers open the media full screen and zoom in. |
| Layout on large screen | Shows one large image with Thumbnails left, Thumbnails right, or Thumbnails below, or all media in a Collage, 1 column, or 2 columns grid. |
| Width on large screen | Wide gives the media more of the page width. Compact gives it less. |
| Show paginations as number on mobile | Shows a counter (for example 1/5) on the mobile media slider. |
| Show media thumbnails on mobile | Shows thumbnails under the media on mobile. |
| Media background | Sets the color behind transparent images. |

### Advanced description
| Setting | What it does |
| ---- | ---- |
| Content source | Shows content from a Static page or a Product metafield below the product details. See "Add an advanced description below the product" above. |
| Static page | Selects the page whose content appears on every product. |
| Product metafield name | Shows the content of the connected product metafield. Connect it with the dynamic source button. |

### Sticky purchasing bar
| Setting | What it does |
| ---- | ---- |
| Show sticky purchasing bar when scrolling down | Shows a bar with the buy button at the bottom of the screen when customers scroll down. |
| Show price | Shows the price under the product title in the bar. |
| Show variants | Shows the selected variant under the product title in the bar. |
| Show product information on mobile | Shows the selected variant in the bar on mobile too. |
| Button type | Shows an Add to cart button or a Dynamic checkout button (for example Shop Pay or PayPal). |
| Position | Places the bar at the Bottom left or Bottom right on screens wider than 458 px. |

### Title block settings
| Setting | What it does |
| ---- | ---- |
| Enable share | Shows a share button next to the product title. |

### Vendor and SKU blocks
These blocks have no settings. They show the product vendor and the SKU of the selected variant.

### Price block settings
| Setting | What it does |
| ---- | ---- |
| Show sale badge | Shows a sale badge next to the price when the variant has a compare-at price. |
| Show tax and shipping policy | Shows a note about taxes and a link to your shipping policy below the price. |
| Show background | Places the price in a shaded box. |
| Text size | Sets the price size: Small, Medium, Large, or Custom. |
| Custom text size | Sets the price size from 14 px to 48 px. Appears only with Custom. |
| Text color | Sets the price color. |

### Variant selector block settings
| Setting | What it does |
| ---- | ---- |
| Show stock number | Shows how many items are left. Without it, customers still see a basic stock status. Set the low stock threshold in Theme settings > Product information. |
| Selector type | Shows the options as Button or Dropdown. |
| Show variant swatches | Shows color or image swatches. Set up the swatches in Theme settings > Product information > Variant swatches. |

### Purchasing block settings
| Setting | What it does |
| ---- | ---- |
| Show quantity selector | Shows the quantity field Always, Never, or After adding to cart once. |
| Show dynamic checkout buttons | Shows buttons such as Shop Pay, PayPal, or Apple Pay under Add to cart. |
| Show recipient information form for gift card products | Lets customers send a gift card product to someone else. See "Let customers send a gift card to someone else" above. |

### Disclosures block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the title of the disclosures group. |
| Collapse content | Shows the disclosures closed, so customers click the heading to open them. |
| Show below gallery on desktop | Places the disclosures under the product media on large screens. On mobile, they stay in the product details. |

### Basic description block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Adds a heading above the product description. |
| Collapsible content | Shows the description in a section that customers open and close. |
| Expand collapsible by default | Shows the description open when the page loads. Appears only with Collapsible content. |
| Enable icon | Shows an icon next to the heading. |
| Accent scheme | Colors the icon with the Main or Extra accent color, or None. Appears only with Enable icon. |
| Icon source | Uses an icon from the Theme library, a Custom image, or Custom SVG code. Appears only with Enable icon. |
| Theme library | Selects the icon. Appears only with Theme library. |
| Custom image | Selects a square image as the icon. Appears only with Custom image. |
| Custom SVG | Adds SVG code for the icon. Appears only with Custom SVG. |

### Extra information block settings
| Setting | What it does |
| ---- | ---- |
| Enable icon | Shows an icon next to each item heading. |
| Accent scheme | Colors the icons with the Main or Extra accent color, or None. Appears only with Enable icon. |
| Display style | Shows up to 4 items as Horizontal blocks, Vertical collapsibles, or Horizontal tabs. |
| Icon source (Item 1–4) | Uses an icon from the Theme library, a Custom image, or Custom SVG code for the item. |
| Heading (Item 1–4) | Sets the item title. Leave it empty to hide the item. |
| Content (Item 1–4) | Sets the item text. |

### Size guide block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the link text that opens the size guide popup. |
| Content source | Shows content from a Static page or a Product metafield in the popup. |
| Selected page | Selects the page to show. Contact forms on the page don't appear. |
| Product metafield name | Shows the content of the connected product metafield. Connect it with the dynamic source button. |
| Icon source | Uses an icon from the Theme library, a Custom image, or Custom SVG code next to the link. |

### Pickup availability block settings
| Setting | What it does |
| ---- | ---- |
| Accent scheme | Colors the pickup box with the Main or Extra accent color. |
| Show expected pickup time | Shows when an order is usually ready for pickup. |

### Popup content block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the link text that opens the popup. |
| Selected page | Selects the page shown in the popup. Contact forms on the page don't appear. |

### Custom Liquid and Custom text block settings
| Setting | What it does |
| ---- | ---- |
| Liquid code | Adds your own Liquid code (Custom Liquid). |
| Text | Adds a short line of text (Custom text). |
| Text style | Shows the text in Body or Body light style (Custom text). |

### Product cross sell block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the heading above the complementary products. |
| Maximum products to show | Shows from 1 to 10 complementary products. |

### Share block settings
| Setting | What it does |
| ---- | ---- |
| Facebook, X / Twitter, Pinterest, Email | Choose which share buttons to show. |

### Rating block settings
| Setting | What it does |
| ---- | ---- |
| Star rating | Sets the star color. Choose your review app in Theme settings > Product information. |

### Variations block settings
| Setting | What it does |
| ---- | ---- |
| Option name | Sets the label above the linked products, for example Color. See the article "Blum How To Setup Product Siblings". |

### Product recommendation: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. |
| Heading | Sets the section heading. |

### Product recommendation: Layout
| Setting | What it does |
| ---- | ---- |
| Style | Standard shows the product details below the image. Card shows them on the image. |
| Items per row on desktop | Shows 3, 4, 5, or 6 products in each row on large screens. |
| Items per row on mobile | Shows 1 or 2 products in each row on mobile. |
| Content alignment | Aligns the heading Left or Center. |
| Items to show | Shows from 1 to 10 related products. |
| Enable carousel on mobile | Turns the products into a swipeable row on mobile. |
| Show navigation on mobile | Shows previous and next arrows on the mobile carousel. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

## Troubleshooting
**The Disclosures block doesn't show on my product.**
The block appears only when the product has disclosures set to show on the product page. Add them to the product in the Shopify admin.

**The Product cross sell block is empty.**
The block shows the complementary products that you choose in the Search & Discovery app. Add complementary products for this product.

**The Size guide link can't be clicked.**
The link is turned off when it has no content. Select a page in **Selected page**, or connect **Product metafield name** to a metafield.

**The sticky purchasing bar doesn't appear.**
Check that **Show sticky purchasing bar when scrolling down** is selected. The bar appears only after customers scroll down the page, and it hides again at the end of the product details.

**I can't add a second Price block.**
Most blocks can be added once per section. Only Custom Liquid and Custom text can be added several times.

## Related articles
- [Blum Featured Product](https://doc.ecomx.co/en/article/blum-featured-product-1euueqp/)
- [Blum How To Setup Product Siblings](https://doc.ecomx.co/en/article/blum-how-to-setup-product-siblings-ee16j2/)
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Cart template](https://doc.ecomx.co/en/article/blum-cart-template-1egjtoq/)
- [Blum Theme Settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/)