"Sold Out" Image Overlay

April 12, 2021

Is it possible to have the words "Sold Out" with a darker transparent overlay on a product image when it is sold out? I have been trying to figure it out for a while but I am very new to website building so I haven't made any progress haha. Any help would be amazing!

Beyondspace · April 13, 2021

45 minutes ago, colejensen said:

Is it possible to have the words "Sold Out" with a darker transparent overlay on a product image when it is sold out? I have been trying to figure it out for a while but I am very new to website building so I haven't made any progress haha. Any help would be amazing!

it can be done via custom css

Would you share your site url

April 13, 2021

1 hour ago, bangank36 said:

it can be done via custom css

Would you share your site url

https://magenta-trout-gz3x.squarespace.com/config/settings

password is just "password"

Beyondspace · April 13, 2021

16 minutes ago, colejensen said:

https://magenta-trout-gz3x.squarespace.com/config/settings

password is just "password"

Could you point out the shop pgae url that has sold out products?

April 13, 2021

3 minutes ago, bangank36 said:

Could you point out the shop pgae url that has sold out products?

The "Spoons" option under the Shop drop down menu has an item that is sold out.

Beyondspace · April 13, 2021

7 minutes ago, colejensen said:

The "Spoons" option under the Shop drop down menu has an item that is sold out.

hope you twist it from here

.post-type-store-item.sold-out .grid-image:before {
  content: 'Sold Out';
  font-weight: bolder;
  color: #fff;
  font-size: 2em;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.post-type-store-item.sold-out .grid-image:after {
  content: 'Sold Out';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2
}
.post-type-store-item.sold-out .product-mark.sold-out {
  display: none;
}

April 13, 2021

18 hours ago, bangank36 said:

hope you twist it from here


.post-type-store-item.sold-out .grid-image:before {
  content: 'Sold Out';
  font-weight: bolder;
  color: #fff;
  font-size: 2em;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.post-type-store-item.sold-out .grid-image:after {
  content: 'Sold Out';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2
}
.post-type-store-item.sold-out .product-mark.sold-out {
  display: none;
}

That looks amazing! Thank you so much!!!

Domenic · July 9, 2021

Is there a way to have the sold out in the products page as well?

I used this code and it works great but when I click in to the product it looks like you can buy it normally. The ADD TO CART button is there which would be nice to change to "SOLD"

tuanphan · July 10, 2021

On 7/9/2021 at 9:44 AM, Domenic said:

Is there a way to have the sold out in the products page as well?

I used this code and it works great but when I click in to the product it looks like you can buy it normally. The ADD TO CART button is there which would be nice to change to "SOLD"

Can you share link to a sold out product? We can help easier

Domenic · July 12, 2021

On 7/10/2021 at 1:43 PM, tuanphan said:

Can you share link to a sold out product? We can help easier

https://adicovintage.com.au/store/p/utah-jazz-97-western-conference-champions-tee-xl

Password: 17Bailey21crow

So I want to keep the grey overlay that comes over saying 'Sold Out' but how do I change the ADD TO CART to be blanked out as SOLD.

Edited July 12, 2021 by Domenic

tuanphan · July 14, 2021

On 7/12/2021 at 1:50 PM, Domenic said:

https://adicovintage.com.au/store/p/utah-jazz-97-western-conference-champions-tee-xl

Password: 17Bailey21crow

So I want to keep the grey overlay that comes over saying 'Sold Out' but how do I change the ADD TO CART to be blanked out as SOLD.

Add to Design > Custom CSS

/* add to cart sold */
.sold-out .sqs-add-to-cart-button-inner {
    visibility: hidden;
    font-size: 0;
}
.sold-out .sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "SOLD";
    font-size: 16px;
    display: block;
}
.sold-out .sqs-add-to-cart-button {
    pointer-events: none;
}

Domenic · July 14, 2021

9 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* add to cart sold */
.sold-out .sqs-add-to-cart-button-inner {
    visibility: hidden;
    font-size: 0;
}
.sold-out .sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "SOLD";
    font-size: 16px;
    display: block;
}
.sold-out .sqs-add-to-cart-button {
    pointer-events: none;
}

Thank you so much!

tuanphan · July 22, 2021

On 7/14/2021 at 8:58 AM, Domenic said:

Thank you so much!

Do you need to help with these?

Site URL: https://adicovintage.com.au/
1. (Mobile/Tablet – Homepage) Image doesn’t show in full size

2. (Tablet – Footer) Want to increase text width?

3. (Tablet – Homepage) Want to increase content width?

4. (Mobile/Tablet – Overlay menu) Search box is cut off

5. (Mobile/Tablet – Overlay menu) Align menu items – search box – insta icon

6. (Mobile – Product) Show breadcrumb on the top of product (like on desktop/tablet)

https://adicovintage.com.au/store/p/detroit-red-wings-95-western-conference-champions-tee-xl

7. (Mobile – Product) Make text inside button on the same row

https://adicovintage.com.au/store/p/detroit-red-wings-95-western-conference-champions-tee-xl

8. (Mobile/Tablet – Cart) There is a scroll bar at bottom of the page

https://adicovintage.com.au/cart

9. You haven’t changed SEO title so browser tab name still show “Store 2”

https://adicovintage.com.au/store/t-shirts

Domenic · July 23, 2021

14 hours ago, tuanphan said:

Do you need to help with these?

Site URL: https://adicovintage.com.au/
1. (Mobile/Tablet – Homepage) Image doesn’t show in full size

2. (Tablet – Footer) Want to increase text width?

3. (Tablet – Homepage) Want to increase content width?

4. (Mobile/Tablet – Overlay menu) Search box is cut off

