BROOKLYN - SOLD OUT BADGE NOT SHOWING ON ALL PRODUCTS

Solved
KB909
Excursionist
16 1 8

Dear all,

I am facing some troubles with the badges (sold out as well as sale) in the Brooklyn theme.

Since I am not very familiar with coding I am hoping that some of you might help me.

Here's my problem rn: the sold out badge is not showing on all items sold out. And this fact is driving me crazy.

Lets say the items A and B are both sold out, item A shows the badge sold out, item B not. Do you have an idea?

 

I had a similar problem with the sale badge. I put all the products on my site on sale, however the sale badge was not showing on all products. Until I changed the code to showing the percentage instead of the Euro amount. Obviously that is not an explanation, however, I was just glad that I had found a solution.

I would be really grateful if you could help me!

Thank you,

Katrin

KetanKumar
Shopify Partner
17365 1875 6489

Hello, @KB909 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KB909
Excursionist
16 1 8

Dear @KetanKumar 

 

thank you. 

here’s the link: https://eushop.wearepari.com/collections/startseite

 

for example the products SWIM CLUB POWEL in the color turquoise and LT are sold out. 

looking forward to hearing back from you. Thank you very much in advance! 

0 Likes
KetanKumar
Shopify Partner
17365 1875 6489

@KB909 

Thanks for details 

yes, i can be done add custom code backend side so.

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KB909
Excursionist
16 1 8

Thank you @KetanKumar 

I was hoping maybe you could let me know the code that it could paste into the respective file myself? That would be highly appreciated!

 

 

0 Likes
KetanKumar
Shopify Partner
17365 1875 6489

@KB909 

Yes, sure give me whole code so i will guide without code how can i guide you.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KB909
Excursionist
16 1 8

This is an accepted solution.

Thank you so much for looking into this, @KetanKumar 

This is the product-grid-item.liquid 

 

<!-- /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_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = 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 featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
          {% include 'image-style' with image: 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: 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="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ 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 discount_percentage %}{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round }}%{% endcapture %}
  <p>{{ 'products.general.save_html' | t: saved_amount: discount_percentage }}</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__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_varies %}
            <span class="money" data-product-id="{{ product.id }}">{{ product.price_min | money_without_trailing_zeros }}</span>
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            <span class="money" data-product-id="{{ product.id }}">{{ product.price | money_without_trailing_zeros }}</span>
          {% endif %}
        </span>

        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</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>
0 Likes

Hey @KB909,

I noticed you’ve had trouble with applying badges even in the past. It appears to me that Sold Out badges are especially bugging you for a while now. 

What if I told you that you can apply any badges to your Shopify  store within minutes? You don’t have to look for a code anywhere anymore. ModeMagic makes it rather easier for you.

You can apply any badge from our collection within minutes. ModeMagic is an Award Winning app helping Shopify Merchants boost sales with product badges by 15%

You can design your own badge in 4 steps, and in 4 languages. Go Local with your business with badges in French, German, Spanish & English

If you already have a badge for your store, you can upload them to ModeMagic & apply on your products.

Guess what, you can even automate stock labeling on your store and keep it updated with your inventory. All these features with no coding.

Try it out for free for 14 days and let me know if you like it?

I’m here to help you. See you soon.  

 

Artboard Copy 19.png

KrishiBoo From ModeMagic
Award Winning App | Best UX on Shopify
0 Likes