The vast majority of the themes available on Shopify come, by default, with a slideshow section built in. Usually they do their job very well, offering a simple yet effective way to showcase products and promotions, which, fundamentally, is what any business need.

However, not all is a bed of roses: it is not rare to hear complaints about slideshows cutting off images on mobile, the text being right on top of the focal point of the image (and not being able to simply adjust it), or, really, just things looking off in general.

The image either going too much to one of the sides, the text covering up the model's face or just some technical aspect beyond the user's control quick transforms simple into complex.

Bearing this issue in mind, we have created a premium slideshow section that solves all of those issues. It is a section just like any other, so you can move it around, hide it and customize to your liking: it actually comes with 50+ customization options out of the box, with even more features being added all the time. Plus it works on any theme and it just takes a few seconds to install.

Here's a live demo of this section working: live demo (please click here).

Making a copy of your current theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Downloading the slideshow code file

To download the slideshow code & read all of its features, please click here. (live preview)

Step 1: opening the code editor

1. From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Inside the .zip you downloaded you'll find the following file: ezfy-slideshow.txt. Please open it.

Step 2: installing the section in your theme

1. Under the folder sections, on the left side of your code editor, click on “Add a new section”.
2. Type exactly ezfy-slideshow and click on the green button “Create section”.
   
   
3. Inside this new file that you created, delete everything. Make sure it's blank and please don't save just yet.
   
   
4. Now that the file is empty, paste all the code from the file that you have downloaded on step 1, ezfy-slideshow.txt, and click on save.
   
   
5. Perfect! Now let's add this section to your website.

Step 3: adding code for the “customize” page

1. Search for the file named theme.liquid. Make sure it reads exactly “theme.liquid”. It's inside the “Layout” folder.
   
2. Copy the code from the file you downloaded named “theme.liquid.txt“.
3. Do not delete anything in this file, just scroll down and paste the code at the very bottom:
   
   

Step 4: adding the section to your website

1. At the top of your code editor, click on the button “Customize theme”.
   
2. On the left side, scroll all the way down until you find the button “Add section”. Click on it.
   
   
3. On the new dropdown that appeared, search for Ezfy Slideshow (PRO). You may need to click on “show more” to see all sections available.
   
   
   
   
4. That is it!

Questions, issues or concerns? Please reach out to us at ezfycode@gmail.com, we'll take care of it!