How to adjust the font size of my online store's collection?

Technical Q&A

Topic summary

A user seeks help changing font sizes for product collection elements on their Shopify store using the Motion theme.

Solutions Provided:
Two experts offered CSS code snippets to adjust font sizes for:

  • Product grid titles (15px)
  • Product grid prices (15px)
  • Sold-out tags (10px)

Implementation Steps:

  1. Navigate to Online Store → Themes → Actions → Edit Code
  2. Locate the base.css file in Assets
  3. Paste the provided CSS at the bottom of the file
  4. Save changes

Follow-up Issue:
The original poster cannot locate the base.css file in their Motion theme. An expert clarified they can alternatively add the code to theme.css or custom.css files instead.

The discussion remains open as the user works through implementation.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hey, how do i change the font of these:

Website Link: https://8c2dd1-3.myshopify.com/

sondreskskfsghj_0-1675624153624.png
sondreskskfsghj_0-1675624153624.png1177×721 168 KB

1 Like
2

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >base.css and paste this at the bottom of the file:

Hello There,

Admin go to online store -> themes -> actions -> edit code
Find Asset >base.css and paste this at the bottom of the file:

.grid-product__title {
    font-size: 15px;
}
.grid-product__tag.grid-product__tag--sold-out {
    font-size: 10px;
}
.grid-product__price {
    font-size: 15px;
}

ZestardTech_0-1675662103932.png
ZestardTech_0-1675662103932.png1352×635 277 KB

3

Hi @sondreskskfsghj

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please follow these steps to add Css on your theme file:

  1. Go to Online Store > Theme > Edit code.
  2. Search Css file.
  3. Paste the below code at bottom of the Css file → Save
.grid-product__title {font-size: 15px !important;} .grid-product__tag.grid-product__tag--sold-out {font-size: 10px !important;} .grid-product__price {font-size: 15px !important;}

Regards,

Santanu

4

thanks for the reply, but how do i do this on motion theme, i cant find base.css

5

thanks for the reply, but how do i do this on motion theme, i cant find base.css

6

Hi @sondreskskfsghj

You can add the code on your theme.css or custom.css file.

Regards,

Santanu