Add Slider Revolution to a Shopify website

1. Build your slider with the Slider Revolution Visual Editor, and export the slider for HTML usage.

2. Open "css/settings.css" from the exported slider zip, and do a search/replace for the following CSS using your favorite text editor.

3. Upload the Slider's assets to your Shopify website

Upload each of the following from your slider's exported zip:

  • assets/(all files)
  • css/settings.css
  • js/jquery.themepunch.revolution.min.js
  • js/
  • js/extensions/(all files)
  • fonts/revicons/(all files)

4. From your theme's main layout file, add the following to the "head" section of the document.

  • Important Note:
    Only include the jQuery script (#4) if your theme does not already include it.

5. From your theme's main layout file, add the following code directly above the document's closing "body" tag.

7. Create a new "Section" named "slider-revolution"

8. Remove the default code from the new section, and then add the following:

9. From the exported slider zip, open "slider.html" inside your favorite text editor.

10. Copy the inline CSS styles for the slider's Navigation and Layers into your newly created "slider-revolution" theme-section.

11. Edit your slider's image and video urls using the following conversion format:

Change every image/video url from this:

to this:

12. Add the following data attributes to the slider's "rev_slider_wrapper" div

Change this:

to this:

13. Add the slider's HTML and inline JavaScript to the newly created "slider-revolution" theme-section.

14. Change the inline JavaScript to the following

Top Section

Change this:

to this:

Bottom Section

Change this:

to this:

15. From your theme's front-page editor, choose "Add section" and then "Slider Revolution" from the image category, and then "Save".

16. Finally, move your newly added Slider Revolution section to the top of the page.