Dynamic product page value proposition badges

Highlighted
New Member
3 0 1

These are seemingly ubiquitous on top Shopify stores, and yet I've yet to see an app or code or discussion as to how to implement them. Now, I've had no issue adding a static image below the add to card button using something like:

 

<img class="valuebadges" src="https://cdn.shopify.com/s/files/xxx">

 

but lost as to how to make these dynamically related to the actual product displayed, so that if product.tags equals "x" this set of icons (ideally with text) displays.

 

For an example (allbirds.com):

Screen Shot 2020-06-26 at 10.46.00 AM.png

Any help or pointers much appreciated!

Highlighted
Shopify Partner
9447 1188 3316

@astroblade 

Thanks for post.

can you please try this

{% assign pro_tags = product.tags | join:',' %}
{% if pro_tags contains 'badges' %}
        <div class="product--tag"><img class="valuebadges" src="https://cdn.shopify.com/s/files/xxx"></div>
         {% endif %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
1 0 0

There's quite a few different ways to do it.

Using the product object you can do If statements like shown in the other answer on tags or collection membership.

The one I like the most is doing it per product using metafields.

          {% assign uvpURL = "null" %}
          {% if product.metafields.global.uvp-large %}
          {% assign uvpURL = product.metafields.global.uvp-large %}
          {% endif %}
          {% unless uvpURL == "null" %}
          <div class="product_uvp_wrapper">
                  <object class="product_uvp_svg" type="image/svg+xml" data="{{ uvpURL }}" style="">
                    {{ shop.name }}
                  </object>
          </div>
          {% endunless %}

 

Then you would use a metafield editing app to give the product a string field that is global called "uvp-large" and put the URL for an svg in it.

SVGs work best for this purpose, since they are super duper tiny, but you could also use inline svg and have the field contain the entire inline code.

Then you also add to your CSS:

.product_uvp_wrapper {
  padding-top: 1rem;
}

.product_uvp_svg {
}

containing whatever style things you need for it to look good.

0 Likes