How to add more than 4 sliders

In this article:

Introduction
Editing file config > settings_schema.json
Editing file config > settings_data.json
Editing file snippets > slider.liquid
Adjust slider size

⚠️ Kindly take note :
The recommended size for desktop slider is 1400 x 700px
Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
We have added an option for you to display image with original quality. Therefore, your store will be using the image with original size and format.
You can enabled it at Channels > Online Store > Customize > General

1. Introduction

This is a guide for you to have more sliders for online store. No coding knowledge needed. Simply follow the steps below to add more sliders.

Benefits:
Able to highlight more products
Able to provide more information
Increase sales

2. Editing file config > settings_schema.json

2.1 Go to EasyStore Admin > Channels > Online Store > Edit Source > config > settings_schema.json ( last file in the left sidebar )



2.2 Look for < "label": "Social media" > ( around row 740 - 745 ) and find the square bracket < ] > before it.



2.3 Add < , "number" : 10 > behind the square bracket. This will increase your number of sliders to 10.



2.4 Click 'Save' button on the top right.

3. Editing file config > settings_data.json

3.1 Go to config > settings_data.json.

3.2 Find < "slide_4_alt": "", >.



3.3 Paste codes below after it.

"slide_(number)": "",
"slide_(number)_jpg": "",
"slide_(number)_link": "",
"slide_(number)_alt": "",

Note: Change the (number) to 5,6,7,8,9,10 as shown below.



3.4 Click the 'Save' button once again.

4. Editing file snippets > slider.liquid

4.1 Navigate to snippets > slider.liquid

4.2 Change the number < 4 > to < 10 > as shown below.



4.3 Click the 'Save'.

4.4 Now you can upload up to 10 sliders.

5. Adjust slider size

Step 1 : Click into Channels > Online Store > Edit Source > theme.scss

Step 2 : Add this code at the bottom of theme.scss file & you can change the max-width according to your preferences

💡 Tips : 1000px is full width

.flexslider {
max-width: 1000px;
margin: 0 auto;
}

Step 3 : Save

Updated on: 24/09/2022