Stiletto Theme - Show "Sold Out" Badge under price on Collection Page

Store Design
, ,
1

Hello, I am using the Stiletto Theme. Currently, the “sold out” badge is located on the top left of the image in the collection page. I was finding a way to move the “sold out” badge to be under the product information of the collection page, specifically under the price information?

2

Hi @NewYorkais ,

Please send me the code of product-item.liquid file, I will help you to change it

3

Hi @NewYorkais ,

Please follow the steps below:

  • Step 1: Go to product-item.liquid and change all code:
{% comment %}
pass in :

* prod (product but avoiding collision with globally scoped product)

{% endcomment %}
{%- liquid
assign show_multiple_images = false
if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
assign show_multiple_images = true
endif

assign current_variant = prod.selected_or_first_available_variant

case product_columns
when '5'
assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 5), 270px"
when '3'
assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 3), 450px"
when '2'
assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 2), 690px"
else
# Using a 4 item grid as default for sizes
assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 4), 304px"
endcase

assign has_hover_swatches = false
-%}

{% if settings.enable_product_card_swatches %}
{% capture first_swatchified_option %}{%- render "get-first-swatchified-option" with prod: prod -%}{%- endcapture -%}

{% capture displayed_swatch_count %}{% render "get-variant-count-for-option" with prod: prod, option_name: first_swatchified_option %}{% endcapture %}
{% assign displayed_swatch_count = displayed_swatch_count | plus: 0 %}

{% if displayed_swatch_count != 0 %}
{% assign has_hover_swatches = true %}
{% endif %}
{% endif %}

{%- if show_multiple_images -%}
{% render 'image' with
image: prod.media[0].preview_image,
wrapper_class: 'product-item__image product-item__image--one',
aspect_ratio: settings.product_listing_aspect_ratio,
object_fit: settings.product_listing_media_fit
include_placeholder: true,
sizes: sizes
src_set_type: "grid"
%}
{% render 'image' with
image: prod.media[1].preview_image,
wrapper_class: 'product-item__image product-item__image--two',
aspect_ratio: settings.product_listing_aspect_ratio,
object_fit: settings.product_listing_media_fit
include_placeholder: true,
sizes: sizes,
no_lazy_load: true,
src_set_type: "grid"
%}
{%- else -%}
{% render 'image' with
image: prod.featured_media,
wrapper_class: 'product-item__image',
aspect_ratio: settings.product_listing_aspect_ratio,
object_fit: settings.product_listing_media_fit,
include_placeholder: true
include_placeholder: true,
sizes: sizes
src_set_type: "grid"
%}
{%- endif -%}

{% unless placeholder %}
{%- render 'product-badges'
with prod: prod,
show_sale_badge: settings.product_listing_show_sale_badge,
show_custom_badges: settings.product_listing_show_custom_badges,
show_sold_out_badge: settings.product_listing_show_sold_out_badge
-%}
{% endunless %}

{% if settings.enable_quick_view and quick_view_is_beneath != true %}

{% endif %}

{% if settings.enable_quick_view %}

{% endif %}

#### 
  {{ prod.vendor }}

##### 
  {%- if placeholder -%}
  {{ 'homepage.onboarding.product_title' | t }}
  {%- else -%}
  {{ prod.title }}
  {%- endif -%}

{% if placeholder %}
{{ 9999 | money }}

{% elsif prod.compare_at_price > prod.price %}
{{ 'products.product.regular_price' | t }}
~~{{ prod.compare_at_price | money }}~~

{% if prod.price_varies %}
{%- assign sale_price = prod.price | money -%}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
{{ prod.price | money }}
{% endif %}

{% else %}
{% if prod.price_varies %}
{%- assign price = prod.price | money -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
{% else %}
{{ prod.price | money }}
{% endif %}

{% endif %}

{% if settings.product_listing_show_discount %}

{%- render "get-display-discount"
with prod: prod,
format: settings.product_listing_discount_format -%}

{% endif %}

{% render 'unit-price' item: current_variant %}

{% if settings.product_listing_show_sold_out_badge %}
  

    {%- unless prod.available -%}
      {{ 'products.product.sold_out' | t }}
    {%- endunless -%}
  

{% endif %}

{% if has_hover_swatches %}
##### 
{{ 'products.product.swatch_count' | t : count: displayed_swatch_count }}

{% endif %}

{%- if has_hover_swatches -%}

{%- render 'product-item-swatches' with prod: prod, option_name: first_swatchified_option -%}

{%- endif -%}

{%- if settings.enable_quick_view and quick_view_is_beneath -%}

{%- endif -%}
  • Step 2: Go to product-badges.liquid file and change all code:
{% comment %}
  pass in :

  * prod (product - avoid collision with global product)
  * show_sale_badge
  * show_custom_badges
  * show_sold_out_badge - if true, other badges will not be shown
{% endcomment %}

{%- assign badges = "" -%}
{%- assign product_tags = prod.tags -%}
{%- assign badge_tags_1 = settings.custom_product_badge_group_1_tag_names | split: ', ' -%}
{%- assign badge_tags_2 = settings.custom_product_badge_group_2_tag_names | split: ', ' -%}
{%- assign badge_tags_3 = settings.custom_product_badge_group_3_tag_names | split: ', ' -%}
{%- assign badge_tags_4 = settings.custom_product_badge_group_4_tag_names | split: ', ' -%}
{%- assign badge_tags = badge_tags_1 | concat: badge_tags_2 | concat: badge_tags_3 | concat: badge_tags_4 -%}

{%- unless show_sold_out_badge and prod.available != true %}
  {%- if show_sale_badge and prod.compare_at_price > prod.price -%}
    {%- capture badges -%}
      {{ badges }}
      
        {%- render "get-display-discount" with prod: prod, format: settings.sale_badge_format -%}
      

      {{ badges }}
    {%- endcapture -%}
  {%- endif -%}

  {%- if show_custom_badges -%}
    {%- for badge_tag in badge_tags -%}
      {%- for product_tag in product_tags -%}
        {%- assign product_tag_lower = product_tag | downcase -%}
        {%- assign badge_tag_lower = badge_tag | downcase -%}

        {%- if product_tag_lower == badge_tag_lower -%}
          {%- capture badges -%}
            {{ badges }}
            
              {{ badge_tag }}
            

          {%- endcapture -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endfor -%}
  {%- endif -%}
{% endunless %}

  {{ badges }}

Hope it helps!

4

Hi, thank you; however, is there any way to make it all caps and light grey?

5

Hi @NewYorkais ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.product-item__sold_out {
    opacity: .6;
}

Hope it helps!