Change Sale Badge to % off

In card-product.liquid

{% comment %}    {{- 'products.product.on_sale' | t -}}  {% endcomment %}

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}

Save {{ percent }}%

              </span>

In price.liquid

Change to:

{%- if show_badges -%}

    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">

     {% comment %}      {{ 'products.product.on_sale' | t }} {% endcomment %}

  {%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}

Save {{ percent }}%

    </span>

• Related Articles

• Remove/hide Sold out Badge for out of stock Products

  In base.css file, add this code at the bottom: .grid__item .card-wrapper:has(.price--sold-out) .card--media .card__badge { display: none !important; }

• Change displayed size images in Multicolumn section

  At the multicolumn section, paste the following: .multicolumn-card__image-wrapper--third-width { width: 20% !important; }

• Make SALE menu item red

  In header, add customer css as below .header-menu a[href="/collections/sale"] { color: #ff0000 !important; font-weight: 700; } .header-menu a[href="/collections/sale"]:hover { color: black !important; font-weight: 700; }

• Change background color for each column in a multicolumn

  In the multicolumn section, add the following custom css: li:nth-child(1) .multicolumn-card__info { background-color: red; color: white; } li:nth-child(2) .multicolumn-card__info { background-color: green; color: white; } li:nth-child(3) ...

• Change theme star rating color on product grids

  In Edit Code, go to assets/component-rating.css Replace the following code: .rating-star::before { content: '★★★★★'; background: linear-gradient( 90deg, var(--color-rating-star) var(--percent), rgba(var(--color-foreground), 0.15) var(--percent) ); ...