How to add IMAGE above Add to Cart Button for only some Products?

Solved
salvadope1
New Member
3 0 0

Hey there,

I'd like to add a specific trust badge above the add to cart button on the product page that only addresses half of my products.

 

Im very inexperienced in liquid but have some small coding notions..

 

I guess that way to go is to separate my products into 2 categories (1 with the trust badge, 1 without the trust badge) and then edit the product page template only for the category with trust badge and add the image above the add to cart button.

 

Does anyone know how to do this? All the help is extremely welcome

 

I'm using the Brooklyn theme fyi.

 

thanks and have a good day

0 Likes
salvadope1
New Member
3 0 0

Ideally if I could create these 2 product categories by adding a specific tag to the products that should show the specific trust badge would be amazing

0 Likes
ChoosiZon
Trailblazer
245 43 72

This is an accepted solution.

Hi, you can dig out product-template.liquid.

Then find this part : (at around line 232)

 <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                
                 <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}

Add  this part : (to line 233)

               {% if product.tags contains 'trustMe' %}
                <p> <img src="{{ 'logo.png' | asset_url  }}" alt="Trust Badge"></p>
                {% endif %}

 

After that it should look like this :

 <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                {% if product.tags contains 'trustMe' %}
                <p> <img src="{{ 'logo.png' | asset_url  }}" alt="Trusted"></p>
                {% endif %}
                 <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}

 

trustMe is the tag you add to the products you want the badge to appear.

 

Replace logo.png with you badge image,eg trust.jpg.

Upload the image to your assets and rename as needed,eg : trust.jpg

0 Likes
salvadope1
New Member
3 0 0

Thank you so much for your help  :))))

0 Likes