How to Add a Shopstyle Widget to Your Blog

Today I decided to do something different. I decided to share a little bit of knowledge I learnt over the weekend on how to create a shopstyle widget. Shopstyle widget enables your readers to shop any item mentioned on any of your posts directly from your blog. This means you can buy all items I review or use in my makeup looks directly from my page. Granted I do have links to all items on my posts but I feel visuals are always better. They standout and make the entire post more vibrant and put together. So I wrote down a step-by-step guide on how to create your very own shopstyle widget.

I realised how difficult it was to find one post/forum that showed you how to create the widget from A-Z. So when I did eventually figure out how to, I thought it was best to share. Sharing (they say) is CARING after all! I had to go to a few different sources until I came across shopstylecollective. Shopstylecollective is an affiliate programme that helps you monetize your blog based on commission and clicks. If you do incorporate this widget on your blog, do let me know. 


1. Sign Up

To create the widget, first create an account by signing up to shopstylecollective.

2. Create My List (favourite)

Once you're signed up, you can create the widget by searching an item or creating a favourite list called My List. Let's go ahead and create one. First, search an item by brand using the search tool. 

When you locate the item, hover on the image and click on the heart icon to add to your favourite.

3. Create widget

When you're done, click on the Create button and then the Product Widget link to begin creating the widget.

4. Add Items to Widget

To add items to the widget, you can search an items using the search tool or select straight from your favourite.  To select from your favourite, click on My List, hover to the image of the item and click on Add to Widget. You can add as many items as you wish and when you're done, click on Build on the top right hand corner of the page.

5. Build

You can now configure the widget to your liking. Change the widget and image size as well as the rows and columns (i.e. how many items appear in each row/column of the widget). Once you're satisfied with the look and feel of the widget, click on Publish on the top right hand side of the page. 

6. Publish

You should now have an HTML code. Copy this code by clicking on the Copy Embed Code link.

7. Edit blogger (please note the following steps are only for people who host their blogs on blogger…sorry)

Return to blogger and navigate to Posts. Find the post you'd like to add the widget to and click Edit. Click on HTML next to the Compose button. If you'd like to place the widget at the bottom of your post just before the signature (as seen on my previous post here), scroll right down to the bottom of the post and paste the embed code there.

Save, preview and when you're happy with it, publish away!

To create a wishlist feature as seen on the right hand side of my blog, follow steps 2-6. In the build section change the dimensions of the row and column to 1x1 (i.e. 1 Row x 1 Column).

8. Edit Blogger (for a wishlist widget)

Return to blogger and navigate to Layout. Click on Add a Gadget, scroll down to HTML/JavaScript and click on the add button.

Paste the embed code in the Content section; enter Wishlist in the Title section and then click save. Click on Save Arrangement when you're happy with your preview.

And that's it! You've now created your very own wish list!

I hope this post was helpful. I'll be publishing more post like this more often to help bloggers who are fairly new to the game. So let me know what you think. Was it interesting? Was it informative? Are you interested in more posts like this? Comment down below! Also if you have any technical issues you need help with or any general questions/suggestions, feel free to leave it in the comment section below or email me at lauritaonline.cs@gmail.com.

As always, join the family by SUBSCRIBING and come show me some love on my social media. You can follow me on instagram(sylviaforjoe), twitter (sylviaforjoe) and snap_chat (sylvia_laurita).

I love you for stopping by xoxo