Jump to content

Waitlist form style - how can I edit?

Recommended Posts

Site URL: https://www.chalkvscheese.com/shop/theouting

Hi, I'm trying to figure out how to edit the style of the waitlist form. Currently it looks like this for a sold out product on my website (pic 1). I would like to make it look more inline with what I've done with the newsletter form that's currently in the footer of my website (pic 2) - align to the centre and only have a solid line rather than a white box and an outline button. The padding is also huge under this form, is it possible to minimise so it matches the other product pages? Help please! 

 

 

pic 1.png

pic 2.png

Link to comment
  • Replies 15
  • Views 1.4k
  • Created
  • Last Reply

Hi, I've just made a product out of stock, here's the link: https://www.chalkvscheese.com/theshop/theouting

I've figured out the padding problem, would like to know how to align email address input field and send button so that it's centred to the all the text above. Would also like to make it the email address input field a solid line instead of a white box (see newsletter input field for reference, in the footer). Is it possible to make the SOLD OUT status appear on the products page too? 

Thanks. 

 

Link to comment
On 3/29/2021 at 11:40 AM, WinnieLim said:

Hi, I've just made a product out of stock, here's the link: https://www.chalkvscheese.com/theshop/theouting

I've figured out the padding problem, would like to know how to align email address input field and send button so that it's centred to the all the text above. Would also like to make it the email address input field a solid line instead of a white box (see newsletter input field for reference, in the footer). Is it possible to make the SOLD OUT status appear on the products page too? 

Thanks. 

 

Add to Design > Custom CSS

form.product-restock-form {
    justify-content: center;
}

 

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
On 4/1/2021 at 6:44 PM, WinnieLim said:

Amazing, thanks Taunphan! That has made it all centred now. 

Is there a way to have the SOLD OUT label appear on the products page too? Currently it only appears on this page: https://www.chalkvscheese.com/theshop/theouting

I would like it to appear on this page too: https://www.chalkvscheese.com/

Have attached screenshots for your reference. 

Thanks, Winnie

Add to Design > Custom CSS

/* Sold out on homepage */
body.homepage .sold-out .product-price:after {
    content: "Sold Out";
    display: block;
    margin-top: -10px;
    font-weight: 500;
}

 

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

Thanks Taunphan - that CSS worked a treat! But if I wanted to apply that to another product, what would I need to add to this code in order to make that happen? 

One last thing... can you figure out a code to make the email address input field that's currently a white box into a solid line with no background? Here's a link, see the NOTIFY ME block under SOLD OUT label https://www.chalkvscheese.com/theshop/theouting  I would like it to look like the JOIN US newsletter block that's currently in the middle footer. See screenshots. 

Thanks! 

Screen Shot 2021-04-08 at 1.05.24 PM.png

Screen Shot 2021-04-08 at 1.05.44 PM.png

Link to comment
On 4/8/2021 at 10:17 AM, WinnieLim said:

Thanks Taunphan - that CSS worked a treat! But if I wanted to apply that to another product, what would I need to add to this code in order to make that happen? 

One last thing... can you figure out a code to make the email address input field that's currently a white box into a solid line with no background? Here's a link, see the NOTIFY ME block under SOLD OUT label https://www.chalkvscheese.com/theshop/theouting  I would like it to look like the JOIN US newsletter block that's currently in the middle footer. See screenshots. 

Thanks! 

Screen Shot 2021-04-08 at 1.05.24 PM.png

Screen Shot 2021-04-08 at 1.05.44 PM.png

Q1. Try this new code

.sold-out .product-price:after {
    content: "Sold Out";
    display: block;
    margin-top: -10px;
    font-weight: 500;
}

Q2. Add to Design > Custom CSS

/* Restock form */
.product-restock-form input[type="text"] {
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

 

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

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

Link to comment
On 4/13/2021 at 6:45 AM, WinnieLim said:

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

Do you still need help on this? I will check it 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
On 4/13/2021 at 6:45 AM, WinnieLim said:

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

I found some problems on your site. Do you need help on these?

Site URL – https://www.chalkvscheese.com/

1. (Smaller screen) Right bar on right of screen

chalkvscheese.com-smaller-screen-min.png

2. (Mobile-Popup) Want to center text?

chalkvscheese.com-mobile-popup-min.png

3. (Tablet-Products) Increase icons section width?

chalkvscheese.com-tablet-product-min.png

4. (Mobile-Terms) Reduce left spacing?

chalkvscheese.com-mobile-terms-min.png

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

Hi Taunphan,

1. Not sure what you mean here, but think I'm happy with how that looks?

2. Yes, would love to centre text on the pop up

3. If possible that would be great. It seems to be ok on a mobile version however? 

4. Would still like some spacing but slightly reduced would be great.   

Thanks!

Link to comment
On 4/19/2021 at 6:43 AM, WinnieLim said:

Hi Taunphan,

1. Not sure what you mean here, but think I'm happy with how that looks?

2. Yes, would love to centre text on the pop up

3. If possible that would be great. It seems to be ok on a mobile version however? 

4. Would still like some spacing but slightly reduced would be great.   

Thanks!

1. I meant scroll bar on bottom of the site, on smaller screen

image.thumb.png.dcfdec804f4a410a9df859597347dfaa.png

2. Add to Design > Custom CSS

/* center popup text */
@media screen and (max-width:767px) {
div.sqs-slide-layer-content * {
    text-align: center;
}}

3. Add to Design > Custom CSS

/* Tablet icons */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksTop>.row:nth-child(2) .span-6 {
    width: 80%;
}
div#footerBlocksTop>.row:nth-child(2) .span-3 {
    width: 10% !important;
}
}

4. Add to Design > Custom CSS

/* Mobile term spacing */
@media screen and (max-width:640x) {
div#page-5f005126e00a235fe3571f81 p {
    margin-left: 20px !important;
}
}

 

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

Hi Taunphan, codes for Q2 and Q3 worked amazingly - thank you! Codes for Q4 didn't work but I think I'm actually pretty happy with the current margin spacing so all good there. Re: Q1, the bottom scroll bar is not appearing on any of my devices (iphone, ipad, apple laptop) so if there's a code that would lock in the screen size to stop that from appearing that would be great, no biggy though. 

I have noticed that the text under the main pic on the homepage (chalkvscheese.com) stays the same size, is there a code that would make it slightly smaller on a mobile device? See screen shot. 

And is there a way to customise the quantity input field and the pop up message on the shopping cart page? See screenshot. I don't want the quantity input field to be a white box, preferably a solid line with no background (similar to newsletter pop up). 

Cheers,

Winnie 

IMG_3152.PNG

Screen Shot 2021-04-13 at 2.26.18 PM.png

Link to comment

Q1. I use Dell Laptop/Chrome

image.thumb.png.1e01beee7df3e465f5483b5b7647d197.png

I have noticed that the text under the main pic on the homepage (chalkvscheese.com) stays the same size, is there a code that would make it slightly smaller on a mobile device? See screen shot. 

/* Mobile under banner text */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1616064668458_9020 h3 {
    font-size: 16px;
}
}

And is there a way to customise the quantity input field and the pop up message on the shopping cart page? See screenshot. I don't want the quantity input field to be a white box, preferably a solid line with no background (similar to newsletter pop up). 

I see no message here. How did you open message popup?

/* Cart page - input */
.item-quantity input {
    background: transparent !important;
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.