⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Hey can you do a video on how to change the size of the subtotal and the size and color while also doing the you have nothing in your cart please and change won't stay once I'm off the page it reverts back to being super Small
Creating a function like that is outside my area of expertise. I would recommend reaching out to Acuity support or posting on the Squarespace forum to see if any other designers can help. Best of luck with your project!
Cheers, you are a life saver. I'm going to check out your site to see if you have a way to add on Recommended at the button for the Cart. I'm taking a Marketing class and upselling in this area is very important.
I'm glad you like my content! The code I teach - CSS - is all about the style, and not a function of a site like adding a button where one doesn't exist. At this time there isn't a way to add a button to a cart, but you can select recommended products for an upsell, known as "add-on products"! Check out this support article with more info: support.squarespace.com/hc/en-us/articles/21149527560205-Selling-add-on-products
Great question! Technically you can but I would advise against it - people like to have somewhere to go in case they aren’t ready to buy 😬 but here is a tutorial with the codes you’ll need; hope it helps! insidethesquare.co/tiny/landing-page
Oooh that is a tricky one and I dont think we can. Ee can't apply code to load on auto generated page specifically, and the collection id will refresh based on browser activity, there isn't a way to target a global element on the auto page. I'll keep this one on my to do list in case I can think of a workaround. 🤞
Your cart is going to match the base color theme for your site; you'll be able to see which one when you are in edit mode, open the cart, and then open the site style menu. The color theme label will show up on the top right hand corner of the cart page section, directly under the header. There are no cart settings in the color theme menu that you can adjust without changing other aspects of your site, like the button style. That's why I made this video - to customize it to anything other than the automatic design, you'll need to use code.
Is there a way to allow the customer to insert a file while checking out? And a way that it requires the customer to upload said file (with a specific file type as well)? I am trying to start a website that offers proofreading services that requires customers to insert their online manuscript with their purchase of my services. Is this possible with a Squarespace website? This video was super informational as well! Thank you for teaching others in such a simple, easy, professional way!
Hey Loren! That's a great question but unfortunately that kind of functionality is not built into Squarespace, so you'll need a plugin to make it possible. I would recommend posting on the forum to see if anyone has created one / found a solution: forum.squarespace.com
Hi Sandy, I don't hav a tutorial yet with this, but you can definetely check out the official Squarespace support blogs to see their response: support.squarespace.com/hc/en-us/articles/360002111987-Customizing-your-checkout-experience#:~:text=To%20edit%20the%20Continue%20Shopping,and%20select%20a%20new%20destination.
Great Video! Is there are way to change the color of all of the text on the cart page? All of the text on my cart page is beige and no matter what I change on site styles it doesn't go to the default Black text. So as a temporary fix I changed the entire background from white to black so the text shows up. I was able to use the codes for the shopping cart title and product title to change the color of the text, but the rest is still a beige color.
Not sure if you managed to figure this out, but I've used the below code to get it to work: /* other fonts in cart page */ .cart { color: #204451!important; }
for some reason the border width that you've put to 80vw.. looks way to long in the width on mobile, it gives me the option to scroll, but whenever I change the width it stays the same on both desktop and mobile?
Try adding !important to force the browser to pick up on the code on all devices. You can also include max-width: 80vw!important and min-wdith: 80vw!important to cover all your bases. Hope that info helps and best of luck with your project!
Cart quantity is a Squarespace program feature - not something we can change with a style code. You need to contact Squarespace support for help. I've found their live chat to be really responsive; here is a link to the site: support.squarespace.com
i can give you the code to start with, but the rest to increase it i could not really tell you with out further diggings. But this first like controls the quantity of the cart itself. the actual code after to increase it im not sure. but atleast it gives you a start on where to look at in the code. sqs-cart-quantity
Hi, Do you know what the code would be to change the link contained within the header logo? I have managed to do this on several other pages, but I want to use a specific link for the the link back from the shopping cart. Thanks in advance! Antony
The header logo is built to link to your home page, not your cart. You'll need to overwrite that function with a code - likely javascript, and not CSS. I'd recommend searching/posting in the forums for help: forum.squarespace.com Hope you're able to find a good solution - best of luck with your project ! ☺️
I am having an issue with this.. I type in the custom css and the look changes. I hit save, exit the page, reload the cart to check my edits. While some of my changes remain, the most important one, the color changes, don't seem to be carrying over on my desktop or mobile device whether logged in or not... I figure it is breaking my template but I'm not sure why. This is annoying cuz the current background color is hiding the checkout button. Any help would be much appreciated
That sounds frustrating! I need to see your source code to see what is overwriting your custom CSS. Send me a link and I'll take a look: support-at-insidethesquare.co
Interesting question! The store is technically a system page, so any code we apply to that will also apply to any other automatically generated page, like search results, or the built in 404 if you haven't assigned a new one. The best we can do -without affecting other pages - is to target the actual cart container on the page, which responds to .sqs-cart-container Hope that info helps and best of luck with your project!
The shopping cart & pricing is a key part of an online store. If you don't need people to add items to a cart, or know their price, you can create a portfolio of projects or a blog with posts instead of a store 🤷♀️
Thank you so much for all of your videos! We're so lucky to have you as a resource. I was wondering if it's possible to change the font size on the quantity of the product and the price? And also the subtotal/checkout/total font sizes--how does one change those? Thank you
I'm so glad my work is helping you with yours - thank you for letting me know! 🥰 With the right selectors you can modify those; these codes can help you get started: .cart-row-qty-input .cart-row-price .cart-subtotal-price
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Hey can you do a video on how to change the size of the subtotal and the size and color while also doing the you have nothing in your cart please and change won't stay once I'm off the page it reverts back to being super Small
The blessing that is finding this channel. Thank you 😭
You are so welcome - thanks for your comment! 🥰
You've helped me develop my squarespace page so much! I love love love your content! Thank you so much!!!
Your comment just made my day - thank you so much for letting me know! 💙
Thank you for this tutorial, Becca! I'll be using this on my site.
You're so welcome! I'm happy to hear that my work is helping you with yours 🥰
Thank you SO MUCH!!!! I’ve been needing this! I can’t wait to implement it! PS: so excited for the workshop tomorrow!!! 😀😀😀
You're so welcome Holly! "See" you tomorrow! 😉🎉🙌
Great video! Can you change the color of the logo in the cart?
Great question! I don’t have a code for that off the top of my head but I’ll add the idea to my tutorial to do list 🙌
Thanks for great video. I wanted to add the date pick option from Acuity in the card page, below the shopping cart. Is it possible to help me out?
Creating a function like that is outside my area of expertise. I would recommend reaching out to Acuity support or posting on the Squarespace forum to see if any other designers can help. Best of luck with your project!
Cheers, you are a life saver. I'm going to check out your site to see if you have a way to add on Recommended at the button for the Cart. I'm taking a Marketing class and upselling in this area is very important.
I'm glad you like my content! The code I teach - CSS - is all about the style, and not a function of a site like adding a button where one doesn't exist. At this time there isn't a way to add a button to a cart, but you can select recommended products for an upsell, known as "add-on products"! Check out this support article with more info: support.squarespace.com/hc/en-us/articles/21149527560205-Selling-add-on-products
This is great! Is it possible to remove the header and footer from the shopping cart page?
Great question! Technically you can but I would advise against it - people like to have somewhere to go in case they aren’t ready to buy 😬 but here is a tutorial with the codes you’ll need; hope it helps! insidethesquare.co/tiny/landing-page
Hi, great video thanks! Is there a way to also remove the header? I've done this for my other pages but can't get rid of it here. Thanks :)
Oooh that is a tricky one and I dont think we can. Ee can't apply code to load on auto generated page specifically, and the collection id will refresh based on browser activity, there isn't a way to target a global element on the auto page. I'll keep this one on my to do list in case I can think of a workaround. 🤞
How do I just change it to one of my saved color themes so that it automatically matches the themes I have elsewhere on my site? Thanks!
Your cart is going to match the base color theme for your site; you'll be able to see which one when you are in edit mode, open the cart, and then open the site style menu. The color theme label will show up on the top right hand corner of the cart page section, directly under the header. There are no cart settings in the color theme menu that you can adjust without changing other aspects of your site, like the button style. That's why I made this video - to customize it to anything other than the automatic design, you'll need to use code.
Is there a way to allow the customer to insert a file while checking out? And a way that it requires the customer to upload said file (with a specific file type as well)? I am trying to start a website that offers proofreading services that requires customers to insert their online manuscript with their purchase of my services. Is this possible with a Squarespace website?
This video was super informational as well! Thank you for teaching others in such a simple, easy, professional way!
Hey Loren! That's a great question but unfortunately that kind of functionality is not built into Squarespace, so you'll need a plugin to make it possible. I would recommend posting on the forum to see if anyone has created one / found a solution: forum.squarespace.com
Thank you so much. 🤗🙏🏼
I have a question:
Is it possible to add a button on cart page. (continue shopping) 😎
Hi Sandy, I don't hav a tutorial yet with this, but you can definetely check out the official Squarespace support blogs to see their response: support.squarespace.com/hc/en-us/articles/360002111987-Customizing-your-checkout-experience#:~:text=To%20edit%20the%20Continue%20Shopping,and%20select%20a%20new%20destination.
Great Video! Is there are way to change the color of all of the text on the cart page? All of the text on my cart page is beige and no matter what I change on site styles it doesn't go to the default Black text. So as a temporary fix I changed the entire background from white to black so the text shows up. I was able to use the codes for the shopping cart title and product title to change the color of the text, but the rest is still a beige color.
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Not sure if you managed to figure this out, but I've used the below code to get it to work:
/* other fonts in cart page */
.cart {
color: #204451!important;
}
@@amandakrausz this was perfect and worked, this has been driving me crazy trying to figure out
for some reason the border width that you've put to 80vw.. looks way to long in the width on mobile, it gives me the option to scroll, but whenever I change the width it stays the same on both desktop and mobile?
Try adding !important to force the browser to pick up on the code on all devices. You can also include max-width: 80vw!important and min-wdith: 80vw!important to cover all your bases. Hope that info helps and best of luck with your project!
How do you change how the cart quantity? Only letting me add 500 items to it.
Cart quantity is a Squarespace program feature - not something we can change with a style code. You need to contact Squarespace support for help. I've found their live chat to be really responsive; here is a link to the site: support.squarespace.com
i can give you the code to start with, but the rest to increase it i could not really tell you with out further diggings. But this first like controls the quantity of the cart itself. the actual code after to increase it im not sure. but atleast it gives you a start on where to look at in the code.
sqs-cart-quantity
Hi,
Do you know what the code would be to change the link contained within the header logo? I have managed to do this on several other pages, but I want to use a specific link for the the link back from the shopping cart.
Thanks in advance!
Antony
The header logo is built to link to your home page, not your cart. You'll need to overwrite that function with a code - likely javascript, and not CSS. I'd recommend searching/posting in the forums for help: forum.squarespace.com Hope you're able to find a good solution - best of luck with your project ! ☺️
I am having an issue with this.. I type in the custom css and the look changes. I hit save, exit the page, reload the cart to check my edits. While some of my changes remain, the most important one, the color changes, don't seem to be carrying over on my desktop or mobile device whether logged in or not... I figure it is breaking my template but I'm not sure why. This is annoying cuz the current background color is hiding the checkout button. Any help would be much appreciated
That sounds frustrating! I need to see your source code to see what is overwriting your custom CSS. Send me a link and I'll take a look: support-at-insidethesquare.co
Is there a way to change the background of the page? I keep trying but nothing seems to work
Interesting question! The store is technically a system page, so any code we apply to that will also apply to any other automatically generated page, like search results, or the built in 404 if you haven't assigned a new one. The best we can do -without affecting other pages - is to target the actual cart container on the page, which responds to .sqs-cart-container
Hope that info helps and best of luck with your project!
To change the background of the whole cart page, use:
.cart{
background-color: #FFFFFF;
}
I like you. ❤❤❤❤
Could someone help me remove the shopping cart and prices for all the products? in our case There is no need for them.
The shopping cart & pricing is a key part of an online store. If you don't need people to add items to a cart, or know their price, you can create a portfolio of projects or a blog with posts instead of a store 🤷♀️
Thank you so much for all of your videos! We're so lucky to have you as a resource. I was wondering if it's possible to change the font size on the quantity of the product and the price? And also the subtotal/checkout/total font sizes--how does one change those? Thank you
I'm so glad my work is helping you with yours - thank you for letting me know! 🥰 With the right selectors you can modify those; these codes can help you get started:
.cart-row-qty-input
.cart-row-price
.cart-subtotal-price
@@InsideTheSquare Thank you! Exactly what I was looking for.