I am looking to remove sale tags/sticker from top left corner of product images on collections page & homepage. Instead, I would like to display sale price with a strike through original retail (as automatically generated on the PDP). How can I edit code to do so?
Solved! Go to the solution
Go to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid.
Scroll to the very bottom of theme.scss.liquid and paste this:
.grid-product__on-sale { display: none; }
Have you made any modifications to your collection-template.liquid file? If so, please copy and paste that code here. If you have the original content still, please let me know and I'll provide you a solution for the strikethrough price.
This is an accepted solution.
First, go to the code editor > Snippets > product-grid-item.liquid and replace the entire file w/ this:
<!-- /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__strikethrough">{{ product.compare_at_price | money_without_trailing_zeros }}</span> <span class="grid-product__price"> {{ product.price | money_without_trailing_zeros }} </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>
Then go to Assets > theme.scss.liquid and scroll to the very bottom and paste: (change the color to whatever you want)
span.grid-product__strikethrough { @include accentFontStack; font-size: em(14px); color: $colorPrimary; text-decoration: line-through; }
Can we we switch the color, the sale price should be in red instead and original remains in black. How to change.
@soniagill, to change the color, you will edit this line of css:
span.grid-product__strikethrough { @include accentFontStack; font-size: em(14px); color: $colorPrimary; text-decoration: line-through; }
You will change color to any value that you'd like it to be. You can either use a hex value or rgb/rgba value here.
Thanks!
@lemisan, can you please provide me with a url to your store?
User | Count |
---|---|
732 | |
141 | |
101 | |
64 | |
36 |