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

Highlighted
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
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
289 0 219

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
Highlighted
Tourist
10 0 1

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

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
289 0 219

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
Highlighted
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
Highlighted
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 ; )

 

1 Like
Highlighted
Tourist
5 0 2

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.

1 Like
Highlighted
Shopify Partner
4830 716 1534

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
1 Like
Highlighted
Tourist
5 0 2

@KetanKumar 

The website is of Shopify Venture Theme. 

https://getemlifestyle.com

Please provide the solution.

1 Like
Highlighted
Shopify Partner
4830 716 1534

@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