Hello Ginetto,
Which theme are you using??
To show percentage instead of saved amount
1. Go to Online Store->Theme->Edit code
2.Snippets>>Open product-grid-item.liquid
Search below code
<div class="grid-product__on-sale"> {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %} <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>
and Replace above code with below code
<div class="grid-product__on-sale">
{% capture discount_percentage %}{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round }}%{% endcapture %} <p>{{ 'products.general.save_html' | t: saved_amount: discount_percentage }}</p>
</div>
Can you please share product-grid-item.liquid file
<!-- /snippets/product-grid-item.liquid --> {% comment %} This snippet is used to showcase each product during the loop, 'for product in collection.products' in collection.liquid. A liquid variable (grid_item_width) is set just before the this snippet is included to change the size of the container. Once the variable is set on a page, all future instances of this snippet will use that width. Overwrite the variable to adjust this. Example - assign grid_item_width = 'large--one-quarter medium--one-half' {% endcomment %} {% unless grid_item_width %} {% assign grid_item_width = 'large--one-third medium--one-half' %} {% endunless %} {% unless width %} {%- assign width = 310 -%} {% endunless %} {% unless height %} {%- assign height = 415 -%} {% endunless %} {% assign on_sale = false %} {% if product.compare_at_price > product.price %} {% assign on_sale = true %} {% endif %} {% assign sold_out = true %} {% if product.available %} {% assign sold_out = false %} {% endif %} {%- assign variant = product.selected_or_first_available_variant -%} {% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %} {% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %} {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}"> <div class="grid-product__wrapper"> <div class="grid-product__image-wrapper"> <a class="grid-product__image-link{% unless product.featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link> {% if product.featured_image.src== blank %} <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}"> {% else %} {% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %} <div id="{{ img_wrapper_id }}" class="product--wrapper"> <div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;"> <img class="product--image lazyload {{ img_id_class }}" data-src="{{ img_url }}" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ product.featured_image.aspect_ratio }}" data-sizes="auto" alt="{{ product.featured_image.alt | escape }}" data-image> </div> </div> <noscript> <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}"> </noscript> {% endif %} </a> {% if sold_out %} <div class="grid-product__sold-out"> <p>{{ 'products.product.sold_out_html' | t }}</p> </div> {% elsif on_sale %} <div class="grid-product__on-sale"> {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %} <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p> </div> {% endif %} </div> <a href="{{ product.url | within: collection }}" class="grid-product__meta"> <span class="grid-product__title">{{ product.title }}</span> <span class="grid-product__price-wrap"> <span class="long-dash">—</span> <span class="grid-product__price"> {% if on_sale %} <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span> {% else %} <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span> {% endif %} {% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} <span class="icon-fallback-text"> <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span> <span class="fallback-text">+</span> </span> {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %} </span> {%- if product.price_varies == false and variant.available and variant.unit_price_measurement -%} {%- capture unit_price_separator -%} <span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span> {%- endcapture -%} {%- capture unit_price_base_unit -%} <span> {%- if variant.unit_price_measurement.reference_value != 1 -%} {{- variant.unit_price_measurement.reference_value -}} {%- endif -%} {{ variant.unit_price_measurement.reference_unit }} </span> {%- endcapture -%} <span class="product-unit-price"> <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span> <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}} </span> {%- endif -%} </span> {% if section.settings.product_vendor_enable %} <p class="grid-product__vendor">{{ product.vendor }}</p> {% endif %} </a> </div> </div>
I had edited the code
Please add this file
<!-- /snippets/product-grid-item.liquid --> {% comment %} This snippet is used to showcase each product during the loop, 'for product in collection.products' in collection.liquid. A liquid variable (grid_item_width) is set just before the this snippet is included to change the size of the container. Once the variable is set on a page, all future instances of this snippet will use that width. Overwrite the variable to adjust this. Example - assign grid_item_width = 'large--one-quarter medium--one-half' {% endcomment %} {% unless grid_item_width %} {% assign grid_item_width = 'large--one-third medium--one-half' %} {% endunless %} {% unless width %} {%- assign width = 310 -%} {% endunless %} {% unless height %} {%- assign height = 415 -%} {% endunless %} {% assign on_sale = false %} {% if product.compare_at_price > product.price %} {% assign on_sale = true %} {% endif %} {% assign sold_out = true %} {% if product.available %} {% assign sold_out = false %} {% endif %} {%- assign variant = product.selected_or_first_available_variant -%} {% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %} {% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %} {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}"> <div class="grid-product__wrapper"> <div class="grid-product__image-wrapper"> <a class="grid-product__image-link{% unless product.featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link> {% if product.featured_image.src== blank %} <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}"> {% else %} {% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %} <div id="{{ img_wrapper_id }}" class="product--wrapper"> <div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;"> <img class="product--image lazyload {{ img_id_class }}" data-src="{{ img_url }}" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ product.featured_image.aspect_ratio }}" data-sizes="auto" alt="{{ product.featured_image.alt | escape }}" data-image> </div> </div> <noscript> <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}"> </noscript> {% endif %} </a> {% if sold_out %} <div class="grid-product__sold-out"> <p>{{ 'products.product.sold_out_html' | t }}</p> </div> {% elsif on_sale %} <div class="grid-product__on-sale"> {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %} <p>{{ 'products.general.save_html' | t: saved_amount: discount_percentage }}</p> </div> {% endif %} </div> <a href="{{ product.url | within: collection }}" class="grid-product__meta"> <span class="grid-product__title">{{ product.title }}</span> <span class="grid-product__price-wrap"> <span class="long-dash">—</span> <span class="grid-product__price"> {% if on_sale %} <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span> {% else %} <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span> {% endif %} {% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} <span class="icon-fallback-text"> <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span> <span class="fallback-text">+</span> </span> {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %} </span> {%- if product.price_varies == false and variant.available and variant.unit_price_measurement -%} {%- capture unit_price_separator -%} <span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span> {%- endcapture -%} {%- capture unit_price_base_unit -%} <span> {%- if variant.unit_price_measurement.reference_value != 1 -%} {{- variant.unit_price_measurement.reference_value -}} {%- endif -%} {{ variant.unit_price_measurement.reference_unit }} </span> {%- endcapture -%} <span class="product-unit-price"> <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span> <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}} </span> {%- endif -%} </span> {% if section.settings.product_vendor_enable %} <p class="grid-product__vendor">{{ product.vendor }}</p> {% endif %} </a> </div> </div>
User | Count |
---|---|
395 | |
202 | |
146 | |
42 | |
40 |