5. (Mobile/Tablet – Overlay menu) Align menu items – search box – insta icon

6. (Mobile – Product) Show breadcrumb on the top of product (like on desktop/tablet)

https://adicovintage.com.au/store/p/detroit-red-wings-95-western-conference-champions-tee-xl

7. (Mobile – Product) Make text inside button on the same row

https://adicovintage.com.au/store/p/detroit-red-wings-95-western-conference-champions-tee-xl

8. (Mobile/Tablet – Cart) There is a scroll bar at bottom of the page

https://adicovintage.com.au/cart

9. You haven’t changed SEO title so browser tab name still show “Store 2”

https://adicovintage.com.au/store/t-shirts

Tuanphan I sure do. Any assistance would be great.

As I am new with creating a site these are all things I may have missed/don't know how to fix.

So help is much appreciated.

tuanphan · July 23, 2021

6 hours ago, Domenic said:

Tuanphan I sure do. Any assistance would be great.

As I am new with creating a site these are all things I may have missed/don't know how to fix.

So help is much appreciated.

Q1 + 2. Add to Design > Custom CSS

/* Mobile tablet resize home top banner image */
@media screen and (max-width:991px) {
[data-section-id="60d42efe808384202ace9c66"] {
    min-height: unset !important;
    height: 45vh;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60e52f66cdb200687e63121c .span-12>.row:first-child>.col:nth-child(-n+2) {
    width: 25%;
}
}

Domenic · July 24, 2021

22 hours ago, tuanphan said:

Q1 + 2. Add to Design > Custom CSS

/* Mobile tablet resize home top banner image */
@media screen and (max-width:991px) {
[data-section-id="60d42efe808384202ace9c66"] {
    min-height: unset !important;
    height: 45vh;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60e52f66cdb200687e63121c .span-12>.row:first-child>.col:nth-child(-n+2) {
    width: 25%;
}
}

Thank you Tuanphan, love your work.

I will await your assistance with the other sections.

tuanphan · July 25, 2021

On 7/24/2021 at 12:29 PM, Domenic said:

Thank you Tuanphan, love your work.

I will await your assistance with the other sections.

Q3, 4, 6, 7. Add to Custom CSS

/* Tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* first collection live width */
[data-section-id="60e43f5996f8c549df7b132e"] .content {
    width: 90% !important;
}
/* search */
.header-search-bar input {
    width: 100% !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
/* header search */
.header-search-bar input {
    width: 100% !important;
}
/* show breadcrumb */
.ProductItem-nav-breadcrumb {
    display: block !important;
}
/* add to cart */
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 70%;
}
}

Domenic · July 26, 2021

19 hours ago, tuanphan said:

Q3, 4, 6, 7. Add to Custom CSS

/* Tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* first collection live width */
[data-section-id="60e43f5996f8c549df7b132e"] .content {
    width: 90% !important;
}
/* search */
.header-search-bar input {
    width: 100% !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
/* header search */
.header-search-bar input {
    width: 100% !important;
}
/* show breadcrumb */
.ProductItem-nav-breadcrumb {
    display: block !important;
}
/* add to cart */
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 70%;
}
}

Thank you again!

I suppose now you have pointed out Q9. (store 2 showing) that would be the one I probably should get fixed.

tuanphan · July 27, 2021

On 7/26/2021 at 10:20 AM, Domenic said:

Thank you again!

I suppose now you have pointed out Q9. (store 2 showing) that would be the one I probably should get fixed.

Did you fix Q9?

Domenic · July 28, 2021

20 hours ago, tuanphan said:

Did you fix Q9?

I think the codes you gave me did the trick.

Thank you for your help

Domenic · August 1, 2021

On 7/27/2021 at 6:30 PM, tuanphan said:

Did you fix Q9?

Hi Tuanphan,

Store 2 is still showing up when click through the website. Are you able to assist me with this by any chance?

tuanphan · August 3, 2021

On 8/1/2021 at 5:49 PM, Domenic said:

Hi Tuanphan,

Store 2 is still showing up when click through the website. Are you able to assist me with this by any chance?

Hover Store Page on Main Navigation or Not Linked > Click Gear icon > SEO >> Enter "Store" in SEO Title > Save & check again

Domenic · August 4, 2021

23 hours ago, tuanphan said:

Hover Store Page on Main Navigation or Not Linked > Click Gear icon > SEO >> Enter "Store" in SEO Title > Save & check again

Thank you!

Ekat27 · November 7, 2021

So I followed the codes written to add the darkened overlay to my product image when it is sold out. But if you look really very closely at my very left image, you can see in the top left corner that it says "Sold out" too, meaning it is written twice on the image. I just want the boldened text in the middle of the image for the customers to see. Do yall know how I'd adjust the code so that I didn't see the text in the upper left corner as well? I tried doing it myself but couldn't figure it out. I know this is really nit-picky, but any and all help is appreciated!!

tuanphan · November 8, 2021

On 11/7/2021 at 4:03 PM, Ekat27 said:

So I followed the codes written to add the darkened overlay to my product image when it is sold out. But if you look really very closely at my very left image, you can see in the top left corner that it says "Sold out" too, meaning it is written twice on the image. I just want the boldened text in the middle of the image for the customers to see. Do yall know how I'd adjust the code so that I didn't see the text in the upper left corner as well? I tried doing it myself but couldn't figure it out. I know this is really nit-picky, but any and all help is appreciated!!

Can you share link to page in screenshot? We can help easier

"Sold Out" Image Overlay

Recommended Posts

Guest

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Beyondspace

tuanphan

Posted Images

Link to comment

Guest

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources