Essentialsbymhd Posted December 15, 2021 Share Posted December 15, 2021 Site URL: http://essentialsbymhd.com Hi, Is there a way to add a custom font style & size to my shopping cart page (Title, product name, etc.) as well as my checkout page (Store logo size, custom font & sizes for the whole page) I tried to add a css found online but none of them works. I was able to custom my font style and size for almost everything on my website except these two pages. Please help me figure that out! Thank you, Natalie Link to comment
paul2009 Posted December 15, 2021 Share Posted December 15, 2021 You won't be able to change the checkout. All Squarespace checkouts must use Squarespace's own font - Clarkson. You can change the Cart page, but as Squarespace changed many of the classes on this page last week, most of the solutions you find online will be out of date. Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
Essentialsbymhd Posted December 15, 2021 Author Share Posted December 15, 2021 Would you be able to get me a css solution for the cart page Link to comment
Solution paul2009 Posted December 15, 2021 Solution Share Posted December 15, 2021 All you need to do is add an item to your cart, then you can right-click the cart page and choose View Source to view all the classes that are being used on the page. By looking through these you can identify the elements you want to change. For example, here's a snippet of what you'll see... <h2 class="i7PYLD8MO cart-title">SHOPPING CART</h2> <div class="tdHSD5wnk cart-item-list-labels"> <div class="tF9EGG_rQ item-desc"> <span class="variant-name">Color</span> <div class="RgUdJr28R item-quantity"> So you should be able to change the cart title font, by adding the class name (cart-title) prefixed with a "." something like this: .cart-title { font-family: proxima-nova !important; } where proxima nova is the font name. Note that you'll need to save your changes and then refresh the page each time to see your CSS working. You can do this for more than one element by separating the names with commas like this to affect the cart title and the list labels: .cart-title, .cart-item-list-labels { font-family: proxima-nova !important; } Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
Essentialsbymhd Posted December 16, 2021 Author Share Posted December 16, 2021 It worked! Can you also teach me how to change the font size? Thank you so much Link to comment
paul2009 Posted December 17, 2021 Share Posted December 17, 2021 7 hours ago, Essentialsbymhd said: Can you also teach me how to change the font size? Add something like this before the final curly brace: font-size: 1.3em; Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee Link to comment
Essentialsbymhd Posted December 17, 2021 Author Share Posted December 17, 2021 Hi, I don't know why but everything worked except my item title & checkout Button. Bellow is my css code, let me know what went wrong .cart-title, .cart-item-list-labels, .item-desc, .variant-name, .item-quantity, .item-price, .vP_HqHxwY, .TPEfWzjos, .sqs-editable-button KD_Juh_j6 checkout-button, { font-size: 1em !important; } Link to comment
creedon Posted December 17, 2021 Share Posted December 17, 2021 (edited) You had some syntax errors and incorrect selectors. Try the following. // alter cart, uses LESS syntax #cart { .cart-item-list-labels, .cart-title, .item-desc a, .item-price, .item-quantity, .checkout-button, .variant-name, .vP_HqHxwY { font-size : 1em; } } I'm using a little bit of LESS syntax to save on typing of #cart over and over again. Adding #cart makes sure that other parts of your site aren't unexpectedly altered. After LESS processes the input it looks like the following. #cart .cart-item-list-labels, #cart .cart-title, #cart .item-desc a, #cart .item-price, #cart .item-quantity, #cart .checkout-button, #cart .variant-name, #cart .vP_HqHxwY { font-size: 1em; } Let us know how it goes. Edited December 18, 2021 by creedon version 2 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Essentialsbymhd Posted December 17, 2021 Author Share Posted December 17, 2021 It still doesn't work 😞 Link to comment
creedon Posted December 17, 2021 Share Posted December 17, 2021 Quote It still doesn't work Did you provide a site-wide password to us? I didn't see one. We need to see your cart page. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Essentialsbymhd Posted December 17, 2021 Author Share Posted December 17, 2021 essentialsbymhd.com password is essentials Link to comment
creedon Posted December 18, 2021 Share Posted December 18, 2021 I have updated my code post. Here is what I'm seeing when I apply the code to your site locally. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Essentialsbymhd Posted December 20, 2021 Author Share Posted December 20, 2021 Hi, I tried the code again and it works! Thanks you so much! creedon 1 Link to comment
Essentialsbymhd Posted December 21, 2021 Author Share Posted December 21, 2021 I have another question. I tried to change the font for the pricing shown in my product list but it doesn't seem to work. The title of the product worked but not the pricing. Link to comment
creedon Posted December 21, 2021 Share Posted December 21, 2021 Quote I tried to change the font for the pricing shown in my product list but it doesn't seem to work. You can target the titles and prices with the following selectors. .collection-type-products .grid-title .collection-type-products .grid-prices Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Essentialsbymhd Posted December 21, 2021 Author Share Posted December 21, 2021 You're awesome! Thank you so much!!!!❤️ creedon 1 Link to comment
JiaDeLara Posted March 2 Share Posted March 2 Hello everyone, I have been trying to change the font and design of my shopping cart and checkout page but it doesn't work. I found this thread and try to follow your instructions but when I right click "view source" doesn't come up? Would appreciate some help! Link to comment
creedon Posted March 3 Share Posted March 3 15 hours ago, JiaDeLara said: I have been trying to change the font and design of my checkout page but it doesn't work. The checkout page can not be changed. It is an SS security feature. Quote when I right click "view source" doesn't come up? I don't have an answer for this one. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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