How can I adjust the font size on my cart page narrative?

Store Design
1

Hi, how do I change font size of product title, colour, size, etc on shopping cart page only?

Screenshot 2021-08-19 162511.png
Screenshot 2021-08-19 162511.png1097Ă—660 48.4 KB

1 Like
2

Hello, you can create some custom CSS rules to change the font size on the cart page.

Please, post the URL of your store here in this topic and some indications about which font size would you like to have there and I will provide you the code.

3

hello @elitaco

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

4

Ok, I got from you the message that you would like to increase the font size on all website.

As you can see the initial font-size is defined at level using the code

html {
    font-size: 50%;
}

You can add the following code at the end of file theme.scss of your Theme, inside the assets folder and change the percentage defined there, based on your preference.

html {
    font-size: 66%;
}
5

@elitaco

Please share your store URL.

6

Hi,

i would only want to change the body text font size on shopping cart page, not the whole website thanks

1 Like
7

hello @elitaco

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-cart .cart-item__meta-title {
    font-size: 2.8rem;
}
8

Hi, thanks it helps for the product title, but not for the variables

9

hello @elitaco

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-cart .cart-item__meta-title.h4 {
    font-size: 2.6rem;
}
.template-cart .cart-item__meta-variant {
    font-size: 13px;
}
.template-cart .cart-footer__note-label.small--text-center{
    font-size: 13px;
}
.template-cart .btn-link.cart-item__remove {
    font-size: 15px;
}
10

Thanks alot, it helps.

Also, do you know how to increase the font size of the store name?

Screenshot 2021-08-19 174901.png
Screenshot 2021-08-19 174901.png981Ă—116 81.1 KB

11

@elitaco

Please add the following code at the bottom of your assets/theme.scss.liquid file.

body#your-shopping-cart {
    font-size: 16px;
}
#your-shopping-cart .cart-item__meta-variant, #your-shopping-cart .cart-item__remove, #your-shopping-cart .cart-item__original-price, #your-shopping-cart .cart-item__price, #your-shopping-cart .cart-note label, #your-shopping-cart .cart-policies {
    font-size: 14px !important;
}

Hope this works.

Thanks!

12

hello @elitaco

To increase your store name

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-header__section.site-header__section--title .site-header__logo-wrapper.h4{
    font-size: 4.4rem;
}
13

Thank you!