Changing Product Font Size on Quick Add Menu (Desktop Only)

Solved

Changing Product Font Size on Quick Add Menu (Desktop Only)

LEEDIA
Excursionist
25 0 6

The product font size when I click my "Quick Add" button is a bit too big on desktop. I was able to make it smaller on mobile view but not desktop. 

 

I appreciate any help 🙂 

 

URL: https://leediastore.com/

password: yaurow

destop-quick-add-menu.jpg

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
8286 1987 2439

This is an accepted solution.

Hi @LEEDIA 

Just to clarify decrease for the font is only for the pop up options? If it is try this one. 

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.quick-add-modal__content.global-settings-popup .product__title h2.h1 {
    font-size: 25px !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1696183378991.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 6 (6)

PageFly-Richard
Shopify Partner
4668 1069 1726

Hi @LEEDIA 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

product__title>h2 {
    font-size: 25px !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Made4uo-Ribe
Shopify Partner
8286 1987 2439

This is an accepted solution.

Hi @LEEDIA 

Just to clarify decrease for the font is only for the pop up options? If it is try this one. 

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.quick-add-modal__content.global-settings-popup .product__title h2.h1 {
    font-size: 25px !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1696183378991.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
LEEDIA
Excursionist
25 0 6

Yes the result you showed is exactly what I want, but I pasted the code in base.css and saved and nothing changed for some reason.

Made4uo-Ribe
Shopify Partner
8286 1987 2439

Please, replace on this one. Thanks!

#ProductInfo-quickadd-template--21211836711217__main > div.product__title > a > h2 {
    font-size: 25px !important;
}

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
LEEDIA
Excursionist
25 0 6

I just got the first code to work by pasting it in "quick-add.css". Works perfectly, pasting it here instead of "base.css" won't cause any issues though correct?

Made4uo-Ribe
Shopify Partner
8286 1987 2439

yeah, that is the exact css file for that template.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.