Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Waitlist form style - how can I edit?


WinnieLim

Question

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 post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 answers to this question

Recommended Posts

  • 0

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 post
  • 0
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;
}

 

Link to post
  • 0
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;
}

 

Link to post
  • 0

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 post
  • 0
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;
}

 

Link to post
  • 0

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 post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0

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 post
  • 0
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;
}
}

 

Link to post
  • 0

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 post
  • 0

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;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...