Brooklyn Theme Changing Sale Badge / Emblem

Tourist
7 0 0

Hi Oscprofessional,

 

Thank you that worked!

 

One more question. On each product under the price it also has a save xx%. I am ok with that except it does it even on items that aren't on sale. Is there a way to not have that on those?Screenshot (4).png

0 Likes

@Ashlyn,

Try this code once

Replace your old code

{% elsif on_sale %}
      	<div class="grid-product__on-sale">
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
           {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
          </p>
          
        </div>
      {% endif %}

with below code

{% elsif on_sale %}
      	<div class="grid-product__on-sale">
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
           {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max| money_without_currency | times: 100 | remove: '.0' }}%
          </p>
          
        </div>
      {% endif %}

@Ashlyn wrote:

Hi Oscprofessional,

 

Thank you that worked!

 

One more question. On each product under the price it also has a save xx%. I am ok with that except it does it even on items that aren't on sale. Is there a way to not have that on those?Screenshot (4).png


 

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
1 Like
Tourist
7 0 0

Hi 

  Thanks for your reply back. That didn't work. It stayed the same. 

 

When I took the compared price out after the sale. (this item it was the same price in compared) It is giving me this now on all items with no compared price. If I put the compared price the same as the actual price it gives that save 0% . 

 

I hope I didn't mess anything up previously. 

Screenshot (8).png

0 Likes

@Ashlyn,

Can you please msg me your 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
1 Like
Tourist
7 0 0

@oscprofessional 

 

Here it is.

 

<!-- /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">
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max| money_without_currency | times: 100 | remove: '.0' }}%
</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
New Member
11 0 0

Is there a way to create an additional badge based on a product tag or collection? I have products with a specific material and I want to call that out with a badge on the product image.

0 Likes

Hello ,

We can create additional badge But what you want to display on this badge...

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
1 Like
New Member
11 0 0
I'm looking to display a small png image.
0 Likes
Tourist
7 0 0

Hi @oscprofessional,

 

Can you help me with this part still? I haven't been able to figure it out.

 

When I took the compared price out after the sale.  It is giving me this "Save Liquid error (line 222): divided by 0!"  If I put the compared price the same as the actual price it gives that save 0% . 

 

Is there a way to not have either one of those showing when the item is not on sale but when it is for it to show the Save % amount?

 

Thank you! 

0 Likes

@Ashlyn,

Please share product-price.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
1 Like