Adding "SALE" Badge To "Minimal" Theme

Highlighted

Hello, fellow members,

 

I'm attempting to add a badge similar to the default "ON SALE" and "SOLD OUT" ones already provided with the Minimal Theme on Shopify. I'd rather not use an app unless mandatory. My goal is to display the "NEW" badge whenever a product is tagged with "new'.

 

This is the coding I was provided from another site but it doesn't seem to be working. The author suggested I replace the contents of the file with this new coding under /snippets/product_badges.liquid. However, I do not have this snippet in my coding.

 

{% unless product.available %}
  <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>
{% else %}
  {% if product.compare_at_price > product.price %}
    <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>
  {% elsif product.tags contains 'preorder' %}
    <div class="product-badge preorder"><span>Pre Order</span></div>
  {% elsif product.tags contains 'new' %}
    <div class="product-badge new"><span>New</span></div>
  {% endif %}
{% endunless %}

 

What am I doing wrong? If it helps, I do have this snippet: product-grid-item.liquid and this is my current coding within that snippet:

 

{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
  {% assign sold_out = false %}
{% endif %}

{% if featured.title == '' %}
  {% comment %}add default state for product block in storefront editor{% endcomment %}
  {% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
  {% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
              <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     alt="{{ featured.featured_image.alt | escape }}"
                     class="product__img lazyload"
                     data-src="{{ img_url }}"
                     data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
                     data-sizes="auto"
                     data-image>
              </div>
            </div>
          {% else %}
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
          {% endunless %}
          <noscript>
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {%- assign price = featured.price | money -%}

        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}

          {%- assign variant = featured.selected_or_first_available_variant -%}
          {%- if variant.available and variant.unit_price_measurement -%}
            {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
          {%- endif -%}
        {% endif %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

      </p>
    {% endif %}
  </a>
</div>

I'm sorry for the long post, but I greatly appreciate any suggestions or resolutions. If worse comes to worst and I must download an app, I will do so.

 

Thank you all for your time,

 

Cozy's Shop Owner

0 Likes