custom text Badge (perfume I inspiration text

Shopify Discussion
,

Topic summary

A user is attempting to add custom text badges to product cards on their perfume store using Shopify metafields, but the implementation isn’t working.

Steps attempted:

  • Created a product metafield named “Inspiration Text Badge” with namespace custom_badge.inspiration
  • Added Liquid code to product card templates to display the metafield value
  • Included CSS styling for the badge appearance

Key issues:

  • The badge is not displaying as expected
  • The user mentions difficulty finding the default product card file among 5+ product_liquid pages
  • Some code snippets in the post appear corrupted or reversed

Response provided:
Another user asked clarifying questions about whether metafield values were actually added to products, and requested essential troubleshooting details (store URL, theme name, specific error descriptions, inspectable URLs). They emphasized the need for a minimal reproducible example and offered paid customization services if needed.

Status: The issue remains unresolved, awaiting more detailed information from the original poster.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi All,

Please I need help , I tried to add a customer badges on my perfume store to show a text on top of the card but it won’t work ?

  1. Add a Product Metafield in Shopify:
  2. Go to your Shopify admin.
  3. Click on Settings at the bottom-left corner.
  4. In the Settings menu, click Custom data (or Metafields).
  5. Under *Products, click on *Add definition.
  6. Fill out the details:
  • Name: Inspiration Text Badge
  • Namespace and key: custom_badge.inspiration
  • Description: (Optional) Add description if needed.
  • Content type: Choose Single line text.

  1. Click Save.

  2. In the Sections or Snippets folder, find a file that contains the product card template, like product-card.liquid or product-grid-item.liquid.

liquid
{% if product.metafields.custom_badge.inspiration %}

{{ product.metafields.custom_badge.inspiration }}

{% endif %}

Step B: Modify the Product Page Template (to display badge on product pages)

liquid
{% if product.metafields.custom_badge.inspiration %}

{{ product.metafields.custom_badge.inspiration }}
{% endif %}

4. Add Styling to the Badge:

To style the badge, you’ll need to add some CSS:

  1. In the Assets folder, find your theme’s CSS file (theme.css, style.css, etc.).
  2. Add the following CSS to style the badge:

css
.custom-text-badge {
background-color: #f8e71c; /* Customize background color /
color: #000; / Customize text color */
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
display: inline-block;
margin-top: 10px;
}

Please note products_liquid there are 1-5 pages , I can’t find the default one check attached

2

Hi @NOOR456 :waving_hand: Did you give the metafields values in each products admin?

Beyond that you must make efforts to communicate details others need to understand problem.

Always remember others cannot see what you see, nor do we have the same store theme or setup or products.

What exactly “isn’t working”, is there an inspectable url, did you make a small test case to validate logic, etc etc

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

https://stackoverflow.com/help/minimal-reproducible-example

If you need this customization fixed for you then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi Qasem,

thank you , could you please drop your contact details