Optimizing Your Shopify Mobile Menu: Smaller Fonts & Login/Sign Up Buttons with Custom Code

View original discussion by veluxe1 on Shopify Community →
Hey there, fellow store owners! As a Shopify expert, I spend a lot of time digging through the community forums. Recently, I was following a fantastic discussion that really highlighted how powerful a little custom code can be for improving your store's mobile experience. The original post by `veluxe1` was all about tweaking the mobile menu drawer – specifically, making the font size smaller and adding some handy Login and Sign Up buttons. The good news? The community came through with brilliant, app-free solutions! Your mobile menu drawer is a critical touchpoint. If it's clunky or missing key elements, you could be losing sales. `veluxe1`'s goal was spot-on: optimize for readability and user convenience. A smaller font makes a busy menu less overwhelming, and direct login/signup access streamlines the customer journey. The Shopify community is amazing at pitching in. Experts like `markjohn1`, `WebsiteDeveloper`, `suyash1`, `Moeed`, and especially `devcoders` jumped in to help `veluxe1` (who was using the Horizon theme, but these principles apply broadly!). They broke down exactly how to achieve these customizations without needing an extra app.

Part 1: Shrinking Those Mobile Menu Fonts

Let's tackle that font size. CSS is your friend here for this visual change, living in your theme's stylesheet.
  1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes.
  2. Edit Code: Find your current theme, click Actions, then select Edit Code.
  3. Locate Your CSS File: In the Assets folder, look for base.css (a common spot for general styling).
  4. Add the CSS: Scroll to the very bottom and paste this. This media query ensures changes only apply on smaller screens (under 749px).
    @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;
  }
}
  5. Save Your Changes: Click Save.

Feel free to adjust the font-size values (e.g., 12px or 10px) to get your desired look. The !important flag helps override existing theme styles.

Part 2: Adding Essential Login & Sign Up Buttons

Next, adding those crucial login and signup buttons. This involves a bit of Liquid for the HTML structure and then some CSS for styling.

Step A: Adding the HTML Structure

You'll need to locate the Liquid file responsible for your mobile menu drawer. Common names are header-drawer.liquid or menu-drawer.liquid, usually found in the Sections folder.
  1. Locate the Drawer File: In your theme code editor, navigate to the Sections folder and open header-drawer.liquid or menu-drawer.liquid (or a similar file).
  2. Paste the HTML (Liquid): Scroll towards the bottom of the file, just before the closing
tag of the main drawer content, and paste this code. It intelligently displays "My Account" if a customer is logged in, or "Login" and "Sign Up" if they're not.
  • Save Your Changes: Click Save.

    • Step B: Styling Your New Buttons

    Now, let's make them look good! We'll add CSS to the same base.css file.
    1. Revisit Your CSS File: Go back to Assets/base.css.
    2. Add Button Styling CSS: Paste this code at the very bottom, after your font size adjustments.
      .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;
}

.signup-btn {
  background: #000;
  color: #fff;
}
    3. Save Your Changes: Click Save.

    This CSS uses Flexbox for side-by-side buttons, adds padding, a border, and styles the "Sign Up" button.

    Here's a visual of what `devcoders` shared, showing how these buttons can look:

    image

    Step C: Making Those Buttons Nicely Rounded

    `veluxe1` had a great follow-up: how to make those sharp button edges a bit softer? Another quick CSS tweak!
    1. Revisit Your CSS File: Head back to Assets/base.css.
    2. Add Border Radius: Find the .auth-btn CSS block you just added and insert border-radius: 12px; within it. If adding separately, ensure it's at the bottom of base.css.
      .auth-btn {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1px solid #000;
  text-decoration: none;
  border-radius: 12px; /* Add this line! */
}
    3. Save Your Changes: Click Save.

    Adjust the 12px value for more or less rounding.

    See? That wasn't so bad! With a little guidance from the community and some direct access to your theme's code, you can achieve really impactful customizations for your Shopify store without relying on extra apps. Always remember to make a backup of your theme before any code changes, and test thoroughly on different mobile devices. These small but thoughtful improvements to your mobile UX can make a big difference in how customers interact with your brand. Keep an eye on those forums – you never know what brilliant solutions you'll find next!
    Share:

    Start with the tools

    Explore migration tools

    See options, compare methods, and pick the path that fits your store.

    Explore migration tools