How To Add An Image To Shopify Mobile Navigation

Everyone aims to make their Shopify store stand out, and since much of today’s web traffic is from mobile devices, a nice feature is adding a small image next to a button in the mobile navigation panel.

To achieve this, create a block type for the Header section with two fields: an image picker to upload your desired image and a text or URL field to associate the image with a specific button. Then, add this block and fill out the fields in the Customizer.

After this setup, you’ll want the image to appear for customers. In the section’s Liquid code, locate where the relevant button (e.g., “Shop”) displays. Loop through the Header blocks to find which contains the image meant for that button. If you used a text field, match its content to the button label. If you used a URL field, show the image on the button sharing that URL.

Small details like this image can make a big impact and give you an edge over competitors when combined with other unique features.