Show mobile banner & slideshow’s text on top of image [all free themes]
Within the Shopify's realm, you typically find two approaches when it comes to mobile Slideshows: showing it on top of the image or showing it below the image. For the past few years, Shopify has chosen to go via the latter route: even the first Shopify themes like Debut and Minimal would always display the Slideshow's banner below the images on mobile devices.
To the amuse of some and the disappointment of others, the same approach has persisted in the latest batch of themes with the Dawn series.
However, worry not since this is a fairly simple fix. In today's tutorial I'll show you how you can show slideshow's banner on top of the image.
Step 1: adding the code
-
From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code > image-banner.liquid
-
Press CTRL + F (or command + F on mac) to trigger the search box and type in:
schema
-
Paste the following code above the line you found:
gist
-
Now, trigger the search box again and search for the following (quotes included):
"settings"
-
Paste this code below the line you found:
gist
-
Great! Now save the file and click on the 3 dots on the upper left > customize page.
Step 2: setting it up on the customize page
-
Add a banner image section to your theme and click on it.
-
Now just edit the options as per your preference and you are all set!
Conclusion
Displaying the slideshow's banner on top of the image is arguably the most preferred choice when designing a Shopify website for mobile devices. It tends to be more visually appealing, makes more effective use of screen space, and depending on the product being showcased the user experience can also be improved.
Ultimately, the goal of any website design is to communicate key information effectively and to provide a positive user experience, therefore displaying the banner on top of the image can be one of the steps towards that direction.