Show Custom Text and Product Metafields in Product Grid Elements
EComposer allows you to display additional content inside product cards in Product Grid, Related Products, and Collection Products elements.
This feature is useful when you want to show custom information that is not available in the default product card layout. For example, you can:
- Display a fixed message for all products, such as Free Shipping, 30-Day Returns, or Best Seller.
- Show custom product information stored in Shopify Product Metafields.
- Display product ingredients, materials, specifications, care instructions, size guides, or other product-specific content.
To achieve this, EComposer provides a set of hooks that allow you to safely insert custom HTML or Liquid code at predefined positions within the product card.
Step 1: Enable EComposer Hooks
Before adding custom content, you need to enable the EComposer Hook feature. Go to EComposer Dashboard → Settings → Store Details → Enable the EComposer Hook option and save your changes.
Once enabled, EComposer will create additional hook files that can be used to insert custom content into supported product grid elements.
Step 2: Locate the Product Grid Hook Files
Go to Shopify Admin → Online Store → Themes → Click Edit code
Open the Snippets folder and search for: ecom_product_loop
You will see a list of hook files corresponding to different positions within the product card layout. These files allow you to insert content before or after specific product information, such as the product title, price, or Add to Cart button.
Example 1: Display a Fixed Message for All Products
If you want to display the same text on every product card, such as Free Shipping Available, follow these steps:
Open the file ecom_product_loop_after_title, then add your HTML code to the file and save:
<div class="ecom-custom-text" style="text-align: center;">
Free Shipping Available
</div>
The text will now appear below the product title in all supported product grid elements.
Example 2: Display Product Metafields
Product Metafields allow you to store and display additional information for each product. Unlike fixed text, metafields can show different content for different products automatically.
For example, you may want to display:
- Ingredients
- Materials
- Product specifications
- Care instructions
- Size guide information
- Product highlights
- Warranty information
Before displaying a metafield in EComposer, you first need to create the metafield definition and add values to your products.
Create a Product Metafield
- Go to Shopify Admin → Settings → Metafields and metaobjects
- Select Products
- Click Add definition
- Enter the metafield information and save changes.
Example:
| Setting | Value |
|---|---|
| Name | Product Highlights |
| Namespace and key | custom.product_highlights |
| Type | Multi-line text |
Please watch the guide video below:
Add Values to Your Products
- Open your products in Shopify Admin.
- Scroll down to the Metafields section.
- Enter the content for the metafield.
- Save the product.
Watch this guide video:
Display the Metafield in Product Cards
After creating the metafield and adding values to your products, copy the code below and add it to the hook file where you want the content to appear. For example, to display the metafield below the Add to Cart button, you can add the code to this file: ecom_product_loop_after_cart_button
<div class="ecom-product-highlight" style="text-align: center; margin: 8px 0;">
{{ product.metafields.custom.product_highlights }}
</div>
Click Save and refresh your page in the app to see the result.
Important Notes
- Changes apply globally to all Product Grid, Related Products, and Collection Products elements. If you want to show it on a specific element only, you can use custom CSS code to disable it on other elements.
- Basic HTML and Shopify Liquid are supported.
- Only Product Metafields can be used for dynamic product-specific content.
- Incorrect code may affect the appearance of product cards, so make sure to use the correct code.
