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 link in the dropdown
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.
45 Responses
I’ve been trying to figure out how to use ShopStyle for so long! Thank you so much for this tutorial!
Thank you so much! I’m so glad!
Thank you!!!
Thank YOU for reading my friend! Happy New Year!
This was great! Thank you. Im a new blogger and definitely new to the entire fashion community. My eventual goal is to move to one of the bigger platforms for fashion blogging, as soon as I build up traffic to my site. I think this works as the PERFECT beginning! Excited to try this out now. I’ve subscribed to your page. Im anxious to keep following along and learning tips and trips to continue to grow my site.
-Khristy
http://www.simplewifelife.com
Thank you so much for reading! I really try hard to help out new bloggers I know it’s really confusing when you start out! Your blog looks great, keep it up in 2018, your pix are gorgeous! Thank you again!
This is great, thankyou! Very comprehensive and straightforward – can’t wait to add this to my blog.
Thank you so much for reading Eleanor, I’m glad it helped you! Thank you so much for reading I appreciate it!
Sir,
This is great an article for adding a new shop . This article is best for every website developer . I try hard and soul to solve this things but lastly I got it from you . Thank you so much .
Happy New Year, Shari! Thanks for sharing this blog post. This is very helpful. I am working on my first beauty product review blog post, and this helped me create my custom “Shop The Post” Widget in about 10 minutes. XO, Lia
I’m so glad!!! Thank you so much and Happy New Year to you my friend!
Thank you for this tutorial, I have one questions: how do I make the widget responsive? When I view my blog post on a smaller screen/on the mobile, everything on my blog is responsive except for the widgets that I inserted in my posts.
Hi there. A lot of responsiveness depends on your particular blog theme, the widget should automatically be responsive when you place it in a post (it might now show as many photos at once however) but if you want to paste a link to your post with the widget I’m glad to take a look and see if I have any suggestions!
Launching a new blog soon that will include affiliate links. This post was extremely helpful. Thank you!
Hello!
Thanks so much for this tutorial, but how can I add it onto Blogger? Been trying to figure that out!!
Thanks x
Hey Eva! On Blogger, they don’t allow you to have a widgetized homepage per se, so I think the only places you can add it would be either to the sidebar or the blog footer, where you should be able to add it as an HTML/Javascript gadget. However I THINK (and I haven’t used Blogger in a long time so I’m not 100%) that if you add the widget to your full blog post, and your blog is set to show full posts on the homepage, then the widget should show up there as well.
*^ the blogger home page and not an individual post?
I have recently created a blog on word press and am trying to copy and paste over from the collective website and it will post the link, but does not ever post what looks to be a widget. Even in the preview or the publish post it just shows the scripted link. Is there any advice you have on how to fix this little issue? Thank you in advance!
Hey there McKenzie thank you for reading! First of all, are you blogging at wordpress.com, or wordpress.org? If you are on wordpress.com, the widget will not show up because they do not allow third-party scripts. You can read about how to tell the difference between the two here:
https://www.littlebluedeerdesign.com/difference-wordpress-com-wordpress-org/
And if you ARE on wordpress.org, make sure that you are pasting the code in the Text, not Visual tab of your post editor, I go over this in Step 8 of the tutorial.
This was SO helpful. You just changed my blogging game. Thanks so much!
Thank you for sharing this! I have been trying to figure out how to monetize my blog for awhile now and this is the perfect tool. Thanks again!
– Cara
http://www.rompersandrhubarb.com
Thanks so much for reading, Cara! Your blog looks really good! 🙂
Thank you, thank you, thank you! this was the easiest and clearest tutorial ever! I have everything now up and running on my blog.
Oh my gosh Daria that is so good to hear! I’m really glad it was helpful, best of luck with blogging!
Hello! I have a quick question! So the widget works perfectly on my website when using it on a laptop or desktop, but when on a mobile device, the widget disappears. Can you help me figure out what’s going on? My hosting site is DreamHost and I bought my domain name, so I think I have the correct wordpress account? Especially since it’s working just fine on laptop/desktop.
Thank you in advance!
Hey Anna, that is strange, unless the widget is too small to show up on mobile, it might also be something with your theme, I surely am glad to take a look though, do you mind posting the link the page or post where the widget is not showing up on mobile? Thank you!
Hi there!
I have a small blog and wanted to add the this to my posts. However when you go on shopstylecollective.com you have to apply instead of just signing up. And they have to approve you. Am I missing something?
Hi Ingrid thanks for reading! Yes apparently Shopstyle has started asking for applications instead of automatic approval now, everyone I know has gotten approved so I wouldn’t sweat it, but I have been hearing that they are asking you to apply now, I will make a note of it thanks so much for sharing!
Does the process to apply take a long time? And do they reject a lot. I’m just starting a blog so I’m not sure if I should apply Style Collective right away or get some posts under my belt..
Hey Rachael, I think they approve almost everyone (they did not used to have an approval process when I wrote the post) but I have not heard of anyone getting rejected, I think it also has to do with your social media and instagram following BUT if it were me, I would go ahead and apply, if you get rejected you can always reapply. And I think it takes a week or two usually to hear back so it’s probably fine to go ahead and do it!
Thank you so much for this informative post! I use squarespace and my widget doesn’t display unless I click “preview in unsafe mode” and once I click that it doesn’t show up consistently on my site (desktop & mobile). I was wondering if this occurred to anyone else?
Thanks!
Hey Alexa! Thanks for reading! I’m not that familiar with Squarespace because I design for WordPress but it sounds to me like this is an issue with the SSL certificate on your site (the SSL adds the https:// as opposed to http:// to the domain), I have not seen any issues with WordPress blogs on this particular issue but you might reach out to Squarespace on this one, just explain that you have a widget that (it sounds like) does appear on unsecured domain (http://) but does not appear on secure domain (https://) and just ask if they have any pointers. It should appear just fine at https:// but if I notice anyone else with this issue I will comment back for sure!
I will definitely reach out to them, thank you so much for the info and help! I appreciate it. xo
I started a blog with WordPress.com and wanted to add this to it as I thought it seemed pretty cute. However I see that it’s only supported for the self hosted .org version. I’m not ready to pay for self hosting yet as my blog is still really young. Is it supported by blogger? If so also for free? I’m thinking about moving but first want to know if it’s worth it
Thanks so much for reading! You are correct, WordPress.com does not support affiliate widgets or advertising. I THINK Blogger does allow for them, I’m almost positive, but I feel like a lateral move from WordPress.com to Blogger is sort of going backwards. I definitely understand the cost concern of moving to self-hosted WordPress, but hosting is not that expensive, my favorite host, Bluehost, offers basic hosting (which is all you need) for $2.95 per month, I actually have a guide on how to set up your Bluehost hosting if you are interested here:
https://www.littlebluedeerdesign.com/bluehost-setup/
You do have to then transfer your posts from WordPress.com to WordPress.org but there are lots of good tutorials out there on how to do that, if you don’t have that many posts yet it’s pretty easy. I always tell people if you think you might continue blogging in the future, better to go ahead and switch to WordPress.org, and I also have an article here that goes into more detail on the difference between the two to help you make an informed decision:
https://www.littlebluedeerdesign.com/difference-wordpress-com-wordpress-org/
Thank you again for reading!
HI! I am so glad that you are sharing your knowledge with us all. It is so helpful! I am having trouble with my widget, though, and maybe you can help. I go through and do all of the steps, but then when I paste the code into my text section of my post I only get a little filmstrip. When I preview it doesn’t come up. What am I doing wrong? Thank you for your help!
Hi April thanks for reading! It sounds like you have placed the html code in Visual tab of the post editor (and if you are using Gutenberg, you should insert it as a Custom HTML block), (Step 8 of my tutorial above) it could also be that there is another plugin installed that is causing the conflict, but if you send me the link to the post I’m glad to take a look. Also, you won’t be able to see the widget until you preview or publish the post, it will not show up in the post editor 🙂
Thank you!
Thank you very much for this tutorial. I am completely amateur and managed to do it on first go.
I’m so glad Roni thank you so much for reading and I’m glad I could help!
Hello! ShopStyle Collectives looks totally different and when I tried to make an account they put me in Demo mode, so my embeded code is different then what yours looks like.
Apparently you need to apply and then they accept or deny – like Rewardstyle.
Is this new or am I doing something wrong?
Hi Krisi no not at all, they HAVE instituted an approval program, I don’t know anyone who hasn’t been approved so I’m sure you will, be sure to keep up your instagram that is the most important thing but yes they did start requiring application and approval however it is a lot more relaxed and easier to get into than Rewardstyle. Thank you for reading I hope this is helpful!
I started a blog with WordPress.com and wanted to add this to it as I thought it seemed pretty cute. However, I see that it’s only supported for the self-hosted .org version. I’m not ready to pay for self-hosting yet as my blog is still really young. Is it supported by the blogger? If so also for free? I’m thinking about moving but first want to know if it’s worth it
Hey Madison thanks so much for reading! So I THINK it is supported by Blogger, I’m pretty sure it is, and yes, Google Blogger is free as well and the Shopstyle widget is always free. You could just start a free Blogger page just to test it out, but I’m 99% sure it is supported by Blogger you’d just want to add it as HTML text or widget.
Is the boutique app supposed to update when you add products automatically. or do u manually have to add it?