EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
How to Add a Slider to Shopify Store FREE
![How to Add a Shopify Slider [FREE] - EComposer Visual Page Builder](http://ecomposer.io/cdn/shop/articles/2_ca18fe77-4d35-4b06-b960-94f3dcd23a6a_1100x.png?v=1689814379)
Table Of Contents
Customers always want to search for reviews, view products from every conceivable angle, and discover new offers and discounts before they even think to click the “Add to Cart” button.
However, that is not why businesses try to cram all the information without arrangement. This not only does not provide a good customer experience but also puts your website at risk of information overload and reduced loading speed. That's why the sliders come in handy, you can hit a conversion trigger without creating a long page filled with images and content.
In this blog, we will show How to add a slider to your Shopify store for FREE. Before going into the details, make sure you have built an eCommerce store on Shopify!
What is Shopify Slider?
A slider is a web page element that presents any type of information (images, videos, text...). The sliders show only one thing at a time and can be configured to move automatically or when prompted by user input.
It helps you add multiple images or text without page scroll. You can click on left-right arrows to navigate between multiple images/text in the slider. You will probably see a Slider on the homepage of most websites, so it is really important.
Why Should You Use a Shopify Slider?
* Slider shows attractive content
Slider condenses a lot of attractive information into a limited space. Consumers can only view compressed content when they find it useful during their browsing activity. You can compress content within a specified area.
* Slider captures the user's attention
From the moment they visit your homepage, customers will be attracted to your slider and they will click on it to view. As a result, Slider can help you improve visitor engagement, understanding, and retention.
* Slider increases user experience
Sliders give users greater power by allowing them to choose whether to focus on a slide's information. They help visitors focus on what matters and allow them to receive relevant information whenever they choose.
* Slider is a great shortcut
Once you've determined building a website for the long term, sliders will be an important part of what you should be using. This can provide customers with any content you want to share. When used properly, Sliders can also be used to take visitors from the homepage to other pages to see more of what you have to offer on your site.
[ecom-global-block]ecom-shopify-trial-block[/ecom-global-block]
* Slider makes the website more beautiful
Sliders have a beautiful aesthetic look. They are visually appealing and typically the first thing visitors notice when they arrive at a website. Because of this, they work well to maintain users' attention and make your website more enjoyable to view.
* Slider makes content easy to highlight
Sometimes, you want to highlight content or a very useful element, sliders are the ideal choice for you to showcase them to customers. You can use the slider feature to make a list of suggested blogs, a list of featured customer comments, etc...
* Slider is great for storytelling
Sliders are useful for product tours. You can offer multiple perspectives on the same product in an engaging and interesting way.
How to add a Slider in Shopify using coding method
Step 1: Sign up for your Shopify account
- If you don't already own a Shopify store, you need to sign up for Shopify (free) or claim Shopify $1 plan here
- Log in to your online store using your registered email and password.
Step 2: Duplicate your live theme
- From your Shopify admin, go to Online store and choose themes.
- Next to the live theme click on Actions and choose Duplicate.
This way you will have a backup of your live theme in case you miss some step and it has a negative impact on your store.
Step 3: Add a new section
- At the duplicate theme, click Actions and select Edit Code
- From the navigation to the left go to the Sections directory and choose Add a new section.
- Name it Feature-slider and paste the following code into the new file:
[ecom-global-block]ecom-blog-shopify-slider-free-block[/ecom-global-block]
Here is the carousel code:
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> {% comment %} * Make sure you have the Flickity plugin installed and the proper license for this to function on your store * Plugin, licensing and documentation at https://flickity.metafizzy.co/ {% endcomment %} {% assign collection_main = collections[section.settings.collection_main] %} {% assign collection_limit = section.settings.collection_limit %} {% assign cell_align = section.settings.cell_align %} {% assign wrap_around = section.settings.wrap_around %} {% assign img_width = section.settings.img_width | append: 'x' %} <div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}"> <div class="page-width"> <div> <p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p> </div> <div class="flickity-section__carousel carousel-{{section.id }} text-center" data-flickity='{ "cellAlign": "{{ cell_align }}", "pageDots": false, "freeScroll": true, "contain": true, "wrapAround": {{ wrap_around }} }'> {% for product in collection_main.products limit: collection_limit %} {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%} {% assign first_variant = product.selected_or_first_available_variant %} {% assign featured_img_src = first_variant.featured_img.src | default: product.featured_image.src %} {% assign price = first_variant.price %} {% assign compare_at_price = first_variant.compare_at_price %} <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px"> <a href="{{ product.url }}"> <img class="lazyload" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ product.featured_img.alt }}" /> </a> <a href="{{ product.url }}"> <h5>{{ product.title }}</h5> </a> {% if compare_at_price > price %} <s class="product__compare-at-price">{{ compare_at_price | money }}</s> <p class="product__product-price">{{ price | money }}</p> {% else %} <p class="product__product-price">{{ price | money }}</p> {% endif %} </div> {% endfor %} {% comment %} {% for block in section.blocks %} {% assign block_product = all_products[block.settings.featured_product] %} {% assign block_first_variant = block_product.selected_or_first_available_variant %} {% assign featured_img_src = block_first_variant.featured_img.src | default: block_product.featured_image.src %} {% assign price = block_first_variant.price %} {% assign compare_at_price = block_first_variant.compare_at_price %} <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px"> {% if block.settings.featured_product != blank %} <a href="{{ block_product.url }}"> <img class="lazyload" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ block_product.featured_img.alt }}" /> </a> {% else %} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} <a href="{{ block_product.url }}"> <h5>{{ block_product.title }}</h5> </a> {% if compare_at_price > price %} <s class="block-product__compare-at-price">{{ compare_at_price | money }}</s> <p class="block-product__product-price">{{ price | money }}</p> {% else %} <p class="block-product__product-price">{{ price | money }}</p> {% endif %} </div> {% endfor %} {% endcomment %} </div> </div> </div> {% schema %} { "name": "Collection Slider", "settings": [ { "type": "collection", "id": "collection_main", "label": "Choose a Collection" }, { "type": "range", "id": "collection_limit", "min": 2, "max": 50, "step": 1, "unit": ".", "label": "How many products to show", "default": 4 }, { "type": "color", "id": "bg", "label": "Background Color" }, { "type": "text", "id": "title", "label": "Title", "default": "Featured Collection Slider" }, { "type": "range", "id": "img_width", "min": 200, "max": 600, "step": 5, "unit": "px", "label": "Image Width", "default": 200 }, { "type": "select", "id": "cell_align", "label": "Slide Alignment", "options": [ { "value": "center", "label": "Center" }, { "value": "left", "label": "Left" } ], "default": "center" }, { "type": "range", "id": "title_mb", "min": 30, "max": 120, "step": 1, "unit": "px", "label": "Title Margin Bottom", "default": 48 }, { "type": "select", "id": "cell_width", "label": "Choose number of slides to show on start", "options": [ { "value": "25%", "label": "Four" }, { "value": "20%", "label": "Five" }, { "value": "16.6666667%", "label": "Six" }, { "value": "12.5%", "label": "Eight" } ], "default": "25%" }, { "type": "radio", "id": "wrap_around", "label": "Enable Wrap Around (endless scrolling)", "options": [ { "value": "true", "label": "True" }, { "value": "false", "label": "False" } ], "default": "true" }, { "type": "range", "id": "mr", "min": 0, "max": 48, "step": 1, "unit": "px", "label": "Cell Margin Right", "default": 16, "info": "Save page to see changes." } ], "presets": [ { "name": "Collection Slider", "category": "Slider" } ] } {% endschema %} |
Step 4: Add Slider theme snippet
- From the Layout directory choose theme.liquid.
- Paste the following code inside the HTML tag.
| <script src=“https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js”></script>
<link rel=“stylesheet” href=“https://unpkg.com/flickity@2/dist/flickity.min.css”> |
Step 5: Save your Slider
- Save all your edits before you finish creating sliders.
- Go back to your Shopify admin and live the duplicate theme by clicking Publish.
Create Shopify Slider for FREE and without coding
EComposer - Landing Page Builder is known as a next-generation Shopify application that allows users to build professional online stores without coding knowledge. It provides a lot of templates and elements to help you build all kinds of pages, including pages not available in Shopify.
Also, EComposer has a live drag-and-drop editor to make editing your website even simpler. And if you want to mix different templates/sections, just copy and page everything. In addition, EComposer also has a very professional and enthusiastic 24/7 support team, at any time of the day, when you have questions, just contact them via chat box, and you will receive get the answer immediately
Slider is an outstanding element of EComposer that helps you create. You can add everything to the slider like text, images or buttons… and you can design each slider a style. In addition, you can also make the entire background image of the slider clickable (this is a very useful function).
Follow the steps below to create the right Slider for you:
Step 1: Install and open EComposer - Landing Page Builder
- In the Shopify App Store, search EComposer Landing Page Builder then click Add App
- To activate the use of the app, Install the app to your Shopify store.
- In the Dashboard menu, go to Apps, click EComposer Landing Page Builder.
Step 2: Start building Shopify Slider
- Click Start Building in the right corner of the dashboard and select a page where you want to place Shopify Slider.
- Choose any EComposer template you want by clicking Select a template or create your own by clicking Setup page info. Then, select Start Building.
- In EComposer's editor, go to Elements, select Basic, and look for Slider.
Step 3: Customize Shopify Slider
Now use EComposer's live drag and drop to drag the Slider anywhere you want. Then start customizing Shopify Slider to your liking.
The Content section is divided into three tabs: Slides; Slider settings and Animation.
- Slides: You can add new slides, duplicate (clone), remove or move slides as you like.
- Slider settings: In this tab, there are many options to configure your slider, the option names are easy to understand so you don't need to worry about them.
- Animation: Here you can set the animation for the content block in the slider that will appear when the slide advance to the next one.
In the Design section you can customize Slide animation, Background, Border, Border Radius, and Spacing of the Slider at your disposal. In addition, here you can also design the slider's navigation.
Finally, in the Advanced section, you can customize everything related to visible settings like code, background, animation, and so on.
Step 4: Save and publish
Once you are satisfied with your customization, in the right corner of the edit page you have options to save and publish.
In a nutshell
Sliders are very versatile and can be one of the most effective ways to showcase your message or product as they will capture the attention of your viewers.
We hope this blog will help you create the right Carousel Sliders for Shopify store. If you want more information or want to learn more about EComposer, follow us at ecomposer.io or click on the message icon located in the right corner of the screen.
=================
Add EComposer Next generation page builder Here
Follow Us on Facebook
Join Official Community
0 comments