Showcase subtitle / metafield data below products

[JarnoBroekkamp]

Hi everyone,

I’m working on my collection page and I’d love to add a short, descriptive line between the product title and the price – as shown in the screenshot attached.

For example:

Grandeur - Extrait de Parfum

Dried Spices - Burnt Woods

From €…

I’m not looking to add this in the product title itself, but rather as a separate text field, so it can be cleanly styled and edited per product. Ideally I’d like to do this using metafields, but I’m open to using an app or editing the theme code if needed.

How can I show these short scent descriptors on the collection page under each product? (See attached screenshot.)

[yash141]

Hi @JarnoBroekkamp

The easiest way to do this is with product metafields. That way you can add a little “descriptor” line for each product right from your Shopify admin, without messing up the product title.

1. In your Shopify admin, go to Settings → Custom data → Products and add a new metafield. Call it something like “Descriptor” and set it as Single line text.

2. Now when you edit a product, you’ll see that new field at the bottom. Just type in your short line there (e.g. “Dried Spices – Burnt Woods”).
3. Finally, edit your theme code. Open up the product card template (usually card-product.liquid) and, right under the product title, drop this in:

{% if product.metafields.custom.descriptor %}
  <p class="product-descriptor">{{ product.metafields.custom.descriptor }}</p>
{% endif %}

That’s it — you’ll now have a nice little extra line under the product name on your collection page. And the best part is you can update it per product without touching code again.

[tim_tairli]

Consider this: Custom badges - Shopify Themes

You may then style it with CSS to place where you want it.

I do not usually recommend editing theme code for the sake of easier updates to newer versions, but if you’re not happy with the idea of re-using custom badges, then it would be necessary to output this new content.
The code is already suggested above.

[devcoders]

Hi @JarnoBroekkamp

Perfect use case for Shopify metafields.
You don’t need an app — you can do this natively by creating a metafield and rendering it in your collection product card template.

Step 1: Create a metafield

1. Go to Shopify Admin → Settings → Custom data → Products → Add definition.
2. Name it something like Scent Descriptor.
3. Type: Single line text.
4. Namespace and key will become something like: custom.scent_descriptor.
5. Save.
6. Now go to each product and fill in the scent descriptor metafield (e.g., “Dried Spices – Burnt Woods”).

Step 2: Edit your collection product card

1. In your theme code, open sections/main-collection-product-grid.liquid (sometimes named main-collection.liquid) and look for where product cards are included. Usually it calls a snippet like:

{% render 'card-product', card_product: product %}

2. Open snippets/card-product.liquid (or similar — depends on your theme).
3. Find where the title and price are shown. Example:

<h3>{{ product.title }}</h3>
{% render 'price', product: product %}

4. Insert your metafield between the title and the price:

<h3>{{ product.title }}</h3>

{% if product.metafields.custom.scent_descriptor != blank %}
  <p class="product-scent">{{ product.metafields.custom.scent_descriptor }}</p>
{% endif %}

{% render 'price', product: product %}

Step 3: Style it

In base.css / theme.css add something like:

.product-scent {
  font-size: 14px;
  color: #666;
  margin: 4px 0;
  font-style: italic; /* optional */
}

Result:
Your product card will now look like this:

Grandeur - Extrait de Parfum
Dried Spices – Burnt Woods
From €…

Kindly feel free to get back to me if you need any further assistance.
If helpful, please like and accept the solution.

[WebDeskSolution]

Hello @JarnoBroekkamp

Step 1: Create the metafield definition

1. Go to Settings in your Shopify admin.

( Screenshot by Lightshot )

2. Navigate to Metafields and metaobjects > Products.

( Screenshot by Lightshot )

3. Click Add definition.

( Screenshot by Lightshot )

4. Fill in the details:

Name:`shortdescription`

