Add icon with text below the Add to Cart button (Yuva Theme)

[OneChefOn]

Hello everyone, I'd like to ask how to add content like this with icon and text below the Add to Cart button on the product page?

Thank you so much for help.

[rajweb]

Hey @OneChefOn ,

To add content like the icons with text (e.g. Free delivery, Easy returns, etc.) below the Add to Cart button on a Shopify product page, you can do this by editing your theme's product.liquid, main-product.liquid, or product-form.liquid file (depending on your theme structure).

Follow these Steps:

1. Online Store

2. Themes

3. Edit code

4. Find the product template file:

- Look for sections/main-product.liquid or sections/product-form.liquid

- In older themes, it may be templates/product.liquid

5. Locate the Add to Cart Button:

Look for a line like:

<button type="submit" class="product-form__submit">Add to cart</button>

6. Paste the following code below the Add to Cart form:

<div class="product-icons-with-text">
  <div class="product-icon-item">
    <img src="{{ 'icon-delivery.svg' | asset_url }}" alt="Free Delivery" />
    <span>Free delivery on orders over $99.95</span>
  </div>
  <div class="product-icon-item">
    <img src="{{ 'icon-return.svg' | asset_url }}" alt="Easy Returns" />
    <span>Easy returns up to 45 days</span>
  </div>
  <div class="product-icon-item">
    <img src="{{ 'icon-offers.svg' | asset_url }}" alt="Exclusive Offers" />
    <span>Exclusive online offers</span>
  </div>
  <div class="product-icon-item">
    <img src="{{ 'icon-secure.svg' | asset_url }}" alt="Secure Payments" />
    <span>Secure Payments</span>
  </div>
</div>

7. Upload the icons:

- go to Settings > Files or Edit Code > Assets

- Upload your icons (e.g. icon-delivery.svg, icon-return.svg, etc.)

- Replace the src in the <img> tag with the correct path if needed: 

src="{{ 'icon-name.svg' | asset_url }}"

Add this to your base.css or theme.css:

.product-icons-with-text {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.product-icon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  flex: 1 1 100%;
}

.product-icon-item img {
  width: 20px;
  height: 20px;
}

If you'd like help implementing this directly in your Shopify theme, feel free to reach out. Thanks!

Best Regards,

Rajat

[OneChefOn]

Thank you for your reply. Is the only icon format SVG? What about PNG?

[rajweb]

No, it doesn't have to be SVG only — PNG, JPG, WebP, etc. all work perfectly. Shopify's image_picker accepts any image format you upload, and the image_url filter handles all of them. So this works fine:

<img src="{{ block.settings.icon | image_url: width: 32 }}" alt="icon" />

Use SVG for crisp, scalable icons, but PNG is totally fine too if that’s what you have.

[CodingFifty]

Hey! @OneChefOn,

Step 1: Go to your Shopify Admin → Online Store → Themes → Click Actions → Edit code. Step 2: Inside the Sections folder, click Add a new section and name it icon-text.liquid. Step 3: Copy and paste the provided code into that new section.

{% schema %}
{
  "name": "Icon with text",
  "settings": [
    {
      "type": "header",
      "content": "Add icons with text below"
    },
    {
      "type": "text",
      "id": "icon_1",
      "label": "Icon 1 (SVG or Emoji)",
      "default": "🚚"
    },
    {
      "type": "text",
      "id": "text_1",
      "label": "Text 1",
      "default": "Free delivery on orders over $99.95"
    },
    {
      "type": "text",
      "id": "icon_2",
      "label": "Icon 2",
      "default": "↩️"
    },
    {
      "type": "text",
      "id": "text_2",
      "label": "Text 2",
      "default": "Easy returns up to 45 days"
    },
    {
      "type": "text",
      "id": "icon_3",
      "label": "Icon 3",
      "default": "🎁"
    },
    {
      "type": "text",
      "id": "text_3",
      "label": "Text 3",
      "default": "Exclusive online offers"
    },
    {
      "type": "text",
      "id": "icon_4",
      "label": "Icon 4",
      "default": "🔒"
    },
    {
      "type": "text",
      "id": "text_4",
      "label": "Text 4",
      "default": "Secure Payments"
    }
  ],
  "presets": [
    {
      "name": "Icon with text",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="icon-text-section">
  <ul>
    <li>{{ section.settings.icon_1 }} {{ section.settings.text_1 }}</li>
    <li>{{ section.settings.icon_2 }} {{ section.settings.text_2 }}</li>
    <li>{{ section.settings.icon_3 }} {{ section.settings.text_3 }}</li>
    <li>{{ section.settings.icon_4 }} {{ section.settings.text_4 }}</li>
  </ul>
</div>

<style>
.icon-text-section ul {
  list-style: none;
  padding: 0;
}

.icon-text-section li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}

.icon-text-section li::before {
  content: "";
  margin-right: 8px;
}
</style>

[OneChefOn]

Thank you for your detailed reply. I did see the custom section after following your reply. I may not have expressed it clearly. I want to create a customizable icon with text block under the "Product page" section of the product page, because according to your reply, I cannot drag the section below the add to cart button. I don't know if I have expressed my meaning clearly. I look forward to your reply.

[rajweb]

Sure! You can add the icon + text as a custom block inside main-product.liquid, so you can drag it below the Add to Cart button. Just define a new block in the schema, render it with:

{% if block.type == 'icon_text' %}
  <div><img src="{{ block.settings.icon | image_url: width: 32 }}" /><span>{{ block.settings.text }}</span></div>
{% endif %}

Now you can control it from the Theme Editor.

[CodingFifty]

Step 1 — Open your product template
Go to Online Store → Themes → Edit code → Sections → main-product.liquid (or product.liquid — whichever your theme uses for the product page).

Step 2 — Add the block schema
Inside your {% schema %} section, locate the blocks array and add this block definition:

{
  "type": "icon_with_text",
  "name": "Icon with Text",
  "settings": [
    {
      "type": "text",
      "id": "icon",
      "label": "Icon (SVG or Emoji)",
      "default": "🚚"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "Free delivery on orders over $99.95"
    }
  ]
}

Make sure it’s inside the blocks array in your schema JSON.

Step 3 — Render the block in your Liquid
Where you want the block to appear (for example, right below the Add to Cart button), add this loop inside your Liquid:

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'icon_with_text' %}
      <div class="icon-text-block">
        <span class="icon">{{ block.settings.icon }}</span>
        <span class="text">{{ block.settings.text }}</span>
      </div>
  {% endcase %}
{% endfor %}

<style>
.icon-text-block {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.icon-text-block .icon {
  margin-right: 8px;
  font-size: 20px;
}
</style>

[Guleria]

Hello @OneChefOn ,

I checked other replies but I'm not sure what's the need to edit the theme code to achieve this simple thing.

You have to just create a metafield with type multi-line-text. In this way this content will be dynamic, meaning you can change the content of each and every product.

Next step is in product page settings  use a custom liquid block and call the meatfield you created.

e.g. my metafield is  'Custom html' and namespace and key is 'product.custom_html' then I have to use this code in custom liquid block

{{ products.metafields.product.custom_html }}

Regards
Guleria