Add Grey ‘Sold Out’ Overlay to Product Image - Dawn

patinaworld · September 4, 2024, 2:51pm

Hey,

I would like to grey out the image and add ‘sold out’ text to my products that are unavailable on dawn like the screenshot below.

Dan-From-Ryviu · September 4, 2024, 3:28pm

Hi @patinaworld

Please share your store URL

namphan · September 4, 2024, 3:45pm

Hi @patinaworld ,

Please send me the code of card-product.liquid file, I will check and guide it

patinaworld · September 5, 2024, 10:42am

www.patina-world.com www.patina-world.myshopify.com

patinaworld · September 5, 2024, 10:44am

{% comment %}
Renders a product card

Accepts:

card_product: {Object} Product Liquid object (optional)
media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
image_shape: {String} Image mask to apply to the product image card. Values are “arch”, “blob”, “chevronleft”, “chevronright”, “diamond”, “parallelogram”, and “round”. (optional)
show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
show_vendor: {Boolean} Show the product vendor. Default: false
show_rating: {Boolean} Show the product rating. Default: false
extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
skip_styles: {Boolean} Don’t include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
quick_add: {Boolean} Show the quick add button.
section_id: {String} The ID of the section that contains this card.
horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
placeholder_image: {String} The placeholder image to use when no product exists. Default: ‘product-apparel-2’ (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘quick-order-list.css’ | asset_url | stylesheet_tag }}
{{ ‘quantity-popover.css’ | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} ${{ card_product.featured_media.alt | escape }}$ {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == ‘bulk’ %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}

{{ ‘products.product.volume_pricing.note’ | t }}

{{ ‘products.product.volume_pricing.note’ | t }}

{% else %}

{% endif %} {% if card_product.variants.size == 1 and quick_add == 'bulk' %}

{%- if has_qty_rules -%}

{%- if quantity_rule.increment > 1 -%} {{- 'products.product.quantity.multiples_of' | t: quantity: quantity_rule.increment -}} {%- endif -%} {%- if quantity_rule.min > 1 -%} {{- 'products.product.quantity.min_of' | t: quantity: quantity_rule.min -}} {%- endif -%} {%- if quantity_rule.max != null -%} {{- 'products.product.quantity.max_of' | t: quantity: quantity_rule.max -}} {%- endif -%}

{%- endif -%} {%- render 'icon-close' -%} {%- if card_product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}

{{ card_product.selected_or_first_available_variant.quantity_rule.min }}+ {%- assign price = card_product.selected_or_first_available_variant.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}
{{- price_break.minimum_quantity -}} + {%- assign price = price_break.price | money_with_currency -%} {{ 'sections.quick_order_list.each' | t: money: price }}

{%- endif -%}

{% endif %} {%- endif -%}

{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %} {% if quick_add == 'standard' %}

{%- liquid assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} {% render 'icon-arrow' %} {%- endif -%} {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- else -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }} {%- if horizontal_quick_add -%} {% render 'icon-plus' %} {%- endif -%} {%- render 'loading-spinner' -%} {%- endform -%} {%- endif -%}

{% elsif quick_add == 'bulk' %} {% if card_product.variants.size == 1 %} {% if card_product.selected_or_first_available_variant.available == false %} {{ 'products.product.sold_out' | t }} {{ 'products.product.sold_out' | t }} {% else %} {% render 'quantity-input', variant: card_product.selected_or_first_available_variant, min: 0 %} {% endif %} {% else %}

{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {{ 'products.product.choose_options' | t }} {%- render 'loading-spinner' -%}

{% render 'icon-close' %}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} ${{ card_product.featured_media.alt | escape }}$ {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- endif -%} {{ 'products.product.view_full_details' | t -}} {% render 'icon-arrow' %}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{% endif %} {% endif %}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- else -%} {%- liquid assign ratio = 1 assign placeholder = true if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{%- endif -%} {% render 'price', placeholder: placeholder, show_compare_at_price: true %}

{%- endif -%}

Dan-From-Ryviu · September 5, 2024, 1:54pm

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.card:has(.price--sold-out) .card__inner:after {
    background: #ffffffab;
    z-index: 1;
}
.card:has(.price--sold-out) .card__inner .card__badge {
    align-self: center;
    grid-row-start: 2;
    justify-self: center;
}
.card:has(.price--sold-out) .card__inner .badge {
    background: transparent;
    border: none;
    color: #000;
    z-index: 2;
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
}

namphan · September 5, 2024, 2:00pm

Hi @patinaworld ,

Please follow these steps:

Step 1: Change all code card-product.liquid file:

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
- quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

{% if card_product.available == false %}
  SOLD OUT

{% endif %}

### 

{{ card_product.title | escape }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }})

{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == 'bulk' %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}

{% endif %}
{%- endif -%}

{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
{% if quick_add == 'standard' %}

{%- liquid
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}

{%- else -%}

{%- endif -%}

{% elsif quick_add == 'bulk' %}
{% if card_product.variants.size == 1 %}

{% else %}

{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}

{% endif %}
{% endif %}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

{%- else -%}
{%- liquid
assign ratio = 1
assign placeholder = true
if media_aspect_ratio == 'portrait'
assign ratio = 0.8
endif
-%}

{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

### 

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%}
{% render 'price', placeholder: placeholder, show_compare_at_price: true %}

{%- endif -%}

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

.card--sold-out-content:after {
    content: '';
    background: #000000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
}
.card--sold-out-content span {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    left: 0;
    top: 0;
}

Topic		Replies	Views
Amazon affiliate button, hide price and button. Refresh Theme! Store Design	10	45	July 30, 2022
Opaque Overlay for sold out products in Narrative theme Store Design	15	121	August 15, 2022
Debutify Theme -hide sold out products prices Store Design	14	18	April 27, 2021
Hiding price on sold out products on minimal theme Store Design troubleshooting	4	40	June 28, 2022
Can I change 'Add to Cart' buttons to 'View More' for specific products? Store Design design , customizations , collection-page , css , shopify-themes	14	72	March 2, 2023

Add Grey ‘Sold Out’ Overlay to Product Image - Dawn

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ 'onboarding.product_title' | t }}

Related topics