How to Create a Full Width Mobile Friendly Slider Section in Shopify (With Image Size Guide)
Is your Shopify store lacking in aesthetic appeal and needs updating? A great method to capture the attention of your visitors is by featuring a full-width slider banner on your homepage. This tutorial will teach you how to create a responsive slider that is both responsive and mobile-friendly on Shopify, regardless of your design proficiency. Additionally, I will provide the ideal image sizes for both desktop and mobile screens to ensure that your slider appear perfect on all devices.
Requirements:
Before we dive in, make sure you have the following ready:
- An Active Shopify Store
If you don’t have one yet, head over to shopify.com to sign up and create your store. - A Premium Shopify Theme
For this tutorial, I’ll be using the Refine Optics Premium Shopify Theme. You can purchase it here:
https://www.rsdigitals.com/shop/shopify-store-themes/refine-optics-multi-purpose-premium-shopify-theme/ - Slider Images with the Correct Dimensions
I’ll also show you how to easily design professional-looking banner images using Canva, with the perfect dimensions for both desktop and mobile views.
Now that we have everything we need, let’s start building your full-width slider banner for Shopify one that not only looks great on desktop but is fully optimized for mobile too.
Step 1: First Step: Get banners for your website slider
In this tutorial, we will be using Canva to design banners for the full-width slider on your Shopify website. To get started, go to canva.com. Once you’re on the Canva dashboard, click on the “Create a design” button located at the top left corner of the screen. Please refer to the screenshot below for visual guidance:
After clicking the “Create a design” button, a popup will appear. In the popup, click on the “Custom size” option. Again, refer to the screenshot below for guidance:
Now, in the custom size section, set the width to 1920 px and the height to 850 px. This size is ideal for desktop banner sliders. Once you’ve entered the dimensions, click the “Create new design” button to open the Canva editor. Please check the screenshot below for visual guidance:
Once you’re in the Canva editor, let’s assume you have a sunglasses store and want to create a banner related to sunglasses. You can start by clicking on the “Elements” tab on the left side of the editor, then search for “sunglasses.” Choose any image you like for example, an image of a woman wearing sunglasses and drag it into your design. Resize the image so that it fills the entire canvas, creating a clean and modern full width banner.
Please check the screenshot below for visual guidance:
Now, similarly, you can create as many banners as you like for the desktop view. But when it comes to designing banners specifically for mobile devices, make sure to use the following size: width: 500 px and height: 550 px. This is the recommended size for mobile sliders and works best across most smartphone screen sizes.
Please check the below screenshot for visual guidance:
Now, I’ll be designing two banners for the desktop and two banners for mobile to make the store slider function properly. However, you’re not limited to just two banners you can add as many as you’d like depending on your store’s design and promotion strategy.
Step Two: Setting up the Slider Section on Shopify Using the Refine Optics Theme
As mentioned earlier, in this specific tutorial, we’ll be using the Refine Optics Premium Shopify Theme. If you already have this theme uploaded on your store, you’re good to go. If not, you can purchase it using the link below:
https://www.rsdigitals.com/shop/shopify-store-themes/refine-optics-multi-purpose-premium-shopify-theme/
Alright! Now let’s move on to setting up the slider. To do that, you’ll first need to open the theme customizer. You can do this by opening your Shopify dashboard, selecting Online Store, and clicking the Customize button to launch the theme editor.
Please refer to the screenshot below for visual guidance:
You will be redirected to the theme customizer right after clicking the Customize button. Once you’re in the customizer, simply click on the “Add Section” button on the left side of the screen. In the search bar that appears, type “Responsive Slider”.
When the “Responsive Slider” option appears, click on it to add the slider section to your Shopify store.
Refer to the screenshot below for visual guidance:
In the Responsive Slider section settings, you will find several customization options. If you want to create a full-width slider, I recommend using the following settings:
- Slider Height: Set this to “Adapt to Image” This will automatically adjust the height of the slider based on the image size, ensuring your banner displays in full without cropping.
- Slides to Show: Select “1 Slide” While there are other layout options available, we are creating a full-width slider, so setting it to one slide ensures each banner covers the entire width of the screen.
- Autoplay: You can enable this option if you’d like the slider to transition through the banners automatically. I’ve enabled it in this tutorial.
- Autoplay Duration (in seconds): Here, you can set the duration for how long each banner stays on the screen. For example, if you set it to 5 seconds, each slide will display for 5 seconds before automatically switching to the next one.
- Show Arrows: Enable this if you want to add navigation arrows on the left and right of the slider. This is helpful for users who want to manually move between slides.
- Show Dots: This option allows you to display navigation dots below the slider. If you prefer this style, you can enable it. However, in this tutorial, I’ve disabled the dots and kept the arrows for a cleaner, more classic look.
Refer to the screenshot below for visual guidance:
Alright, now let’s move on to customizing the slides for this slider. To do this, simply click on the Slide block under the Responsive Slider section.
Check the screenshot below for visual guidance:
In the Slide block settings, the first two options allow you to upload images for both desktop and mobile. Simply click on the Select button to upload the images you created for the slider.
Please check the screenshot below for visual guidance:
As you can see in the screenshot below, I have added two separate images for the first slider block. The first image is for desktop, with a size of 1920px by 850px, and the second image is for mobile, with a size of 500px by 550px.
Alright, now that we’ve uploaded the images, let’s move on to adding text and a button to the slide block. Just below the image upload options, you’ll see the following settings:
- Heading: This is where you can add the main headline for your slide block.
- Heading Size: You can choose the size of the heading text. In my case, I selected Medium because it looks visually balanced, but you can choose whichever size works best for your design.
- Paragraph: Here, you can add a short subheading or supporting text that appears just below the main heading. Try to keep it as concise as possible for a clean look.
- Button Link: This is where you can choose which page visitors will be redirected to when they click the button on the slide. In my case, I selected “All Products” because I want visitors to view all available products when they click the button.
- Button Text: You can enter the text that will appear on the button. I used “Shop Now”, but you can enter any call to action that fits your store’s style.
Please check the screenshot below for visual guidance:
As you can see, working with the Refine Optics theme’s responsive slider is incredibly easy. Now, let’s talk about the next set of options available in the slide block.
Right below the Button Text option, you’ll find settings to customize the colors including the heading color, paragraph color, button text color, and button background color for the normal state. You’ll also have options to set the button text color and background color for the hover state. These options are straightforward and easy to understand.
Check the below screenshot for visual guidance:
But one of the most important settings here is the “Text Background Opacity (Mobile)” option. This feature is especially useful when the slider text isn’t clearly visible on mobile devices. You can enable a background overlay behind the text to improve readability. If you don’t want this overlay to appear, simply set the opacity to “0”.
Please check the screenshot below for visual guidance:
The last two options in the slide block are as follows:
- Text Alignment: This setting allows you to align the text to the left, center, or right. In our case, I selected Center for a balanced look.
- Text Position: This option lets you position the text within the slide. The available positions are: Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, and Bottom Right. For this tutorial, I selected Middle Center to keep both the text and button perfectly centered on the slide.
Check the screenshot below for visual guidance:
Your mobile-friendly slider banner is now completely set up in full width using the Refine Optics Shopify theme. You have created a slider that not only appears visually appealing but also provides a seamless and responsive experience on all devices by uploading images of the correct size for both desktop and mobile and adjusting the text, buttons, and layout settings. In this guide, we made only a single slide, but you can repeat the same process to create however many slides you require for your store.
Conclusion
Making a full-width slider in Shopify that looks good and works well on mobile devices can be simple. Utilizing appropriate tools, an excellent theme such as Refine Optics, and properly sized banner images can improve the initial impression of your store and increase user interaction. I trust that this tutorial clarified the steps and made them easy to understand. You can contact us or leave a comment below if you have questions or need assistance with creating your own banners. Wishing you joy in your design journey!