In this article:

  1. Introduction

  2. Uploading / changing slider image

  3. 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

Use the sliding banner to display images of your brand or latest promotions. Insert the links to redirect your visitors to the related page.

  • Users love stunning imagery, and this save up the time scroll down through a gallery.

  • SEO – When a user stays on your site longer (by viewing all the slideshow), this indicates to search engines that the site is engaging. Therefore, a slider may help boost your SEO.

  • Call to Action (CTA) – A Slider provides multiple CTA above the fold (meaning the user doesn’t have to scroll down to see it).



2. Uploading / changing slider image

Step 1 : EasyStore Admin > Channels > Online Store > Customize > Slider Content

Step 2 : You can amend the options below at Slider Settings (New Themes) according to your preference (optional).

Step 3 : Hover your mouse over the image and click to upload or change your slider image.

Step 4 : Insert Link and Alt text (optional).

  • Link - customers will be brought to this page by clicking on the slider image

  • Alt text (Old Themes) - alternative text is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell Web site viewers the nature or contents of an image. In case the image is not showing up, the text will be shown.

Step 5 : Continue with the remaining slides.

Step 6 : Save and you're all done!

💡 Tips: The following themes will show full page width sliders

3. 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

Related links:
How to add more than 4 sliders
Add content in between sliders and featured products
Show payment method icons at footer

Show full slider in mobile view for Fall and Maker theme

Did this answer your question?