How to create a "Shop My Instagram" webpage with ShopStyle Collective

This post focuses on creating a "Shop My Instagram" page with Shopstyle Collective so your followers can shop all your favorite styles in one place. For more info on how to link a single look to a specific blog post, check out my other post, How to Embed a Shopstyle Collective Widget to your Blog.


Step 1

Sign up for a Shopstyle Collective account at www.shopstylecollective.com Step 2 From the Shopstyle Collective dashboard, click on Collection. A collection is a group of looks that you place on your blog or website.




Step 3

On the left under Name Your Collection, give it a name like "Shop My Instagram." Click Save, then Click Done in the top right. We'll come back to this page later to grab the embed code.



We'll come back for this code later!


Step 4

From the dashboard, head on over to My Looks to add a few of your products.


Step 5

Create a look by uploading a picture (step 1), linking a product to your image (step 2), and adding product details (step 3). For more info on this specific step check out my other post, How to Embed a Shopstyle Collective Widget to your Blog. That post is focused on creating a "Shop My Look" widget for an individual blog post, while this post focuses on building out an entire "Shop My Look" webpage that contains all your favorite looks.

Step 6

Once you have your look setup, from step 3 within Shopstyle Collective, scroll down to the Add to a Collection section. From the drop down select the Collection you created in step 3. Then click Finish.



Notice when we click finish it has an option to embed or link your look within a blogpost. We could grab that code and add it to an html section of an individual blog post, but we want to add this look to one single page so followers can shop all your looks/styles all in one place! Let's head back to your Collection now to grab that code we talked about earlier in step 3.



Step 7

After you copy the embed code from your Collection, head over to your website and create a brand new webpage titled Shop My Instagram. Add an HTML iframe component to your page and paste the code from Shopstyle Collective.


I use Wix to manage my blog. To add an iframe element in Wix head over to the + button, click More, then you'll find the HTML iframe element. Add that to your page.


Step 8

Paste your code into the HTML section and click Apply. Notice your looks won't populate until you click the blue button to apply your changes. Also make sure you expand the HTML section height so your full image appears. This is an important step, particularly in Wix, as nothing will happen if you click on the image when the html frame is the height in the screenshot below.