Shopify themes, liquid, logos, and UX
Hi!
I need to change the text of the "sale" bagde to an automatic discount percentage calculation. Im al ready edit the code of "product-template.liquid" for this:
{% if product.compare_at_price_max > product.price %}-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
But it doesn't work and it only shows -0% always
Also on the home page nothing appears
I hope someone can help me please.
The theme i'm using is Turbo Theme and the url of the store is https://tienda-movilockers.myshopify.com/
Thank you!
sorry for that issue i have checked but i can that code but can you please try this
https://liquify.design/shopify-developer-guide-display-percentage-discount-shopify/
Hi!
Thanks for your answer! but as i understand, the solution you share is for show the discount next to the price. And what i need is show the discount in the sale tag (the red sticker over the image) like this:
But mine shows nothing 😞
sorry for that are added code but i can't see where do i check this
No problem!
mmm, i dont know if this will help but this is the entire code of my section "product-template.liquid1" after i added the new code to calculate the discount on the tag. The code for this is in line 32.
I hope you can help me to find the solution.
{% comment %}
** Product - default view **
- Product template
{% endcomment %}
{% if section.settings.product_breadcrumb == false %}
{% style %}
.breadcrumb__wrapper {
display: none;
}
{% endstyle %}
{% endif %}
<div class="one-whole column product-{{ product.id }}">
<div class="product product-name--{{ product.handle }} product_section js-product_section is-flex media-position--{{ section.settings.product_images_position }}" data-rv-handle="{{ product.handle }}">
<div class="three-fifths columns medium-down--one-whole product__images">
{% render 'product-images',
product: product,
video_looping: section.settings.video_looping,
set_product_height: section.settings.set_product_height
%}
</div>
<div class="two-fifths columns medium-down--one-whole">
{%- assign collection_handles = product.collections | map: 'handle' -%}
{%- assign variant = product.selected_or_first_available_variant -%}
{% if product.available %}
{% if settings.sale_banner_enabled and product.compare_at_price > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}
{% if product.compare_at_price_max > product.price %}-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
</div>
{% endif %}
{% endif %}
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}
{% if section.settings.display_vendor %}
<p class="vendor">
<span class="vendor">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
{% if variant.sku != blank and section.settings.display_sku %}
<p class="sku">
<span>{{ variant.sku }}</span>
</p>
{% endif %}
<h1 class="product_name">{{ product.title }}</h1>
{% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>
{%- assign product_tags = product.tags | join: ' ' -%}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="javascript:;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="javascript:;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}
{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
<div class="modal_price">
{% unless product.available == false and settings.display_price == false %}
<div class="price__container price__container--display-price-{{ settings.display_price }} {% if settings.display_price %}has-margin-right{% endif %}">
<span content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price">
{% if variant.price > 0 %}
<span class="money">{% render 'price-element', price: variant.price %}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{%- assign compare_at = variant.compare_at_price | minus: variant.price -%}{% render 'price-element', price: compare_at %}</span>)
{% endif %}
</span>
{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{%- assign compare_at = variant.compare_at_price | minus: variant.price %}{% render 'price-element', price: compare_at -%}</span>)
{% endif %}
</span>
{% endif %}
</div>
{% endunless %}
<div class="sold-out__container">
<span class="sold_out">{% if variant.available == false %}{{ settings.sold_out_text }}{% endif %}</span>
</div>
</div>
{% endif %}
{% if section.settings.product_description_position == "top" %}
{% if product.description != blank %}
<div class="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
{% render 'product-form',
context: 'product',
collection_handles: collection_handles
%}
{% render 'product-notify-me', product: product %}
{% endunless %}
{% if section.settings.product_description_position == "bottom" %}
{% if product.description != blank %}
<div class="description bottom">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}
{% if section.settings.review_position == "next_to_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{ settings.enable_shopify_review_comments }}">
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
{% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
<div class="product_links">
{% if section.settings.display_collections %}
<p>
<span class="label">{{ 'products.product.collections' | t }}:</span>
<span>
{% for col in product.collections %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</span>
</p>
{% endif %}
{% if section.settings.display_type %}
<p>
<span class="label">{{ 'products.product.product_types' | t }}:</span>
<span>{{ product.type | link_to_type }}</span>
</p>
{% endif %}
{% if section.settings.display_tags %}
<p>
{% for tag in product.tags %}
{% if forloop.first %}
<span class="label">{{ 'products.product.tags' | t }}:</span>
{% endif %}
{% unless tag contains 'meta-' %}
<span>
<a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
</span>
{% endunless %}
{% endfor %}
</p>
{% endif %}
</div>
{% endif %}
<div class="meta">
{% if section.settings.display_social_buttons %}
{% render 'social-buttons', context: 'product' %}
{% endif %}
</div>
</div>
</div>
</div>
{% if product.description contains "<!-- split -->" %}
<br />
<div class="one-whole column">
<div class="description">
{{ product.description | split: '<!-- split -->' | last }}
</div>
</div>
{% endif %}
{% if section.settings.review_position == "below_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{ settings.enable_shopify_review_comments }}">
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
{% if section.settings.display_recently_viewed %}
{% include 'include-recently-viewed' %}
{% endif %}
<div data-product-recommendations-container></div>
{% if section.settings.set_product_height %}
{% style %}
.gallery-wrap model-viewer {
min-height: {{ section.settings.product_height }}px;
}
.gallery-wrap .product_gallery img,
.gallery-wrap .product_gallery .plyr--html5 video,
.gallery-wrap .product_gallery .plyr--youtube {
max-height: {{ section.settings.product_height }}px;
}
{% endstyle %}
{% endif %}
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
<script>
window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
{% assign models = product.media | where: 'media_type', 'model' | json %}
ShopifyXR('addModels', {{ models }});
</script>
{% endif %}
{% schema %}
{
"name": "Product",
"class": "shopify-section--product-template has-sidebar-option",
"settings": [
{
"type": "header",
"content": "Product gallery"
},
{
"type": "checkbox",
"id": "product_thumbs",
"label": "Show thumbnails",
"default": true
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows",
"info": "Only applies to desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_product_lightbox",
"label": "Enable lightbox",
"default": true
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "range",
"id": "slideshow_speed",
"label": "Gallery speed",
"min": 0,
"max": 6,
"unit": "sec",
"default": 0,
"info": "Set to 0 to disable autoplay."
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnails",
"default": "bottom",
"options": [
{
"value": "bottom",
"label": "Bottom"
},
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "enable_thumbnail_slider",
"label": "Enable thumbnail slider",
"default": true
},
{
"type": "header",
"content": "Product information"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "product_breadcrumb",
"label": "Show breadcrumb links"
},
{
"type": "checkbox",
"id": "display_sku",
"label": "Show SKU"
},
{
"type": "checkbox",
"id": "display_collections",
"label": "Show collections"
},
{
"type": "checkbox",
"id": "display_type",
"label": "Show type"
},
{
"type": "checkbox",
"id": "display_tags",
"label": "Show tags"
},
{
"type": "checkbox",
"id": "display_social_buttons",
"label": "Show social media share icons",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "header",
"content": "Dynamic checkout button"
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"default": true,
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "radio",
"id": "product_images_position",
"label": "Media position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "set_product_height",
"label": "Set height of product media",
"default": false
},
{
"type": "range",
"id": "product_height",
"label": "Product media height",
"min": 200,
"max": 800,
"step": 10,
"default": 500,
"unit": "px"
},
{
"type": "checkbox",
"id": "video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Product reviews"
},
{
"type": "paragraph",
"content": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)"
},
{
"type": "checkbox",
"id": "enable_shopify_product_badges",
"label": "Display star rating on product",
"default": false
},
{
"type": "radio",
"id": "review_position",
"label": "Reviews position",
"default": "next_to_gallery",
"options": [
{
"value": "next_to_gallery",
"label": "In product description area"
},
{
"value": "below_gallery",
"label": "Below image\/description"
}
]
},
{
"type": "header",
"content": "Recently viewed products"
},
{
"type": "paragraph",
"content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228)"
},
{
"type": "checkbox",
"id": "display_recently_viewed",
"label": "Show recently viewed products",
"default": false
},
{
"type": "text",
"id": "rv_title",
"label": "Title",
"default": "Recently Viewed Items"
},
{
"type": "radio",
"id": "rv_products_style",
"label": "Layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "range",
"id": "rv_max_display",
"label": "Products limit",
"min": 3,
"max": 10,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "rv_per",
"label": "Products per row",
"min": 3,
"max": 5,
"step": 1,
"default": 4
}
],
"default": {
"settings": {
}
}
}
{% endschema %}
Thanks!
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