> 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/template/shared-blocks/product.md).

# Product

**Link**\
Replaces a default product link with the specific one.

#### Desktop layout

**Columns**\
Sets the number of columns for a specific product in the grid (1-12).\
*Note: Set the product grid width using the 'Width on desktop'.*

**Rows**\
Sets the number of rows that a product/products are depicted.

**Aspect ratio on mobile**\
Controls the shape of product images on mobile screens (50-150%).\
*Note: Defined as height relative to width (for example, a higher value makes images taller).*

* **50%** - Landscape (4:3 ratio).
* **100%** - Squared (1:1 ratio).
* **150%** - Portrait (3:4 ratio).

{% hint style="success" %}
Example from the '*Products collage*' section.
{% endhint %}

> The '*Products collage*' contains three '*Product*' blocks.\
> Applied settings in each block:
>
> *Product #1:*\
> Columns - 6\
> Rows - 4
>
> *Products #2:*\
> Columns - 6\
> Rows - 2
>
> *Product #3:*\
> Columns - 5\
> Rows - 2

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fmzwf2j81mKqr6txiri5F%2Fproducts%20collage_product.png?alt=media&amp;token=ae17a86e-13aa-4630-a747-ff56c10062c8" alt=""><figcaption></figcaption></figure>

#### Content <a href="#content" id="content"></a>

**Product**\
Select a product.

**Change image on hover**\
Shows second product image on hover.\
This option requires adding a second image for a product in the *Shopify admin -> Products*.

**Image**\
Replace the default product image.

**Hover image**\
Replace the default product image on hover.

To display the following product-related information, add it in the *Shopify admin -> Products*.\
The information appears on the product card.

**Show vendor / title / price**\
Toggle product details.

**Position / Position on mobile**\
Place text within the banner: Top, Center, or Bottom.

**Alignment / Alignment on mobile**\
Set text alignment to Left, Center, or Right.

#### Badge <a href="#badge" id="badge"></a>

**Show**\
Enables the display of a badge.

**Content type**\
Choose how discounts are displayed:

* **Custom text** - Shows a simple label as the sale text.

**Note!** The '*Discount percen*t' and '*Saved amount*' options require a configured compare-at price per product or product variant in the *Shopify admin -> Products*.

* **Discount percent** - Converts text to the discount percentage.
* **Saved amount** - In addition to the text, display additional details, such as the amount.

**Icon**\
Choose an icon or select '**None**' to disable it.

**Icon SVG**\
Upload a custom icon instead of using a built-in one.

**Position / Position on mobile**\
Set badge placement:

* Top left
* Top center
* Top right
* Attach to content - Positions the badge above the text and treats the text area as its container, following the same positioning rules as other text elements.

**Hide on mobile**\
Disable badge on mobile devices. After disabling the '*Hide on mobile*' option, the '*Position on mobile*' drop-down is concealed.

#### Colors <a href="#colors" id="colors"></a>

**Text / Hover text**\
Sets product text colors.

**Sale price**\
Sets compare-at price color.

#### Badge colors <a href="#badge-colors" id="badge-colors"></a>

**Text / Background**\
Customize badge appearance.

#### Overlay <a href="#overlay" id="overlay"></a>

Add a color overlay to the banner:

**Style**

* **Full background** – Covers the entire banner with a solid overlay.
* **Gradient** – Applies a fading overlay from bottom to top.

Additional background settings:

**Opacity**\
Controls transparency (0–100%).

**Color**\
Select overlay color.

* **None** – Disables overlay.