Optimizing Your Shopify Mobile Menu: Custom Font Sizes & Account Buttons Without Apps
Hey fellow store owners!
I've been sifting through the Shopify Community forums again, and a recent thread really caught my eye because it touches on a couple of customization requests that come up all the time: tweaking the mobile menu drawer's font size and adding handy Login/Sign Up buttons. Our friend veluxe1 kicked off the discussion asking if these changes could be made with custom code, avoiding extra apps – a smart question, as fewer apps often mean a snappier store!
The consensus from the community, especially from helpful folks like markjohn1, WebsiteDeveloper, and Devcoder, was a resounding 'Yes!' You absolutely can achieve these customizations without an app, primarily through a bit of CSS and some Liquid file editing. Let's dive into how you can make these tweaks to elevate your mobile user experience.
tag of the main drawer content, but you might need to preview to ensure it looks right.
Giving Your Mobile Menu a Font Size Makeover
Veluxe1 wanted to make their mobile menu font "much smaller than now" to fit their design. This is a common need, especially if you have a lot of menu items or just prefer a cleaner, more compact look on smaller screens. The good news is, it's pretty straightforward with some custom CSS. Here’s the breakdown, championed by Devcoder in the thread:- From your Shopify admin, go to Online Store > Themes.
- Find your current theme, click Actions, then select Edit Code.
- In the Assets folder, look for a file named
base.cssor sometimestheme.cssorcustom.css.base.cssis a common spot. - Scroll to the very bottom of this file and paste the following CSS code:
@media screen and (max-width: 749px) {
.menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
font-size: 14px !important;
}
.menu-drawer__menu-item--child .menu-drawer__menu-item-text {
font-size: 12px !important;
}
}
This code specifically targets the mobile menu (screens up to 749px wide) and adjusts the font size for both main menu items (14px) and any nested sub-menu items (12px). The !important tag ensures your custom styles override any default theme styles. Feel free to play around with 14px and 12px values – you can go even smaller, like 12px or 10px, to get the perfect fit for your store's aesthetic. Remember to click Save after pasting!
Adding Login and Sign Up Buttons to Your Menu Drawer
This was another key request from veluxe1, and it's a fantastic idea for improving customer convenience. Having direct access to login or registration from the mobile menu drawer can streamline the shopping experience. This part involves editing a Liquid file, which might sound a bit more daunting, but it's totally manageable. Devcoder provided excellent guidance here, and we can even incorporate a smart suggestion from suyash1 to show "My Account" if a customer is already logged in.- Again, navigate to Online Store > Themes > Actions > Edit Code.
- Look for a file like
header-drawer.liquidormenu-drawer.liquidin the Sections folder. The exact name can vary by theme (veluxe1 mentioned the Horizon theme, where it’s likely one of these). - You'll need to find a suitable place near the bottom of the drawer's markup to insert your buttons. This often means just before the closing
Notice the {% if customer %} logic? This handy Liquid snippet ensures that if a customer is already logged in, they'll see a "My Account" button instead of separate Login/Sign Up buttons. Pretty neat, right?
- Now, let's style those buttons. Go back to your
base.cssfile (or whichever CSS file you used for the font size) and add this CSS to the bottom:
.mobile-auth-buttons {
display: flex;
gap: 10px;
padding: 20px;
}
.auth-btn {
flex: 1;
text-align: center;
padding: 12px;
border: 1px solid #000;
text-decoration: none;
color: #000; /* Ensure default text color for login */
}
.signup-btn {
background: #000;
color: #fff;
}
This CSS uses flexbox to arrange the buttons neatly, gives them some padding, a border, and styles the "Sign Up" button with a black background and white text for contrast. You can obviously adjust these colors and sizes to match your brand!
Making Those Buttons Rounded (A Quick Follow-Up!)
Veluxe1 had a great follow-up question: "how to make the button shape to rounded rectangle?" Devcoder quickly jumped in with the perfect solution. If you want those sharp button corners softened, just add this little CSS gem to the same CSS file you've been using:.auth-btn {
border-radius: 12px;
}
This will give all elements with the .auth-btn class a nice 12px rounded corner. Again, adjust the pixel value to your liking!
Here’s what the final result might look like, as shared by Devcoder:
And here are the original images veluxe1 shared for comparison:
A Few Important Reminders When Customizing Code
Before you dive into editing your theme files, always, always duplicate your theme first! This creates a backup, so if anything goes wrong, you can easily revert to the previous version without any headaches. It’s a lifesaver, trust me. Also, remember that themes can vary. While these instructions are quite generic and should work for many modern Shopify themes (like Dawn or Horizon, as mentioned by veluxe1), the exact file names or CSS classes might be slightly different. If you can't findbase.css, look for other CSS files in your Assets folder. Similarly, if header-drawer.liquid isn't there, check for menu-drawer.liquid or something similar in your Sections folder.
The beauty of the Shopify community is how quickly members jump in to help each other out with practical, code-based solutions. As we saw with veluxe1's journey, a little bit of custom code can go a long way in refining your store's look and functionality, often giving you more control and better performance than relying solely on apps. Happy customizing!