Stickers on the percentage of my discounts

New Member
37 0 0

Hello, everyone.
I was looking for a code/app that would allow me to do this, do you know how to help me? I'm desperate, please.
Thank you very much to everyone.

Cattura.PNG

0 Likes
Highlighted

Hello ,

Which theme are you using??

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
37 0 0

Hello @oscprofessional 

I'm using Brooklyn

0 Likes
Highlighted

@Ginetto,

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>

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
37 0 0

Man, I can't find the code you're saying.
Maybe because some time ago I deleted it to have that grid removed.
How can I do that?

0 Likes
Highlighted

@Ginetto,

Can you please share product-grid-item.liquid file

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
37 0 0

Yes of course

EDIT

0 Likes
Highlighted
New Member
37 0 0
<!-- /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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</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>
0 Likes
Highlighted

@Ginetto,

2019-12-05_18-45.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

@Ginetto,

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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</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>
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes