How Do I Add an SVG Icon Above the Navbar in the Dawn Theme?

Store Design
, ,
1

Hey there! Quick question for the Shopify Dawn Theme experts out there: How can I add a catchy SVG icon above the navbar of my Dawn theme? I’m aiming for that extra touch of style and branding. Plus, I want the icon to seamlessly transition to the left side of the navbar in responsive mode, snugly tucked within the mobile menu drawer. Any tips or tricks for achieving this sleek customization?

I’ve got a specific design vision for my Shopify store’s navigation: three distinct collections - shirts, caps, and bottoms - each with its own unique icon placed elegantly above the respective navbar button. Picture it: a sleek shirt icon hovering above the ‘Shirts’ button, a stylish cap icon adorning the ‘Caps’ button, and a chic bottoms icon topping off the ‘Bottoms’ button. How can I achieve this tailored icon placement to enhance the visual appeal and user experience of my store?"

2

Hello @asad313

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file header.liquid

Step 3: Use the SVG icon where you want. However, note that this is just a step to display the SVG icon. If you want to add functionality, you need to add more code.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly