How To Create An Instagram Story-like Section On Shopify

How To Create An Instagram Story-like Section On Shopify

As I was being attacked by FB/IG ads over the holidays, there was one brand that caught my eye. It’s called Homesick. Homesick makes candles that remind you of different places around the world. I could see this really hitting hard over the holidays.

 

If you know me, I love a good short and sweet side project. When I saw their cool IG story-like collection section, I knew exactly what I had to do next…try to build it on my day off from work.

 

Why are you so Homesick?!

🚨 I’m sure there are better ways to build this. This is my first go at it. There is always room for optimizing. If you would like to share any ideas, please comment below. Gracias amigos!

 

Step 1

Set up your local environment with Shopify CLI.

Pull the latest version to your repo:

Make sure to include “--store” with your store address link. This is how the Shopify CLI authenticates you now with CLI 3.0.

 

shopify theme pull 
--store your-store

Step 2

Create and name a new section.

Ex: “ig-story-links.liquid”

 

Step 3

Use the command to launch the dev theme for a live preview and start coding:

 

shopify theme dev

Final Code

 

See the Pen Instagram Story-like Section On Shopify by roysaucedo (@roysaucedo) on CodePen.

Back to blog