Type: Multi-line text

 ( https://prnt.sc/a-zgyEfVv-0V )

5. Click Save.

Step 2: Add a short description to a product

1. Go to Products in your Shopify admin.

2. Select the product you want.

( Screenshot by Lightshot )

3. Scroll down to Product metafields.

4. In shortdescription, enter your text.

( Lightshot — screenshot tool for Mac & Win )

5. Save the product.

Step 3: Show the short description in your theme

1. Go to Online Store > Themes.

2. Find your live theme and click Actions > Edit code.

3. In the sidebar, search for `card-product.liquid`.

4. Inside that file, look for:

```liquid

{% render ‘price’ %}

```

5. Just **above** that line, add the following code:

```liquid

{% if card_product.metafields.custom.shortdescription %}

 <p>{{ card_product.metafields.custom.shortdescription }}</p>

{% endif %}

```
( Screenshot by Lightshot )

6. Save your changes.

Now, whenever you add a short description in the metafield, it will appear on your product cards above the price.

Please hit Like and Mark it as a Solution if you find our reply helpful.

[StoreGrowthPro]

Hi @JarnoBroekkamp,

Great idea — adding those short descriptors (like “Dried Spices – Burnt Woods”) under each product title is a perfect use case for metafields. That way, you don’t have to stuff it into the title, and you can style it cleanly across your collection grid.

Here’s how you can set it up without an app:

1. Create a Product Metafield

• In your Shopify admin, go to Settings → Custom Data → Products.

• Click Add definition → name it something like “Scent Notes” or “Descriptor”.

• Choose Single line text as the content type.

• Save it.

2. Add Descriptors to Products

• Open any product in your admin.

• Scroll down to the new “Scent Notes” metafield field.

• Add your custom text (e.g., “Dried Spices – Burnt Woods”).

3. Edit Your Collection Page Code

• In your theme editor, go to Online Store → Themes → Edit Code.

• Find the file that renders collection products. In Dawn and similar themes, it’s usually main-collection-product-grid.liquid or within card-product.liquid.

• Locate where the product title and price are rendered.

• Insert this snippet between them:

{% if product.metafields.custom.scent_notes %}
  <p class="product-descriptor">
    {{ product.metafields.custom.scent_notes }}
  </p>
{% endif %}

4. Style It (Optional)
In your base.css (or theme stylesheet), add something like:

.product-descriptor {
  font-size: 14px;
  color: #555; /* subtle grey */
  margin: 4px 0;
}

[TheUntechnickle]

Hey @JarnoBroekkamp!

Perfect use case for product metafields! I can see exactly what you’re going for - that elegant descriptor line between the product name and price would really elevate your perfume collection pages.

The solution above is on the right track, but let me give you the complete implementation with proper styling to match your aesthetic:

---

Complete Solution: Scent Descriptors on Collection Pages

Step 1: Create the Product Metafield

1. Go to Settings → Custom data → Products

2. Click Add definition

3. Configure it:

   • Name: Scent Descriptor

   • Namespace and key: custom.descriptor

   • Type: Single line text

   • Description: Short scent notes (e.g., “Dried Spices - Burnt Woods”)

4. Click Save

Step 2: Add Descriptors to Your Products

When you edit a product, you’ll now see the “Scent Descriptor” field. Add your scent notes there (like “Dried Spices - Burnt Woods” for Grandeur).

Step 3: Update Your Theme Code

1. Go to Online Store → Themes → Edit code

2. In the Snippets folder, find and open card-product.liquid

3. Look for the product title - it’ll be something like:

   <h3 class="card__heading">
     <a href="{{ card_product.url }}">{{ card_product.title }}</a>
   </h3>
   
   

4. Right after the closing </h3> tag (but before the price section), add:

{% if card_product.metafields.custom.descriptor != blank %}
  <p class="product-card__descriptor">{{ card_product.metafields.custom.descriptor }}</p>
{% endif %}

5. Click Save

Step 4: Add the Styling

1. In the Assets folder, open your main CSS file (usually base.css or component-card.css)

2. Scroll to the bottom and add this CSS:

/* Product scent descriptor */
.product-card__descriptor {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 0.5rem 0 0.75rem 0;
  line-height: 1.4;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Spacing adjustment */
.card__heading + .product-card__descriptor {
  margin-top: 0.4rem;
}

/* Mobile responsive */
@media screen and (max-width: 749px) {
  .product-card__descriptor {
    font-size: 0.8125rem;
    margin: 0.4rem 0 0.6rem 0;
  }
}

3. Click Save

---

Why This Approach Works Best:

Clean architecture - Keeps product titles clean for SEO while adding rich descriptions
Flexible - Only shows on products where you’ve added a descriptor
No app needed - Avoids monthly fees and keeps your store fast
Easy to manage - Update from the product admin, no code changes needed
Professional look - Subtle styling that matches high-end perfumery aesthetics
Bulk-friendly - You can import descriptors via CSV for multiple products at once

Pro tip for perfume stores: You can create a second metafield for “Scent Family” (like “Oriental Woody” or “Fresh Citrus”) if you want even more granular product information!

The result will give you that clean, boutique-style product presentation - perfect for luxury fragrances. Let me know if you need help locating the specific files in your theme!

Cheers!
Shubham | Untechnickle

[JarnoBroekkamp]

The Metafield is already standard within Shopify, i only need the code needed to showcase it on the field, examples below

[AiTrillion]

Hello @JarnoBroekkamp ,

I hope you are well!

Can you please share the screenshot where the code has been added?

[JarnoBroekkamp]

I haven’t added any code yet, because i would like to know which code i can use, i need the code to show the “scent” category metafield. Between the Product title and Price on collection pages

[oscprofessional]

Hi @JarnoBroekkamp ,
Step 1: Create a Metafield for Scent/Descriptor

1. Go to Shopify Admin → Settings → Custom Data → Products.
2. Click Add definition:

• Name: Scent Descriptor (or whatever you like)
• Namespace and key: details.scent
• Content type: Single line text

3. Save.
4. Edit each product and fill in the metafield with the short descriptor you want (e.g., “Extrait de Parfum”).

---

Step 2: Add Metafield to Collection Template

You need to edit your theme’s collection product snippet. Usually, it’s product-card.liquid or product-grid-item.liquid (depends on theme).

Find the section where the title and price are rendered, e.g.:

<h2 class="product-card__title">{{ product.title }}</h2>
<span class="product-card__price">{{ product.price | money }}</span>

Add the metafield in between:

<h2 class="product-card__title">{{ product.title }}</h2>

{% if product.metafields.details.scent != blank %}
  <div class="product-card__descriptor">
    {{ product.metafields.details.scent }}
  </div>
{% endif %}

<span class="product-card__price">{{ product.price | money }}</span>

Step 3: Style the Descriptor (CSS)

Add some CSS to your theme (e.g., theme.scss.liquid or base.css):

.product-card__descriptor {
  font-size: 14px;
  color: #666; 
  margin: 4px 0; 
  font-style: italic;
}

[JarnoBroekkamp]

Nothing seems to work!

[tim_tairli]

Ok, here is the code to try:

1. This should go into your product card liquid code.
   I do not have theme code available, so you need to decide whether product object is referenced by product or card_product, here I’ve used product

{{ product.metafields.shopify.scent | metafield_text: field: 'label' }}

This will product output like at the bottom of this screenshot:

If you need fancier formatting, the code should be like this

{{ product.metafields.shopify.scent | metafield_tag: field: 'label' }}

And then you’d need
2. Add this code to your stylesheet, or “Custom CSS” in theme settings or section settings:

ul.metafield-single_line_text_field-array {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

li.metafield-single_line_text_field {
  border: 1px solid silver;
  padding: 0 1rem;
  border-radius: 0.5rem;
}

The rseult will be like this:

[oscprofessional]

@oscprofessional

Scent Descriptor

Have you create a meta field like this

• Name: Scent Descriptor (or whatever you like)
• Namespace and key: details.scent
• Content type: Single line text

[JarnoBroekkamp]

Works great!

One question, which code can i add to custom css to make the text smaller. Then it would look perfect!