How can I add a code to a metafield to use dynamic from product?

Shopify Discussion
1

Hello everyone,
I want to use different codes for my products to display images and bullets in a list.
I would like to create a meta field for this and integrate it dynamically.
Can you help me which meta field setting I need to use to insert this code? Thank you very much.

Code:

Bild 1 Hohe Qualität
Bild 2 Schneller Versand
Bild 3 Kostenlose Retoure
Bild 4 24/7 Kundenservice
Bild 5 +100 zufriedene Kunden
/* Ganze Box */ .sh-product-benefits-container { width: fit-content; padding: 0px 0px; background-color: #ffffff; border-radius: 0px; margin-top: -20px; margin-bottom: 0px; } /* Benefit Zeilen */ .sh-product-benefits-row { display: flex; align-items: center; margin: 8px 0; padding: 0px 0px; background-color: #ffffff; color: #000000; border-radius: 30px; width: fit-content; } /* Icon */ .sh-product-benefits-img { width: 17px; margin-right: 8px; height: auto; margin-block: unset !important; } /* Text */ .sh-product-benefits-text { flex: 1; padding-top: 2px; font-size: 16px; }
2

Hey @Flop ,

Based on your code, you need a meta field that can store multiple benefit entries, each with an image and text.

For Shopify products, you can use a metafield with the following settings:

  1. Create a metafield definition in your Shopify admin:
    • Namespace: product_benefits
    • Key: benefits_list
    • Type: JSON
    • Description: “Product benefits with image and text”
  2. The JSON structure should be an array of objects, each containing an image URL and text:
[
  {
    "image": "https://cdn.shopify.com/s/files/1/0548/9164/2935/files/kreuz_Medical_17aa3fd3-fc82-4725-89d2-59f67ed...",
    "text": "Hohe Qualität"
  },
  {
    "image": "https://cdn.shopify.com/s/files/1/0548/9164/2935/files/kreuz_Medical_17aa3fd3-fc82-4725-89d2-59f67ed...",
    "text": "Schneller Versand"
  }
]
  1. Then, you can use Liquid code in your product template to dynamically generate your HTML:
{% if product.metafields.product_benefits.benefits_list %}
  <div class="sh-product-benefits-container">
    {% assign benefits = product.metafields.product_benefits.benefits_list %}
    {% for benefit in benefits %}
      <div class="sh-product-benefits-row">
        <img src="{{ benefit.image }}" alt="Benefit {{ forloop.index }}" class="sh-product-benefits-img">
        <span class="sh-product-benefits-text">{{ benefit.text }}</span>
      </div>
    {% endfor %}
  </div>
  
  <style>
    /* Your existing CSS here */
    .sh-product-benefits-container {
      width: fit-content;
      padding: 0px 0px;
      background-color: #ffffff;
      border-radius: 0px;
      margin-top: -20px;
      margin-bottom: 0px;
    }
    
    .sh-product-benefits-row {
      display: flex;
      align-items: center;
      margin: 8px 0;
      padding: 0px 0px;
      background-color: #ffffff;
      color: #000000;
      border-radius: 30px;
      width: fit-content;
    }
    
    .sh-product-benefits-img {
      width: 17px;
      margin-right: 8px;
      height: auto;
      margin-block: unset !important;
    }
    
    .sh-product-benefits-text {
      flex: 1;
      padding-top: 2px;
      font-size: 16px;
    }
  </style>
{% endif %}

This approach allows you to:

  1. Add different benefits for each product
  2. Update all benefits from a single location
  3. Maintain consistent styling across products
  4. Use the same image multiple times without duplicating code

Feel free to reach out on our email if you have any more questions for us.

Cheers!
Shubham | Untechnickle