Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: 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
9039 2160 2665

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 6 (6)

PageFly-Richard
Shopify Partner
4782 1082 1749

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
9039 2160 2665

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9039 2160 2665

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9039 2160 2665

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.