Need custom css for metafields

Store Design
, , ,
1

This is my website: AromaticaParfums.com

I want this section to show two meta fields (Inspired By and Retail Price). Can anyone send me a custom css to make it appear?

The meta fields are already created.

IMG_9270
IMG_92701320×1722 138 KB

2

Is the ‘Inspired by’ text going to appear in the image as well? Will it be placed in the same location as it is currently shown? Please confirm.

Thank You

3

Yes. Above the price I want inspired by and retail price two meta fields

4

Hello @aromaticaparfum

<div class="custom-metafields">
  {% if product.metafields.custom.inspired_by %}
    <p class="inspired-by">
      <strong>Inspired By:</strong> {{ product.metafields.custom.inspired_by.value }}
    </p>
  {% endif %}

  {% if product.metafields.custom.retail_price %}
    <p class="retail-price">
      <strong>Retail Price:</strong> {{ product.metafields.custom.retail_price.value }}
    </p>
  {% endif %}
</div>

Note – If this doesn’t work or you don’t understand it, please send me a collaborator code so I can check and update it properly.

5

Not working. Saying to pick another selector

6

Hello @aromaticaparfum

Please share the metafields screenshot.

7

Hi @aromaticaparfum ,
Thanks for sharing your site. Since your metafields (Inspired By and Retail Price) are already created, you just need to output them in your product template (or product card snippet) and then apply a bit of CSS for styling.

If you want these to show on collection pages under each product, open your product card snippet (usually snippets/card-product.liquid, or sometimes snippets/product-grid-item.liquid).

Add this inside the product info container:

<div class="custom-meta">
  {% if product.metafields.custom.inspired_by %}
    <p class="meta-inspired">Inspired By: {{ product.metafields.custom.inspired_by }}</p>
  {% endif %}
  {% if product.metafields.custom.retail_price %}
    <p class="meta-retail">Retail Price: {{ product.metafields.custom.retail_price }}</p>
  {% endif %}
</div>

Replace custom with the namespace you used when creating metafields in Settings > Custom data > Products (e.g., details.inspired_by).

Add custom CSS for styling

.custom-meta {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #444; /* adjust to match your theme */
}

.custom-meta .meta-inspired {
  font-style: italic;
  color: #666;
}

.custom-meta .meta-retail {
  font-weight: 600;
  color: #111;
}
8

Hi @aromaticaparfum ,

Could you send me the Liquid code for your snippets/card-product.liquid file? I’ll be able to provide you with the complete edited version. Also, please share the keys for the two metafields, Inspired By and Retail Price.

Looking forward to helping you!

Best,
Felix

9

Hi @aromaticaparfum,

I checked and did you add the code to display it?

Please send me the code, I will guide you to change it.