[Mobile version] How to make price in the collection screen smaller?

Store Design
, , ,
1

Hi, i would like to make the main price in the collection page for mobile only smaller, cause i find it to big. How do i do this?

The website you can use is: https://vinup.nl/en/collections/holders-and-stands

VinUp_0-1741788623476.png
VinUp_0-1741788623476.png322Ă—855 152 KB

Many thanks

1 Like
2

Hi @VinUp

You can do that by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings. You can adjust 20px in code with your value to make it fit your request.

}
@media (max-width: 600px) {
    html .price--on-sale .price-item--regular, .price .price-item {
        font-size: 20px !important;
    }
}

Screenshot_2.jpg
Screenshot_2.jpg449Ă—532 24.7 KB

3

@VinUp
I have separate your price for mobile one is regular price one is sale price , You can use both same size or use different size.

How to Add This to Shopify Dawn Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your Dawn theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.
@media (max-width: 750px) {
s.price-item.price-item--regular {
font-size: 10px!important;
}
.price .price-item{
font-size: 12px!important;
}
}