All things Shopify and commerce
hello is there a way tp change both at the same time? TIA https://campomadero.com/ using studio theme
Hey @HCM15,
To change the font and size of the menu and bag text in your header, you can add the following CSS to your theme's base.css file or a custom CSS file. This CSS targets the menu items in the header and the cart icon text.
/* Change font and size for menu items */ .header__heading-link, .menu-drawer__menu-item, .header__icon--cart { font-family: 'Your Desired Font', sans-serif !important; /* Replace with your desired font */ font-size: 16px !important; /* Adjust the size as needed */ font-weight: normal !important; /* Adjust the weight as needed */ } /* Specific targeting for the cart/ bag text */ .header__icon--cart { font-size: 14px !important; /* Adjust the size as needed */ font-weight: bold !important; /* Adjust the weight as needed */ }
Access Your Theme Files:
Go to your Shopify admin dashboard.
Navigate to Online Store > Themes.
Find your current theme and click Actions > Edit code.
Locate the CSS File:
In the left-hand sidebar, scroll down to the Assets section and click on base.css (or your custom CSS file) to open it.
Add the CSS Code:
Scroll to the bottom of the file and paste the CSS code provided above.
Replace 'Your Desired Font' with the actual font name you want to use. If it's a custom font, make sure it's loaded in your theme.
Save the Changes:
Click Save in the top-right corner to apply the changes.
This should update the font and size of the menu and bag text in your header. If you need further customization or run into any issues, feel free to DM and ask!
Cheers!
Shubham | Untechnickle
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
hello! this only changed bag, not menu, how can I change menu now to match bag? TIA
Hi @HCM15
Its seems like you add the size of the bag already.
For the menu you need to add the font-size on the code you add in the base.css
Just add like this.
.header__icon--menu:before {
content: "Menu" !important;
color: #000 !important;
position: inherit !important;
font-size: 16px;
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
this worked thank you!
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025