> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/pages/product-page/details.md).

# Details

Provides additional content blocks to add corresponding information about a product.

{% hint style="success" %}
Add each block by pressing the '**Add block**' to display the desired product details: [<mark style="color:$primary;">Collapsible row</mark>](#collapsible-row), [<mark style="color:$primary;">Complementary products</mark>](#complementary-products), [<mark style="color:$primary;">Description</mark>](#description), [<mark style="color:$primary;">Discount coupon</mark>](#discount-coupon), [<mark style="color:$primary;">Icon with text grid</mark>](#icon-with-text-grid), [<mark style="color:$primary;">Icon with text rows</mark>](#icon-with-text-rows), [<mark style="color:$primary;">Main info</mark>](#main-info), [<mark style="color:$primary;">Pickup availability</mark>](#pickup-availability), [<mark style="color:$primary;">Security badges</mark>](#security-badges), [<mark style="color:$primary;">Shipping and delivery</mark>](#shipping-and-delivery), [<mark style="color:$primary;">Tabs</mark>](#tabs), and [<mark style="color:$primary;">Variant pickers & Buy</mark>](#varian-pickers-and-buy).
{% endhint %}

## Collapsible row

**Heading**\
Enter the tab's title.

**Row content**\
Add the tab's text content.\
(Supports basic formatting like bold, italic, and links).

**Row content from page**

> *To display content from a page, two steps are required:*
>
> 1\. Create a page in *Shopify admin -> Online Store -> Pages*. Read more information in the '[Creating and editing pages](https://help.shopify.com/en/manual/online-store/add-edit-pages)' help page.
>
> 2\. Select the created page in the section.

**Open by default**

* **Enabled** - The section expands when the page loads.
* **Disabled** - Keeps it collapsed until clicked.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FMT5CgBiL2hdl6F1iEdqq%2Fproducts_collapsible%20row.png?alt=media&amp;token=b5ef70cf-aab0-4bc7-8dc7-f0b3ed5cb7e3" alt=""><figcaption></figcaption></figure>

***

## Complementary products

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Displays recommended products (requires using an app).\
Read the '[<mark style="color:$primary;">Customize product recommendations with Shopify Search & Discovery</mark>](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-recommendations)' help page for the details.

**Recommended app:** Search & Discovery app
{% endhint %}

> *Required steps:*
>
> 1\. Install the app.
>
> 2\. Apply settings in *Shopify admin -> Apps -> Search & Discovery app -> Recommendations*.
>
> 3\. Add the block in the section.
>
> 4\. Apply any changes in the block.&#x20;

**Heading**\
Enter the title for the complementary products.

**Open by default**

* **Enabled** - The section expands when the page loads.
* **Disabled** - Keeps it collapsed until clicked.

**Product count**\
Set the number of recommended products to display in this section (1-10).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FwqrLzYyqdMjhrotLcOgg%2Fproduct%20page_complementary%20products.png?alt=media&amp;token=00e66b43-8d7a-474e-9f10-c854720635c8" alt=""><figcaption></figcaption></figure>

***

## Description

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Displays a product description from the admin.
{% endhint %}

> *Required steps:*
>
> 1\. Add a description to each product in *Shopify admin -> Products*.
>
> 2\. Add the block in the section.

**Heading**\
Enter the title for this block.

**Collapsible row**\
Displays the description in a tab that a customer can expand or collapse.

***

## Discount coupon

**Coupon code**\
Enter the discount code that customers can use at checkout.

**Percentage**\
Sets the discount amount as a percentage (1-99% off).

**Heading**\
The main text used to introduce or highlight the coupon.

**End date**\
Use the field to paste a date when the coupon expires.

#### Colors

**Background**\
Set the coupon code background color.

**Text**\
Controls the color of all text in the coupon code section.

**Accent**\
Adjusts the color of the icon and coupon code.

**Line**\
Accent color of the vertical line separator.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FdbqjwI5zdAUU8WHtdHfK%2Fproduct%20page_discount%20coupon.png?alt=media&amp;token=c1c06228-4ce2-41a1-911a-d661b9a6fdce" alt=""><figcaption></figcaption></figure>

***

## Icon with text grid

**Max columns desktop**\
Set the number of columns in the row (1-4).

### Item

{% hint style="success" %}
Press the '**Add block**' to create and customize each card.\
The block can be added multiple times.
{% endhint %}

**Heading**\
Enter the card's title.

**Content**\
Add the card's text content.\
(Supports basic formatting like bold, italic, and links).

**Icon**\
Choose an icon from the available icon set.

**Image icon**\
Upload a custom image to use as an icon instead of the default one.

**Icon vertical alignment**\
Controls how the icon is aligned next to the content:

* **Top** – Aligns the icon with the top of the text.
* **Center** – Centers the icon vertically relative to the text.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FNHJ9qDhdnmjCJz9aFUoP%2Fproduct%20page_icon%20with%20text%20grid.png?alt=media&amp;token=82492be2-e89f-4516-b131-2dde46e6a20f" alt=""><figcaption></figcaption></figure>

***

## Icon with text rows

### Item

{% hint style="success" %}
Press the '**Add block**' to create and customize each row.\
The block can be added multiple times.
{% endhint %}

**Content**\
Add the text or information you want to display for this item.\
(Supports basic formatting like bold, italic, and links).

**Show icon**\
Turn this on to display an icon next to the content.

**Icon**\
Choose an icon from the available icon set.

**Image icon**\
Upload a custom image to use as an icon instead of the default one.

**Icon vertical alignment**\
Controls how the icon is aligned next to the content:

* **Top** – Aligns the icon with the top of the text.
* **Center** – Centers the icon vertically relative to the text.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FFZWBbFoYpRqLXKJC4OyK%2Fproduct%20page_icon%20with%20text%20rows.png?alt=media&amp;token=1f1821fc-8d5a-42e7-9d13-1e6576837e11" alt=""><figcaption></figcaption></figure>

***

## Main info

{% hint style="success" %}
Includes [<mark style="color:$primary;">Announcement</mark>](#announcement), [<mark style="color:$primary;">Attributes</mark>](#attributes), [<mark style="color:$primary;">Title</mark>](#title), [<mark style="color:$primary;">Product rating</mark>](#product-rating), [<mark style="color:$primary;">Badges</mark>](#badges), [<mark style="color:$primary;">Price</mark>](#price), [<mark style="color:$primary;">Product inventory</mark>](#product-inventory), and [<mark style="color:$primary;">Question form</mark>](#question-form).
{% endhint %}

### Announcement

**Text**\
Add a message to highlight promotions or important information.

**Source**\
Select where to display a countdown:

* **Block** - Displays settings from the current block.

**Timer mode**\
Choose how the countdown works:

* **Recurring**\
  Repeats automatically based on a schedule. Select in the '**Period**':
  * Every 30 minutes (at :00 and :30)
  * Every hour (at :00)
  * Daily (at midnight)
  * Weekly (Sunday midnight)
  * Monthly (1st day)
  * Yearly (Jan 1st)
* **Fixed end date**\
  Set a specific end date and time:
  * Year
  * Month
  * Day
  * Hour
  * Minute
* **Metafield** - Sets the countdown using a metafield.\
  *Note: This feature requires configuring additional settings in the admin. Read the details* [*<mark style="color:$primary;">here</mark>*](/triumph/customizable-features/countdown.md)*.*

#### Colors

**Text**\
Sets the color of the title.

**Countdown background**\
Changes the countdown background color.

**Countdown text**\
Controls the color of the numbers and labels inside the countdown.

***

### Attributes

> *Required steps:*
>
> 1\. Add attributes to each product in *Shopify admin -> Products*.
>
> 2\. Use the block's settings.

Choose which details to show below the product image:

* SKU
* Type
* Vendor

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FUPMyMPVuKxGcPBdCZ6dn%2Fproduct%20page%20details_attributes.png?alt=media&amp;token=7b235bf9-b43e-41b3-8f92-78eb21be59c4" alt=""><figcaption></figcaption></figure>

***

### Title

{% hint style="success" %}
Displays a product title from the admin.
{% endhint %}

**Font size**\
Controls how large the title appears on desktop screens (20-54).

**Mobile font size**\
Adjusts the title size specifically for mobile devices (20-34).

**Uppercase**\
Displays product titles in all capital letters.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FEuQkvKnFbMZssTlVjgR8%2Fproduct%20page%20details_title.png?alt=media&amp;token=bf3aab07-4c1d-4799-ae98-914fda47ad09" alt=""><figcaption></figcaption></figure>

***

### Product rating

***

### Badges

**Sale**\
Show a sale badge.

> This option requires adding the comparison price for each product or product variants in *Shopify admin -> Products*.

**Sale badge type**\
Choose how discounts are displayed:

* **Text** - Shows a simple label as the sale text.
* **Discount percent** - Converts text to the discount percentage.
* **Saved amount** - In addition to the text, display additional details, such as the amount.

**Pre-order**\
Tags products available for pre-order.

> The feature requires additional settings applied in *Shopify admin -> Products*:
>
> 1.

**Out of stock**\
Labels unavailable products and disables the '*Add to Cart*' button to prevent orders.

***

### Price

**Font size**\
Controls how large the price appears on desktop screens (20-40).

**Mobile font size**\
Adjusts the title size specifically for mobile devices (20-34).

**Tax information**\
Shows additional details about taxes (for example, whether taxes are included or calculated at checkout).

**Shipping policy**\
Provides a link or information concerning delivery terms, such as delivery times and costs.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FARsTH9VeqpAaXLrw2mZu%2Fproduct%20page%20details_price.png?alt=media&amp;token=49c146f8-47f6-41f2-baba-9f9f66bae171" alt=""><figcaption></figcaption></figure>

***

### Product inventory

Displays product stock availability information to customers.

**Low stock threshold**\
Set the inventory level that triggers a low stock message (1-100):

* **Inventory above the number** - Displays the '*In stock*' text.

<div align="left"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fe6bcVIcuDmleq9vpyTSu%2Fin%20stock.png?alt=media&amp;token=d4c9b164-de68-4b05-b13a-3d06eeab6d81" alt="" width="128"><figcaption></figcaption></figure></div>

* **Inventory below the number** - Shows the '*Low stock*' warning.

<div align="left"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FRQ82CzyOtLioHjft6e1H%2Flow%20stock.png?alt=media&amp;token=9ff610ec-0a93-497a-b681-59dc64e903b0" alt="" width="125"><figcaption></figcaption></figure></div>

**Show quantity for low stock**\
Displays the exact number of items remaining when stock is low.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FFZuoZuMYheQzNEyOKkzV%2Fproduct%20page%20details_product%20inventory.png?alt=media&amp;token=cccba7b1-57bd-404b-b4f6-2d4bda7ba319" alt=""><figcaption></figcaption></figure>

***

### Question form

**Link text**\
The clickable text that opens the question form (for example, 'Ask a question').

**Popup content**\
The title displayed in the pop-up when the form is opened.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FW1NdnfZ7VRfk445K0wux%2Fproduct%20page%20details_question%20form.png?alt=media&amp;token=907ad1f7-7e6c-4478-9e43-aa771b6117e0" alt=""><figcaption></figcaption></figure>

***

## Pickup availability

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** This feature requires additional settings in the Shopify admin.\
Read the '[<mark style="color:$primary;">Managing pickup in store orders in Shopify POS</mark>](https://help.shopify.com/en/manual/sell-in-person/shopify-pos/order-management/pickup-in-store-for-online-orders)' help page.
{% endhint %}

***

## Security badges

Displays trust or payment badges to help reassure customers during shopping and checkout.

**Heading**\
Enter a title for the security badges section.

**Default payments icons**

* **Enabled** - Automatically displays payment method icons based on your store’s payment settings.

> Set up payment methods in *Shopify admin -> Settings -> Payments*.

* **Disabled** - Shows custom icons using the [<mark style="color:$primary;">Badge</mark>](#badge) block.

**Badge height**\
Controls the displayed height of the badges and payment icons (30-60 px).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FCs7hl6a2vH4oDYKCT7dL%2Fproduct%20page%20details_sequrity%20badges.png?alt=media&amp;token=0e725fc3-4eda-40f7-81d5-0aa6f578cd9f" alt=""><figcaption></figcaption></figure>

***

### Badge

{% hint style="success" %}
Add the block for each new payment icon.
{% endhint %}

**Icon**\
Choose an icon from the available icon set.

**Image icon**\
Upload a custom image to use as an icon instead of the default one.

***

## Shipping and Delivery

{% hint style="success" %}
Use the [*<mark style="color:$primary;">Free shipping</mark>*](#free-shipping) and [*<mark style="color:$primary;">Delivery estimate</mark>*](#delivery-estimate) to customize the bar&#x73;*.*
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQ8BcJ2RJ7KZhg5kqfQJX%2Fproduct%20page_shipping%20%26%20delivery.png?alt=media&amp;token=752294a1-519a-4606-8b8b-24f6aaa32580" alt=""><figcaption></figcaption></figure>

***

### Free shipping

> Configure the Free shipping in *Theme settings ->* [*<mark style="color:$primary;">Free shipping</mark>*](/triumph/theme-settings/theme-settings.md#free-shipping).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQPmdPHY0qzpCsKuFRUzu%2Fproduct%20page_free%20shipping.png?alt=media&amp;token=42192b62-a02e-4bd6-b060-a0c522ed96a1" alt=""><figcaption></figcaption></figure>

***

### Delivery estimate

Displays an estimated delivery date for customer orders.

**Delivery time (days)**\
Set the average number of days required for delivery (1-100).

**Cutoff hour (24h format)**\
Set the daily order cutoff time using a 24-hour format (0-23).\
*Note: Orders placed after this time will be processed on the next business day.*

**Date format**\
Controls how the estimated delivery date is displayed.\
Use the following format options:

* **day** – weekday name
* **dd** – day number
* **mm** – month number
* **yyyy** – full year
* **yy** – short year

**Example:** Monday, 22/07/2026

**Time format**\
Choose how the delivery timer is displayed:

* **Full** – Shows the complete timer format.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fe2NwUO7PMjNV2v5PK87S%2Fproduct%20page_delivery%20full.png?alt=media&amp;token=9f6381bf-0a36-4b10-a8a0-4de198351c04" alt=""><figcaption></figcaption></figure>

* **Short** – Displays a simplified version.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FXi4gq8fhhhElzcvjzNWD%2Fproduct%20page_delivery%20short.png?alt=media&amp;token=4fa2d389-0b42-4d9a-a6b9-27695220553b" alt=""><figcaption></figcaption></figure>

#### Skip delivery days

Select days that should not be counted as delivery days.\
Available options:

* Sunday
* Monday
* Tuesday
* Wednesday
* Thursday
* Friday
* Saturday

***

## Tabs

{% hint style="success" %}
Build tabs using the [*<mark style="color:$primary;">Description</mark>*](#description-1) and [*<mark style="color:$primary;">Tab</mark>*](#tab).&#x20;
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Ffea9qPPBkhsY2BIakJMN%2Fproduct%20page_tab.png?alt=media&amp;token=a0bef892-08ba-464a-b5f4-5995df0dc60f" alt=""><figcaption></figcaption></figure>

***

### Description

Use the block to display a product description in the tab.

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Displays a product description from the admin.
{% endhint %}

> *Required steps:*
>
> 1\. Add a description to each product in *Shopify admin -> Products*.
>
> 2\. Add the block in the section.

***

### Tab

**Heading**\
Enter the tab's title.

**Content**\
Add the tab's text content.\
(Supports basic formatting like bold, italic, and links).

**Page**

> *To display content from a page, two steps are required:*
>
> 1\. Create a page in *Shopify admin -> Online Store -> Pages*. Read more information in the '[Creating and editing pages](https://help.shopify.com/en/manual/online-store/add-edit-pages)' help page.
>
> 2\. Select the created page in the section.

***

## Varian pickers & Buy

{% hint style="success" %}
Contains [<mark style="color:$primary;">Variant picker</mark>](#variant-picker), [<mark style="color:$primary;">Size guide</mark>](#size-guide), and [<mark style="color:$primary;">Buy buttons</mark>](#buy-buttons).
{% endhint %}

**Restrict form width**\
Limits how wide the product form appears.

**Form width**\
Sets the form width (700-800 px).

### Variant picker

**Style**\
Changes the design of product variants:

* **Dropdowns**

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FBSBAns0w1UBB8sCmNUhg%2Fvariant%20picker_dropdown.png?alt=media&amp;token=00541c9d-e38d-4631-9a2c-defcc08c5244" alt=""><figcaption></figcaption></figure>

* **Pills**

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F5SZNRexfFQO6xkIk3tSG%2Fvariant%20picker_pills.png?alt=media&amp;token=1f3880c5-c990-49a1-94ec-98bc8c118813" alt=""><figcaption></figcaption></figure>

#### Text swatches

**Fixed number per row**\
Keeps a consistent number of variants in each row.

**Per row on desktop**\
Sets the number of variants in one row on desktop screens (4-12).

**Per row on tablet and mobile**\
Controls the number of variants per row on smaller screens such as tablets and phones (2-5).

#### Color swatches

> Available when '*Pills*' is selected.

**Type**\
Choose how swatches appear:

* **Color swatch**

![](https://mpithemes.gitbook.io/triumph/~gitbook/image?url=https%3A%2F%2F4126621502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FkpREZeVZogNLjx09og4O%252Fuploads%252FeoaeHo04kZ1RJE0aQQsC%252Fimage.png%3Falt%3Dmedia%26token%3D8f854392-d34e-49d2-b09c-7d64ff73cb73\&width=768\&dpr=3\&quality=100\&sign=fb3a0672\&sv=2)

* **Variant image**

![](https://mpithemes.gitbook.io/triumph/~gitbook/image?url=https%3A%2F%2F4126621502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FkpREZeVZogNLjx09og4O%252Fuploads%252F61i95VEZXmYgGaGaZS0i%252Fimage.png%3Falt%3Dmedia%26token%3D226f3eda-b3dc-434a-a8b0-3eecb157ffca\&width=768\&dpr=3\&quality=100\&sign=28ba3f3e\&sv=2)

* **Text**

![](https://mpithemes.gitbook.io/triumph/~gitbook/image?url=https%3A%2F%2F4126621502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FkpREZeVZogNLjx09og4O%252Fuploads%252FxdNCUNaEGVox5J5TPMfN%252Fimage.png%3Falt%3Dmedia%26token%3Dbee97caa-21fb-418d-8da6-a36890cca51f\&width=768\&dpr=3\&quality=100\&sign=d408693c\&sv=2)

**Per row on desktop** (*only 'Variant image' and 'Text' types*)\
Sets the number of color variants in one row on desktop screens (4-12).

**Image ratio** *(only 'Variant image' type)*\
Set the image style:

* **Default** – Uses the configurations from *Theme settings ->* [*<mark style="color:$primary;">Product card</mark>*](/triumph/theme-settings/theme-settings.md#product-card).
* **Adapt to first image** – Uses the default proportions of the first image.
* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FyOOZcUqO8VgyOWCy1Mj3%2Fproduct%20page_variant%20picker.png?alt=media&amp;token=7e690daa-abb6-4e95-a846-b903c1ef1691" alt=""><figcaption></figcaption></figure>

***

### Size guide

**Link text**\
The clickable text opens the size guide.\
**Example:** 'Size guide'

**Popup heading**\
The title is displayed at the top of the size guide pop-up.

**Popup content source page**\
Select a page from your store to automatically display its content in the pop-up.

> Create a page in *Shopify admin -> Online Store -> Pages*.
>
> Read '[<mark style="color:$primary;">Creating and editing pages</mark>](https://help.shopify.com/en/manual/online-store/add-edit-pages)' article for the details.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FV32lih0mLeoD57bOZQxL%2Fproduct%20page_size%20guide.png?alt=media&amp;token=67897eea-fa59-47e9-8165-3a4b1c9b1c06" alt=""><figcaption></figcaption></figure>

***

### Buy buttons

**Show quantity selector**\
Allows customers to choose how many items to add to the cart.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F7S78JjbwjI28qISkBtgH%2Fproduct%20page_quantity.png?alt=media&amp;token=44291c1f-31ad-4a43-b172-4260eeef6470" alt=""><figcaption></figcaption></figure>

**Show price on button**\
Displays the product price directly on the '*Add to Cart*' button.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FD26ebPDogAO0zopwVQdf%2Fproduct%20page_add%20to%20cart%20price.png?alt=media&amp;token=ee86c6c9-d8e6-4439-8bcf-1437cbf24a7e" alt=""><figcaption></figcaption></figure>

**Dynamic checkout buttons**\
Shows fast checkout options based on the customer’s preferred payment method.

> The payment methods depend on several factors.
>
> Read the '[<mark style="color:$primary;">Accelarated checkout buttons</mark>](https://help.shopify.com/en/manual/online-store/dynamic-checkout)' article for the details.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FKis6fgv7XFFmV4Lq5zNI%2Fproduct%20page_checkout%20bttn.png?alt=media&amp;token=fbca7911-2fe2-43c0-be8e-bbce32b5dae3" alt=""><figcaption></figcaption></figure>

**Gift card sending options**\
Lets customers send gift cards to someone else, add a personal message, and choose a delivery date.

> Read the '[<mark style="color:$primary;">Add recipient fields to your gift card products</mark>](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/common-customizations/add-gift-card-recipient-fields)' article.

**Sticky add to cart button**\
Displays a fixed purchase button that stays visible while scrolling through the product page.

**Sticky button action**\
Choose what happens when the sticky button is clicked:

* **Add to cart** – Immediately adds the product to the cart.
* **Scroll to form** – Scrolls the page to the main product purchase form.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FNbx2vPbkBiguPwuBZpsy%2Fproduct%20page_sticky%20add%20to%20cart.png?alt=media&amp;token=affdf67d-d99e-4086-a2f3-09701588e28f" alt=""><figcaption></figcaption></figure>

#### Button 'Add to cart' colors <a href="#button-add-to-cart-colors-button-quick-view-colors" id="button-add-to-cart-colors-button-quick-view-colors"></a>

**Background**\
Sets the button background color.

**Background gradient**\
Applies a gradient background to the button.

**Border**\
Controls the button's border color.

**Text**\
Sets the button text color.

**Hover background**\
Changes the background color on hover.

**Hover background gradient**\
Applies a gradient background on hover.

**Hover border**\
Changes the border color on hover.

**Hover text**\
Changes the text color on hover.

#### Button 'Buy it now' colors

**Background**\
Sets the background color of the '*Buy it now*' button.

**Background gradient**\
Applies a gradient background.

**Text**\
Sets the text color.

**Hover background**\
Changes the background color on hover.

**Hover background gradient**\
Applies a gradient on hover.

**Hover text**\
Changes the text color on hover.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mpithemes.gitbook.io/triumph/pages/product-page/details.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.