How to display compared-price on collection pages on Brooklyn Theme

Store Design
1

Hello Everyone,

I would highly appreciate your help with these matter! As much as I try I am unable to find a code for the following.

I am trying to make my home page/collection page display the “compare-price” as it used to show up on default and as many other websites do too. So far, there is only a “save $” badge on the top left corner of the photo in red, which basically blends with the product photo.

I have tried badges apps but sadly, they are all too much for our product photos.

Please find below an example of what i would like to achieve.

EndlessRoses_0-1744696742879.png
EndlessRoses_0-1744696742879.png340×285 75.3 KB

2

Hey @EndlessRoses

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

hey @EndlessRoses share the URLs of your website plz

4

Sorry! Forgot it is: www.endlessroses.ca

5

Can you tell me a product name that has discount?

6

Hi @EndlessRoses ,

Please go to Actions > Edit code > snippets > product-grid-item.liquid file and send me the whole code, I will check it for you

7

{% 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.’ -%}

{% if product.featured_image.src== blank %} {{ 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 %}
{{ product.featured_image.alt | escape }}
{{ product.featured_image.alt | escape }} {% endif %} {% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}
{{ product.title }} — {% if on_sale %} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {% endif %} {% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} + {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}
8

Hi @EndlessRoses ,

Please change all code:


{% 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.' -%}

{% if product.featured_image.src== blank %}

{% 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 %}

{% endif %}

{% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

{{ product.title }}

—

{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}

  <s>
    {{ product.compare_at_price | money }}
  </s>

{{ product.price | money_without_trailing_zeros }}

+

{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}
9

Thank you! That helped a lot! However, it is only displaying on the first two items. The others remain the same.

Example: Enchanted Forest (second far right) and Quartet (Third far right)

www.endlessroses.ca

10

Hi @EndlessRoses ,

Please change all code:


{% 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.' -%}

{% if product.featured_image.src== blank %}

{% 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 %}

{% endif %}

{% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

{{ product.title }}

—

{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}

  <s>
    {{ product.compare_at_price | money }}
  </s>

{{ product.price | money_without_trailing_zeros }}

+

{% else %}
{% if on_sale %}

  <s>
    {{ product.compare_at_price | money }}
  </s>

{% endif %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}
11

Thank you so much! :grinning_face:

12

Hi @EndlessRoses ,

You’re welcome and happy to guide you :blush: