How do i add a "SOLD OUT" indicator over product picture?

Louise_Coiteux
Tourist
10 0 1

Hi

I'm a beginner to css code but i know html.

I've read the part where it explains how to set a sold out indicator over collections and i didn't understand what to do with the code? Where do i paste it?

I want to do this but to products not collections. I use the Expo theme.

 

Thanks

 

0 Likes
Alex_M3
Shopify Staff (Retired)
Shopify Staff (Retired)
288 0 222

Hey Louise!

I'm guessing you're working with our Adding a Sold Out Overlay? This tutorial shows how to add in a basic text overlay that appears below the product price when an item is sold out.

What we want to do is 'wrap' the coding for the product price with the 'if' condition that shows what should happen when the item is in stock, and when it isn't.

{% if product.available %} 

<strong>{{ product.price | money }}</strong>

{% else %}

<strong style="color:#ccc">

{{ product.price | money }}

</strong> 

<span>Sold Out!</span>

{% endif %}

Expo is a bit tricker, because it can show a range of prices so your code is not as simple as in other Themes. If you look in your product liquid, you'll want to put this around line 42 and again around line 45.

Have a go, and let me know if it's still giving you hassle. :)

-Alex M.

Shopify Guru
support@shopify.com

0 Likes
Louise_Coiteux
Tourist
10 0 1

What does "wrap" the code mean. How do i wrap?

0 Likes
Alex_M3
Shopify Staff (Retired)
Shopify Staff (Retired)
288 0 222

Wrap in this case it literally to put one piece on top and one below. You'll want to put piece one above {{ product.price | money }}, and piece one below.

1. {% if product.available %} 

        <strong>{{ product.price | money }}</strong>

2. {% else %}

<strong style="color:#ccc">

{{ product.price | money }}

</strong> 

<span>Sold Out!</span>

{% endif %}


-Alex M.

Shopify Guru
support@shopify.com

0 Likes
Louise_Coiteux
Tourist
10 0 1

I've tried several positioning of the code and it doesn't seem to work.

What i want is a "sold out" badge to appear in the left or right corner of product image when product is sold out.

How do i tell the theme "take this badge and place it there "if" product is sold out?

 

Thanks for your patience and time Alex

Louise

0 Likes
Louise_Coiteux
Tourist
10 0 1

Ok i made up my mind. This is what i want:

1- if product is available put a green sphere in upper right corner of product image.

2- if product is unavailable put a red sphere in upper right corner of product image.

I need to code that. Any help would be much appreciated.

Thanks ; )

 

Nishchay
Excursionist
14 0 4

I want to add a Sold OUT Overlay on the product Card image whenever a product is unavailable.

How do I do this? I'm NOT new to coding so you can tell me what to do! Please Help!

Thanks.

KetanKumar
Shopify Partner
14570 1676 5229

Hello, @Nishchay 

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
Nishchay
Excursionist
14 0 4

@KetanKumar 

The website is of Shopify Venture Theme. 

https://getemlifestyle.com

Please provide the solution.

KetanKumar
Shopify Partner
14570 1676 5229

@Nishchay 

Thanks 

it can be done some custom code 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