Guest Posted April 12, 2021 Share Posted 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! Link to comment
Beyondspace Posted April 13, 2021 Share Posted 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted April 13, 2021 Share Posted 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" Link to comment
Beyondspace Posted April 13, 2021 Share Posted 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted April 13, 2021 Share Posted 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. Link to comment
Solution Beyondspace Posted April 13, 2021 Solution Share Posted 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; } tuanphan, artpimpress and Ekat27 2 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted April 13, 2021 Share Posted 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!!! Link to comment
Domenic Posted July 9, 2021 Share Posted 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" Link to comment
tuanphan Posted July 10, 2021 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 12, 2021 Share Posted July 12, 2021 (edited) 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 Link to comment
tuanphan Posted July 14, 2021 Share Posted 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 14, 2021 Share Posted 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! Link to comment
tuanphan Posted July 22, 2021 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 23, 2021 Share Posted 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. Link to comment
tuanphan Posted July 23, 2021 Share Posted 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%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 24, 2021 Share Posted 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. Link to comment
tuanphan Posted July 25, 2021 Share Posted 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%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 26, 2021 Share Posted 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. Link to comment
tuanphan Posted July 27, 2021 Share Posted 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted July 28, 2021 Share Posted 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 Link to comment
Domenic Posted August 1, 2021 Share Posted 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? Link to comment
tuanphan Posted August 3, 2021 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Domenic Posted August 4, 2021 Share Posted 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! Link to comment
Ekat27 Posted November 7, 2021 Share Posted 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!! Link to comment
tuanphan Posted November 8, 2021 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment