Sold Out image overlay for Simple theme?

Shopify Partner
2569 133 433

@JimWatts wrote:

I still have yet to find a solution that works Displaying sold out on the Collection page and Product page over the image for Simple Theme.


It is not likely you'll find an off the shelf solution that is not an app without investing your time in reading the resources provided as a starting point.

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Excursionist
36 2 0

I will be working on this as it seems the community here isn't very helpful. I will develop a good work around for all users using the Simple Theme.
It will be a nice Sold Out button overlay on the Product Image that will be customizable with CSS. Thanks. 
There should be some easily plug and playable code that someone can provide...

0 Likes
Shopify Partner
222 17 84

@PaulNewton @JimWatts 

We do not charge extra credit for removing the badge/label. One credit will be charged only for applying a new badge on to a product. We do also provide a subscription plan for unlimited usage.

@JimWatts we also provide customer-tailored help for applying sale/sold out stickers for the bulk of products. If you're interested to know more, then please DM me separately and I'll be happy to be of assistance. 

Sincerely,

ModeMagic
Featured on Shopify Staff Picks
Excursionist
36 2 0

This is what I am trying to achieve. Very simple. 
www.watsinternationalinc.com (Test website)
So I want to remove where it says sold out after the desc., and I want to add SOLD OUT (Button/Banner) over the Images on the Collection Pages. 

new_look.png

 

0 Likes
Shopify Partner
2569 133 433

@JimWatts wrote:

I will be working on this as it seems the community here isn't very helpful.


You have been supplied with several resources to get started on a custom solution by several people.

Goodluck with that attitude.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Excursionist
36 2 0
Click to expand...
Actually, quite the contrary. However, I have now made some progress. All of the solutions provided are not effective in what is trying to be accomplished. Changing images for 50,000 products would be impossible. Please see progress below.

Now the only thing is to get this styled like the button. That seems to be the hard part as I am not too familiar with this. Anything would help. Thanks. 

Accomplished.png
0 Likes
Excursionist
36 2 0

I have added this code now:
And we are good. There is only one issue. I would like to remove the A:Hover Opacity effect. How can I achieve this?

 

<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"> <button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text">{{ 'products.product.sold_out' | t }}</button> </strong> 
  {% endif %}
    </p>
0 Likes
Excursionist
36 2 0

So now all that needs to be done is removing just the A:hover effect over the Button that is now on the images. I do not want to remove it from the images, and I only want this to be done in that portion of the Shopify theme. See below:

 

good.png

0 Likes
Excursionist
36 2 0
<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"><button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text" style="opacity: 1">{{ 'products.product.sold_out' | t }}</button></strong> 
  {% endif %}
    </p>
         

This is what I have now. They only problem now is that OnClick turns it black. How to fix this? Thanks!yes.png

0 Likes
Excursionist
36 2 0

Final Solution:


@JimWatts wrote:

 

<p>
  {% if sold_out %} 
  <strong class="badge badge--sold-out-product"><button id="AddToCart" class="btn product-single__cart-submit
 &lt;span id=" name="SoldOutText" type="text" style="opacity: 1">{{ 'products.product.sold_out' | t }}</button></strong> 
  {% endif %}
    </p>
         

 

This is what I have now. They only problem now is that OnClick turns it black. How to fix this? Thanks!yes.png


Added  to my CSS:  pointer-events: none;

 

 

.badge--sold-out-product {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;

  span {
    background-color: $color-sold-out-badge;
  }
}

 

0 Likes