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

# Product

The Product block displays a single product card with all its details, images, and purchase options. This block is perfect for featuring specific products in custom layouts, showcasing individual items, or creating curated product displays. The product card includes the product image, title, price, and various options like quick add buttons, variant selection, and ratings. You can customize how the product appears to match your design needs.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Fkqlwj8CrbhRW5ww6F9pF%2Fimage.png?alt=media&amp;token=cd1a9d03-ee36-47da-a1e7-4ee1e994d13c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**).&#x20;
3. Click **Add block** and select **Product**.
4. Make your changes, preview live, then click **Save**.
   {% endhint %}

***

### Settings

* **Product**: Select the product you want to display in this block. Choose from your store's product catalog.
* **Card color scheme**: Choose the color scheme for the product card. This controls the colors of the card background, text, and other elements to match your section's design.
* **Card size (desktop)**: Choose how wide the product card appears on desktop devices. Options are S (smallest), M (medium), or L (largest). This setting only affects desktop view; mobile devices use a responsive layout.
* **Image ratio**: Choose the aspect ratio for the product image. Select "Square" for 1:1 images, "Portrait" for taller images, "Landscape" for wider images, or "Tall" for very tall images. This affects how the product image is cropped and displayed.
* **Vendor**: When enabled, displays the product vendor name on the product card. This is useful for stores that sell products from multiple brands or manufacturers.
* **Quick add**: When enabled, displays a quick add button on the product card that allows customers to add the product to their cart without visiting the product page. This is enabled by default.
* **Quick view**: When enabled, displays a quick view button that opens a popup with product details without leaving the current page. This helps customers see more information quickly.
* **Show swatches**: When enabled, displays color or variant swatches on the product card. This is useful for products with multiple color or style options.
* **Product rating**: When enabled, displays the product's rating and reviews on the card. An app is required for ratings to work. Learn more about setting up product ratings in Shopify.
* **Show availability**: When enabled, displays whether the product is in stock or out of stock on the product card. This is enabled by default to help customers know if they can purchase the item.
* **Show variants**: When enabled, displays all available product variants (like sizes, colors, etc.) on the product card. This is enabled by default. If you want to show only specific variants, you can use the "Custom product variants" field below.
* **Custom product variants**: Enter the names of specific variants you want to show on the product card, separated by commas. For example: "Color, Shoe size". Leave this blank to show all variants (when "Show variants" is enabled).
* **Metafields to show**: Enter the metafields you want to display on the product card, separated by commas. For example: "metafield\_namespace.metafield\_key, metafield\_namespace.metafield\_key". This allows you to show custom product information like materials, care instructions, or other details.

***

### Tips

* Use the card size setting to control how much space each product takes up in your layout. Smaller cards work well in grid layouts with multiple products, while larger cards are perfect for featuring individual products.&#x20;
* Enable quick add for products you want customers to purchase quickly, and use quick view for products that need more explanation.&#x20;
* The variant and metafield options give you flexibility to show exactly the information that matters most for each product.

***

### Available in

{% columns %}
{% column %}
{% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %}
[Image with text](/docs/theme-sections-by-category/media/image-with-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %}
[Multirow](/docs/theme-sections-by-category/media/multirow.md)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/Wmt8TDWWKKgM4L4MnFhX" %}
[Media Banner](/docs/theme-sections-by-category/banners/media-banner.md)
{% endcontent-ref %}

{% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %}
[Rich Text](/docs/theme-sections-by-category/informative/rich-text.md)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}