Opaque Overlay for sold out products in Narrative theme

Store Design
1

trying to get an opaque overlay on my products that are sold out with and without variants in the Narrative theme. Any ideas? I’ve tried the few things that seem to be posted on here regarding the code:

but it doesn’t seem to be working.

1 Like
2

Hi @jennamiotke ,

Please share your store URL and if your store is password protected then please provide password too.
You can take a picture of the place you want to edit.

So that we can help you.

3

@jennamiotke

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi, thank you! My site is www.crystallovetreasures.com

5

Hi, thank you! My site is www.crystallovetreasures.com

Photos would be many of every page as I want it to happen automatically for anything that is sold out including variants.

6

Hi, thank you! My site is www.crystallovetreasures.com is there any way to get some help regarding this?

7

Hi, thank you! My site is www.crystallovetreasures.com there is no password. I need an overlay to be able to be placed on top of any item that is sold out.

1 Like
8

@jennamiotke

pleas share example

9

Screen Shot 2022-08-12 at 2.36.46 PM.png
Screen Shot 2022-08-12 at 2.36.46 PM.png1502×898 172 KB

For example the one on the left is sold out and has an opaque overlay over the photo compared to the one beside it.

1 Like
10

@jennamiotke

thanks i have just confirm if sold out item overlay compare store item do you need its can be done some customization code

11

Yes please if you have some custom code I can put it that would be great! Thank you..

12

@jennamiotke

yes, please send product cart or product item or card item snippets file so i will check and update

13

It wont let me upload the file here. Maybe I am doing it incorrectly. Here is a copy and paste of the code in the product-card.liquid file from Snippets.

{% if product.featured_media %}
{% include ‘card-image’, type: product.featured_media.preview_image, grid_style: grid_style %}
{% endif %}

{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}

{{ product.title }}

{% if product.available %}

{%- assign variant = product.selected_or_first_available_variant %} {% if product.compare_at_price > product.price %} {% comment %} Product is on sale {% endcomment %} {% if product.price_varies %} {% assign sale_price = product.price | money_without_trailing_zeros %} {{ 'products.product.price' | t }} {{ 'products.product.on_sale_from_html' | t: price: sale_price }} {% else %} {{ 'products.product.sale_price' | t }} {{ product.price | money_without_trailing_zeros }}

{{ ‘products.product.regular_price’ | t }}

{{ product.compare_at_price | money_without_trailing_zeros }}

{%- if variant.available and variant.unit_price_measurement -%}
{% include ‘product-unit-price’, variant: variant %}
{% endif %}
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ ‘products.product.from_text_html’ | t: price: price }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{%- if variant.available and variant.unit_price_measurement -%}
{% include ‘product-unit-price’, variant: variant %}
{% endif %}
{% endif %}
{% endif %}

{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
{% if product.compare_at_price > product.price %} {% assign sale_text_length = 'products.product.on_sale' | t | size %} {{ 'products.product.on_sale' | t }} {% endif %}
14

It wont let me upload the file here. Maybe I am doing it incorrectly. Here is a copy and paste of the code in the product-card.liquid file from Snippets.

{% if product.featured_media %}
{% include ‘card-image’, type: product.featured_media.preview_image, grid_style: grid_style %}
{% endif %}

{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}

{{ product.title }}

{% if product.available %}

{%- assign variant = product.selected_or_first_available_variant %} {% if product.compare_at_price > product.price %} {% comment %} Product is on sale {% endcomment %} {% if product.price_varies %} {% assign sale_price = product.price | money_without_trailing_zeros %} {{ 'products.product.price' | t }} {{ 'products.product.on_sale_from_html' | t: price: sale_price }} {% else %} {{ 'products.product.sale_price' | t }} {{ product.price | money_without_trailing_zeros }}

{{ ‘products.product.regular_price’ | t }}

{{ product.compare_at_price | money_without_trailing_zeros }}

{%- if variant.available and variant.unit_price_measurement -%}
{% include ‘product-unit-price’, variant: variant %}
{% endif %}
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ ‘products.product.from_text_html’ | t: price: price }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{%- if variant.available and variant.unit_price_measurement -%}
{% include ‘product-unit-price’, variant: variant %}
{% endif %}
{% endif %}
{% endif %}

{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
{% if product.compare_at_price > product.price %} {% assign sale_text_length = 'products.product.on_sale' | t | size %} {{ 'products.product.on_sale' | t }} {% endif %}
1 Like
15

@jennamiotke

yes, please add this code and let me know after i will give you one more code


{% if product.featured_media %}
{% include 'card-image', type: product.featured_media.preview_image, grid_style: grid_style %}
{% endif %}

{% if section.settings.show_vendor %}

{{ product.vendor }}

{% endif %}

### {{ product.title }}

{% if product.available %}

{%- assign variant = product.selected_or_first_available_variant %}
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
 {{ 'products.product.price' | t }} 
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
{{ 'products.product.sale_price' | t }}
{{ product.price | money_without_trailing_zeros }}

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

{{ product.compare_at_price | money_without_trailing_zeros }}

{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{% endif %}
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{% endif %}
{% endif %}
{% endif %}

{% else %}

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

{% endif %}

{% if product.compare_at_price > product.price %}
{% assign sale_text_length = 'products.product.on_sale' | t | size %}

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

{% endif %}
16

I added that code to the product-card.liquid file in Snippets but it then duplicated all the products that had variants.