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; }

• 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) ); ...

• How to change another image for image banner in mobile view

  In theme.liquid, add the followings: <style> #shopify-section-ID { @media (max-width: 768px) { .banner__media { content: url("image URL") !important; } } </style>