How To Create A Series Of Banners As Sliders On Your Shopify store Using Banner Slider App
Do you want to impress your customers with lively eye-catching images right on your e-store? “SmartBN: Banner Slider” is a great app that allows uploading, customizing, and showing a series of banners as sliders. The app supports 40+ sliders: Simple Fade Slideshow, Image Gallery, Banner Rotator, Banner Slider, Carousel Slider, Image Gallery with Vertical Thumbnail, Image Slider, Image Slider 2, List Slider, Thumbnail Navigator With Arrows, Scrolling Logo,…
The app provides friendly back-end management that helps you to create, edit and remove sliders and banners easily. You can preview sliders before deciding to show them on the front-end. So how to install it and how does it work? Let’s follow this article.
First, choose SmartBN: Banner Slider and click Install as shown below or click the link above.
After successful installation, you proceed to install the application. Open Sliders from the right menu, then click Add Slider.
First, in the Slider info section, you should add the name. Then adjust the height and the width. Select full width if you’d like the slider to show full screen. Next, click Slider Mode where you can see many slider types to choose from. After choosing the desired slider, click Save Slider, then click Next.
Next, let’s upload images as sliders. Start by clicking Add Image. You are required to enter a name. You can also add a title and description. Images can be selected locally or using a URL. Multiple images can be uploaded at once using Bulk Upload. Click Next to preview the slider.
Click Next, one important step here is to insert the embedded code from step 1 into the liquid files. In order to boost the slider speed, please copy and insert the code found in step 2 at the end of the theme.liquid file, in front of the closing tag </body>.
Step 1: Insert Embedded Code shop theme:
You can show the Slider at frontend by adding this embedded code:
1 | [scmBannerSlider-20569] |
or this code:
1 | <div data="scmBannerSlider" data-id="20569" style="display: none;"></div> |
Into liquid files, pages, or products, collection descriptions. The second code should be inserted in HTML mode
Example for Liquid file: If you want to show the Slider on the home page, please go to Themes > Edit HTML/CSS then Edit the file index.liquid and paste the code (you can paste into anywhere you want to display the slider).
1 | <div data="scmBannerSlider" data-id="20569" style="display: none;"></div> |
Example for Pages: Please go to Pages > Edit the page you want to show the slider then paste the code
1 | [scmBannerSlider-20569] |
Step 2: Insert Script Code to shop theme
Add the following code to the end of the theme.liquid before the body close tag </body> like the screenshots below. This code will make Banners Slider load faster on your shop.
1 | <span class="pun">{%</span><span class="pln"> include </span><span class="str">'scm-bannerslider'</span><span class="pln"> </span><span class="pun">%}</span> |
After copying the code, click next, click Publish to shop. Then Finish.
I hope with the application, your store will be impressed.
