Shopify Instagram Story Section with Video Tutorial

Hey friends! Just created a new section based on my previous IG Story Style Section. This time I included a video pop up. We are going to use SwiperJS for the slider.

Step 1

Navigate to your theme code. Select the "theme.liquid" file. Add the following code snippets before the closing tag of the head of the document: </head>

This installs all of the necessary files for SwiperJS.

See the Pen Swiper JS by roysaucedo (@roysaucedo) on CodePen.

Step 2

Next you're going to create a new section file in your theme. Go to the section folder and click new section.

You can name it whatever you'd like.

Step 3

🚨 Disclaimer: Some Shopify themes may have existing code that messes with the functionality of this section. If that is the case, don't worry. 😮‍💨 Feel free to reach out and ask me any questions. Most times it's a simple fix.

In the new file you created, replace the code with the following code snippet:

See the Pen IG Story Style Section With Video by roysaucedo (@roysaucedo) on CodePen.