Customize badge sale icon with an condition

New Member
11 0 0

Tim,

Where exactly should I paste the code to add a line of "More options..." text?

Thank you,

Vira

P.S. Here is my product-grid-item.liquid file:

<!-- /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 %}

{% 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" href="{{ product.url | within: collection }}">
        {% 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 }}"
                   src="{{ product.featured_image | img_url: '150x150' }}"
                   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 }}">
            </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 %}
       
      {% endif %}
    </div>

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <br>
      <span class="grid-product__price-wrap">
        <span class="long-dash"> </span>
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          {% if product.price < product.compare_at_price %}
            <strike>{{ product.compare_at_price| money_without_trailing_zeros |strip }}</strike>
          {% endif %}
          {% if product.price_varies %}
          <span><b>{{ product.price_min | money_without_trailing_zeros }}</b></span>
          {% else %}
          <span><b>{{ product.price | money_without_trailing_zeros }}</b></span>
          {% endif %}
        </span>
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>
  </div>
</div>

 

 

0 Likes
Highlighted
Shopify Expert
2684 67 755

I'd try to paste something like this

{% for opt in product.options_with_values %} 
  {% if opt.name == 'Color'  and opt.values.size >1 %}
	<br><small>Available in several colours</small>
  {% endif%}
{% endfor %}

right below the following line

<span class="grid-product__title">{{ product.title }}</span>

Note that it will fire only if you have option named Color and it has several choices -- that is the idea of this code.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
11 0 0

Tim,

It worked. 

As you said, it works with specific option name - Color

Thank you so much for your help!

Vira

0 Likes
Highlighted
Shopify Expert
2684 67 755

Vira, you're welcome.

However, one thing I noticed -- you're using .PNG images on your site. While they may (potentially) look sharper then .JPG, they are much heavier in terms of the file size. For example, each slideshow image is 2MB+ on my Macbook.

This may lead to slower load times and more bandwidth used (may affect mobile users). Thought you may want to know this.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
11 0 0

Tim,

Thank you so much for your advise.

I will definitely change my images to jpg.

Vira

0 Likes
Highlighted
New Member
7 0 0

Hi Tim

Your replies are immensely helpful.

I was wondering if there's a way to show "SALE XX% OFF" instead of "You Save $XXX" ? 

Thanks a lot.

0 Likes
Highlighted
New Member
7 0 0

Hi Camellia

How did you get the Compare at price  to swap places with regular price? 

Thanks

0 Likes
Highlighted
New Member
5 0 0

Hey Tim

On Brooklyn. Wondering if you would know how to make the 'percent saved' part of the sale tag come up to be on the same line as the 'save' text.

so, instead of

Save
50%

It would be Save 50%

Also, I've found your advice very helpful in a bunch of spots working on my site. Appreciate you giving your time!

0 Likes
Highlighted
New Member
42 0 0

Hey guys I try that but now my regular price is hidden only on product page. What can I do?

0 Likes