MOTION THEME - Custom labels - Sold out label priority over custom label

Solved
lion_no
Explorer
55 5 18

One of our final changes require to launch our store!

Ref. custom product labels - https://archetypethemes.co/blogs/support/can-i-add-custom-new-or-coming-soon-labels-to-my-products?_...

Currently products with a given custom label overrides the SOLD OUT tag, and we'd love to change this, so custom tags are only shown for products in stock!
Here's a visual example - where both products are sold out, but only one has a custom label which is overriding the SOLD OUT tag:

lion_no_0-1635430750615.png

We want "ADRENALINE" which is a sold out product without any stock - to appear like "AMYGDALA" (grayed out, price gone, w/ tag: sold out.)
BUT - if "ADRENALINE" had stock, the custom label should appear.

In other words - when the product has a custom label, it overrides the sold out tag and makes it appear available instead (which we'd like to fix)!

Preview link - https://m9azvufmf0h6yths-50647859379.shopifypreview.com/

 

Accepted Solution (1)

Accepted Solutions
lion_no
Explorer
55 5 18

This is an accepted solution.

Fixed it myself by going to Product-grid-item-liquid and adding a " and product.available " to the class grid-product_content as seen here: 

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
  <div class="grid-product__content">
    {%- if has_custom_label and product.available -%}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>

View solution in original post

Replies 2 (2)
Don
Shopify Staff
1601 107 216

Hi there @lion_no!

If you're looking to get support for a given theme, it would depend on who had created that theme to begin with.

In this case, as you're using the Motion theme this is created and supported by its developers' Archetype Themes.

I can see you've already checked out their support articles for Motion here, would you have also reached out to them via the contact form yet?

Should you need some specific coding customisation that is not covered by their support remit, you can consider hiring a Shopify Expert for some coding customisation work.

It may be the case that this exact situation needs some custom work, but their support team should be able to clarify for you what they can do.

You may also be lucky enough to get some feedback from some of the Partners or your fellow merchants here in the community on what you might be able to do with this.

Can you let me know a bit more about your business and what else you're working on at the moment?

It looks like you're selling clothing, and you're still setting your way up towards launching your store?

 

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

lion_no
Explorer
55 5 18

This is an accepted solution.

Fixed it myself by going to Product-grid-item-liquid and adding a " and product.available " to the class grid-product_content as seen here: 

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
  <div class="grid-product__content">
    {%- if has_custom_label and product.available -%}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>

View solution in original post