Clarilou Posted February 25, 2021 Share Posted February 25, 2021 Site URL: http://www.amovintage.com Hi, I would like to change my shop page so that instead of the SOLD OUT product information showing underneath the price on the products page, it shows up over the image instead as a sticker. I have seen loads of squarespace websites with this and tried to find the answers on here as well as google but cant find it anywhere. If anyone knows I would appreciate it so much, feel like I'm missing something really simple! Have attached an image of mine v example of what I would like it to look like, I dont mind if the new one is a square or a circle or positioned in the top or bottom corner, just think it looks much more professional then how it currently sits. Thank you!!! Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 Add this to Last Line in Design > Custom CSS /* Sold out */ .view-list .product-mark.sold-out { position: static !important; background: transparent !important; color: black !important; text-align: center !important; transform: unset !important; top: unset !important; right: unset !important; width: 100%; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
heypixelpaper Posted April 14, 2021 Share Posted April 14, 2021 Site URL: https://www.pixelpaperhearts.com/shop-pph/key-tags Hi there, I tried to use the code above, but doesn't look like it worked? Any suggestions? Thank you so much! Link to comment
tuanphan Posted April 14, 2021 Share Posted April 14, 2021 8 hours ago, heypixelpaper said: Site URL: https://www.pixelpaperhearts.com/shop-pph/key-tags Hi there, I tried to use the code above, but doesn't look like it worked? Any suggestions? Thank you so much! It looks like you solved? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
heypixelpaper Posted April 14, 2021 Share Posted April 14, 2021 1 hour ago, tuanphan said: It looks like you solved? I figured a bit out last night. thanks for asking! is there something I can add to the code to make it circle vs. square? Link to comment
tuanphan Posted April 15, 2021 Share Posted April 15, 2021 18 hours ago, heypixelpaper said: I figured a bit out last night. thanks for asking! is there something I can add to the code to make it circle vs. square? With circle .view-list .product-mark.sold-out { background: #000 !important; color: #fff !important; font-family: FUTURACUSTOM; letter-spacing: 0px; line-height: 0px; font-size: 16px; position: absolute; transform: rotate( -20deg ); top: 10px; right: 10px; display: center; padding: 20px; border-radius: 100%; width: 20px; height: 20px; justify-content: center; align-items: center; text-align: center; display: flex; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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