Six tips to optimize your Brand Store for mobile
Consumers are spending more and more time on their mobile devices, fueling growth in mobile retail. Mobile has changed the way people shop—in 2021, 69% of all Brand Store visits were made from a mobile device.1
With such a large number of shoppers using mobile devices to access your Brand Store, it makes sense to prioritize a mobile-friendly design.
We know that with the myriad of screen sizes, resolutions, device types, and browsers, designing for both mobile and desktop customers is complex and constantly evolving. To get you started, we're sharing 6 tips from the Brand Stores design team that will help you optimize your Store for mobile shoppers.
Take advantage of the Store Builder mobile-first update
You can now easily create a mobile or desktop view of your Store, and a version of your Store will automatically get created for the other device. When building your Store, you can switch between device views to see the progress of your design in real time and add assets that are optimized for each device.
Why is the Store Builder mobile-first update important?
Up until now, you could only create your Store in a desktop view in Store Builder and view the mobile version in preview, making it challenging to optimize Store pages for mobile. This change now allows you to create a mobile-optimized Store experience for shoppers as you build or update your Store.
Due to the screen size difference between a desktop monitor and a phone screen, sometimes a tile design is legible on desktop but not on mobile. Although Stores will automatically adjust images for different screen sizes, this doesn’t mean every element will be legible on mobile—especially if the text looks small on desktop to begin with.
In these cases, we recommend uploading a separate image for mobile that’s optimized in terms of font size and layout. This can be done by toggling the mobile version and uploading the mobile image on the right panel of the Store Builder, as shown in the examples below:
It's important to consider that the option to upload a separate mobile image is only available for image tiles and the header image. This option is not available for other widgets using images with text or shoppable images.
Test on a mobile device
As mentioned before, it’s now easier to visualize how your Store will look on a mobile device with the Store Builder’s mobile-first update. However, testing your Store on an actual mobile device remains the most effective way for you to discover errors that can affect your shoppers’ experience. The best way to make the right adjustments is by discovering for yourself what type of customer experience your Store provides on mobile. Step away from your desktop/laptop computer and access your Store on a phone or tablet. Tap through pages and tiles. Is your Store easy to navigate? Are the texts and graphics easy to read?
To test out your Stores experience:
- Click Preview > Share Preview in Store builder.
- Copy the preview link
- Paste this preview link in an email or anywhere where you can access from your phone (Tip: Include the preview link’s password on a separate line so it’s easier to copy and insert it later on).
- Navigate through your Store on your mobile device as if you were a shopper, and take notes on what needs to be improved. Is it easy to navigate? Can you find the products or information that you’re looking for? How do your images look on a mobile device?
Make sure content appears in the right order
Mobile screens are narrower and designed for faster scrolling, which means that the order and layout of content is not exactly the same as on desktop and mobile. Mobile Stores use a left-to-right row prioritization for the order of content, or right-to-left in the case when Arabic is set as the language of preference. See below for an example:
Check your Store on a mobile device to confirm that content is appearing in the desired order.
Optimize your header image
Thanks to the Store Builder’s mobile-first update, it’s now possible to upload a separate header image for mobile. However, it’s important to consider that unlike an image tile, it’s not possible to change the height of this image, and the same dimensions must be used for both mobile and desktop. This means that the dynamic resizing of the Store for mobile will shrink all graphic elements within the header, including text.
Because of this, please keep in mind the following for the mobile header image:
- Try limiting the number of products on a header to three. The more products you use in the header, the more cluttered it will look on mobile.
- The copy in the header should be less than 30 characters so you can increase the size of the text to be legible on mobile without overwhelming the header. For this we recommend a minimum font size of 90pt Arial regular font or equivalent.
Choose an effective call to action (CTA) placement
As a reader, how do you typically read? You might read top to bottom, scanning left to right or right to left depending on your native language. Keeping this flow in mind can help you choose an effective placement for your CTA button on mobile.
Consider the importance of above-the-fold elements, which are the parts of the Store page that are viewable before scrolling down. If a CTA is placed at the bottom of a vertical tile, it is unlikely to appear above the fold, making it less visible to customers.
CTAs on mobile should also have decent spacing around them, or “breathing room,” so it's easy for customers to find and click on it. Having limited space for a CTA can cause it to merge with its surroundings and lose hierarchy and visibility.
Provide alternatives to menu navigation
The navigation menu on a Store appears differently on desktop than on mobile. On desktop, shoppers see multiple tabs along the navigation bar. On mobile, shoppers see a single drop-down menu. See the images below for a comparison:
This is an important factor to consider when it comes to highlighting your top categories or tabs on a Store. Putting those top pages in the menu is one good strategy, but you can also use image or text tiles to create an additional way to navigate your Store. Adding these tiles at the top of your Store, along with a strong CTA, ensures shoppers can find your most important content even if they don’t expand the drop-down menu.
1 Amazon internal data, WW, 2021.