Free Shipping Badge - Empire Theme

Shopify Discussion

Topic summary

Goal: Add a visible “Free Shipping” badge on product pages in the Empire theme.

Approaches offered:

  • App-based: Use a third‑party app (Product Badges or Trust Badges) to add and manage badges; support available. Includes a screenshot (not essential to follow the steps).
  • Code-based (no app):
    1. Shopify Admin > Online Store > Customize.
    2. Select Product Pages.
    3. In Product Information, Add block > Custom Liquid.
    4. Paste a Liquid/SVG snippet that renders a van icon and the text “Free shipping.”
    5. Save.

Latest update/clarification:

  • Icon color change: To make the van white, add fill=“#fff” to the relevant SVG element in the snippet.

Notes:

  • The provided code shows a static badge on all product pages. Although the OP mentioned a “Free Shipping” product tag, no tag‑based conditional logic was provided.
  • Code snippets (SVG in a Custom Liquid block) are central to the solution.

Status: Practical solutions provided (app or simple Custom Liquid). No explicit confirmation of resolution; tag-based implementation remains unaddressed.

Summarized with AI on December 12. AI used: gpt-5.
1

I want to add a Free Shipping badge to my products. How can I go about doing this?

Edit: Note that I’m looking for a simple code and where to insert it in the Empire theme to utilize a Free Shipping tag added to every product profile as all products on our site ship free.

2

Hi @AVID1 ,

You can easily accomplish this by using our Product Badges or Trust Badges. And if you encounter any issues, our technical support team is always ready to assist :hugs:

Amanda_Fordeer_0-1732244343130.png
Amanda_Fordeer_0-1732244343130.png1921×1066 235 KB

3
  1. Go to Shopify Admin > Online Store > Customize. https://prnt.sc/82ylOl745HYR
  2. Select Product Pages from the top menu.
  3. In Product Information, click Add Block > Custom Liquid.
  4. Paste below Liquid code
  5. Save changes to apply the update.

Free shipping
4
  1. Go to Shopify Admin > Online Store > Customize. https://prnt.sc/82ylOl745HYR
  2. Select Product Pages from the top menu.
  3. In Product Information, click Add Block > Custom Liquid.
  4. Paste below Liquid code
  5. Save changes to apply the update.

Free shipping
5
  1. Go to Shopify Admin > Online Store > Customize. https://prnt.sc/82ylOl745HYR
  2. Select Product Pages from the top menu.
  3. In Product Information, click Add Block > Custom Liquid.
  4. Paste below Liquid code
  5. Save changes to apply the update.

Free shipping
6

Hi, is there a way to change the little van to white ?

7

You can change the color of the van in your SVG by adding a fill attribute to the SVG element you want to style.
For example, setting fill=“#fff” will make the element white.


Free shipping