Solved

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

salvadope1
New Member
5 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

Accepted Solution (1)
ChoosiZon
Shopify Partner
416 66 111

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

Donate
For faster response with a fee pls email to : choositech@outlook.com

View solution in original post

Replies 3 (3)

salvadope1
New Member
5 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 🙂

ChoosiZon
Shopify Partner
416 66 111

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

Donate
For faster response with a fee pls email to : choositech@outlook.com
salvadope1
New Member
5 0 0

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