Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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 🙂
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
Thank you so much for your help :))))
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024