How to add a jQuery carousel to a Shopify website using a third-party web hosting

Shopify is an e-commerce platform that enables individuals and businesses to create online stores. This tutorial will guide you how to add a jQuery carousel created with Amazing Carousel to your Shopify website.

Since Shopify does not allow uploading your own JavaScript files, the carousel files must be uploaded to a third-party web hosting.

This tutorial will show you how to upload the carousel files to a third-party web hosting then add the HTML code to your Shopify page to embed the carousel.

Step 1 – Setup a third-party web hosting and create a folder for the carousel

Since Shopify does not support uploading your own JavaScript files, you need to upload the generated carousel files to a third-party web server. Basically, any commercial web hosting will do the job.

In this tutorial, I created a folder “jquerycarousel” on our web server https://amazingcarousel.com and I will upload the carousel files to this folder in step 3.

Step 2 – Create a jQuery carousel with Amazing Carousel

In Amazing Carousel, step 3 Publish dialog, empty the text input box “Save images files to folder” and “Save js files to folder”, add the folder URL that you created in above step to the “Add absolute URL” box, then publish the carousel to a local folder.

Step 3 – Upload the carousel files to the third-party web server

Upload all of the generated carousel files to your web server, the folder you created for the carousel. After uploading, you can visit the carousel.html file and test the carousel.

For this tutorial, you can test the carousel I have uploaded to our web server: https://amazingcarousel.com/jquerycarousel/carousel.html

Step 4 – Add the carousel body section HTML code to your Shopify page

Open the generated carousel.html file with a text editor. If you are using a Mac computer, the system built-in app TextEdit is not a pure text editor and it does not work. You could try to use Sublime Text or Atom.

In Shopify, goto your page editor, click the button “Show editor”, then copy the body section code to where you want to display the carousel.

Step 5 – Add the carousel head section HTML code to your Shopify theme

In your Shopify dashboard, click Themes on the left menu, then click “Customize theme”, then click the theme name on the top left of the screen, in the drop down menu, choose Edit code.

In the theme file list, you can find the file theme.liquid, click and edit it.

In the file theme.liquid, find the head closing tag </head>, add the carousel head section code just before the head closing tag </head>.

When copying the carousel code, there are two changes that you need to make:

1. Do not copy the first jquery.js line.

2. Add defer=”defer” to the amazingcarousel.js line and the initcarousel-1.js line, as in the following screenshot.