You might have seen the really cute “Shop This Look” widgets that fashion bloggers put in their blog posts or pages:
Cute, right? And also Shopstyle is a fab to start monetizing your blog! So, how do you get these widgets and add them to your blog posts? It’s really easy! You can watch my video tutorial here, or scroll down for step by step instructions. NEW! If you want to add an entire Shop My Instagram page to your blog, check out my tutorial here. And if you have been approved for RewardStyle (aka liketoknowit) you can check out my tutorial for adding the RewardStyle widget to your blog here.
*Keep in mind that your Shopstyle widget will NOT appear in RSS feeds like Mailchimp or Jetpack! So if you are using Mailchimp or Jetpack to deliver your blog posts via email, it is highly recommended that you pay special attention to Step 9 which shows you how to also add text links below your widgets so readers can still view the text when reading your posts by email.
Step 1:
Go to www.shopstylecollective.com and sign up for an account
Step 2:
In your Shopstyle Collective dashboard, in the upper left corner, click on the Create button
Step 3:
Then click on the Product Widget button
Step 4:
Now comes the fun part! It’s like creating a virtual shopping list. From the column on the left, you can search items by brand, retailer, price range, color, etc. As you sort from the list on the left, products will appear in the grid on the page. When you see a product that you want to add to your widget, just click on the image, and a gray Add to Widget box will pop up. Just click on it, the product will be added and you can continue adding as many products as you wish.
Step 5:
Once you are done adding your items, just click on the Build link in the upper left corner. Items you have added to your widget will appear across the top of the page.
Step 6:
You can change the display settings of your widget on this page, I recommend generally just leaving the settings as default, but if you have a specific width or size in mind, you can play with the dimensions. Then, just click on the Publish button in the upper right corner.
If you prefer your widget to appear with multiple rows and columns vs. as a slider, just select the number of rows and columns you wish to show in the area above. If you have set the widget to show 3 columns and only 2 columns show up when you paste the widget in your post, try going back and reducing the Image Size slightly. The click Publish in the upper right corner of the page.
Step 7:
Now all you have to do is highlight the code and click the Copy Embed Code button to copy the code.
Step 8:
Now, just head over to your blog post or page that you want to add the widget to. Make sure that you click on the Text, not Visual tab in your post editor. Just place your cursor where you want the widget to appear and either CTRL + V or CMD + V to paste the code into your post or page.
Now, you can preview or publish your post, and you will see the widget:
Cute, right? If you want your widget to appear in your sidebar or footer, you can follow my tutorial here on how to add a widget to your blog. You will just want to use the Text widget to paste the code. Shopstyle is an affiliate, so you can actually make money when readers click and buy products from your widget, which is pretty cool. And back in Shopstyle, you can save your widget, and go back and edit or add to later:
And here is an example of the live widget, pretty cool, right?
Step 9:
Since Mailchimp and other RSS feeds (posts by email) will not allow for outside HTML or Javascript to appear in an email for security reasons, if you have your blog set up to deliver posts by email, there will be a blank space where the Shop the Look widget will appear. To get around this, you can scroll down PAST the widget embed code shown in Step 8 to the Text Link area.
Simply copy all of the text by highlighting it and hitting the Copy Text button. Then, you can paste this text in your blog post, below the Shopstyle widget that you pasted above. This will not display the images, only the text links to each product, but it is a good way to share your links so that they also show up in an email.
Step 10 (optional):
If you have a blog designed by Little Blue Deer, we have created a spot where you can also add a Shop the Look widget to your blog homepage as well. To update the example Shop the Look widget on your blog homepage:
In your blog dashboard, simply go to Appearance > Widgets and expand the Home Top widget section. Then expand the Custom HTML widget. All you have to do is to replace the example code that is there with your own Shopstyle code that you have created above. Then just save the widget, and your Shop the Look widget will be updated. You can change this out as often as you wish, even daily if you like!
Pretty cool! Enjoy, make some money and if you have any questions, you can contact Shopstyle or comment below! *NOTE: The Shop the Look widget will NOT work on WordPress.com blogs, only self-hosted, or WordPress.org. To read about the difference please check out my article here.
