How to Add Shop the Look Widget to Your Blog Homepage

Hi there!  One of my most popular tutorials to date is How to Add a Shop the Look widget to your blog.  Shop the Look is an affiliate program offered by Shopstyle Collective where you can add those cute Shop the Look widgets to your blog post so readers can browse and purchase items featured in your post.  Note:  This will only work on self-hosted WordPress, or WordPress.org, it will not work on WordPress.com blogs.  You can watch my video here or follow the steps outlined below:

I’ve already created a tutorial to show you how to set up the Shop the Look widget in the footer of your blog posts, but what if you want to show the widget below a post excerpt on your homepage, like so:

This tutorial assumes that you already have followed the original tutorial to set up your Shopstyle account and create a widget from here.  It also assumes that you have a widgetized homepage.  What is a widgetized homepage?  Blogs by default show the latest posts on the homepage, in a feed.  On a widgetized homepage, which most modern blog themes incorporate, you instead would insert a widget that shows your latest blog posts rather than just the feed.  This gives you much more freedom over the homepage layout.  You can tell if you have a widgetized homepage by going to Settings > Reading in your Dashboard and if your Front Page settings are set to show a Static Page, you most likely have a widgetized homepage.

Step 1:

We’ll start at Step 7 from the original Shop the Look tutorial where I show you how to get your widget code.  Keep this window open.

Step 2:

Now go to Appearance > Widgets.  You will need to have some familiarity with your blog layout to know which widget area to use for this step.  If this whole thing is confusing to you, check out my Custom Blog Design service, sometimes its totally worth it in the long run to have your blog designed by a professional (and it will look super cute too).  But for the purpose of this tutorial, I am using one of my custom themes which has a widget for the Home Top and Home Middle section of the homepage.  I have used the Genesis Featured Posts Combo widget to display my latest blog post at the top of the homepage.  So I will want my Shop the Look widget to go right below the Featured Posts widget.

Just drag the Custom HTML widget (default on all WordPress themes) into the widget area where you want your Shop the Look Widget to appear.

Step 2:

Now, add a title to your widget.  Something like “Shop This Look” or “Shop This Outfit”, whatever works for you.  Then, go back up to Step 1 and paste the widget code you got from Shopstyle into the Custom HTML widget.  Click save.

The whole idea behind this post is that you would be doing an OOTD post, and you would want to show shoppable, affiliate links that coordinate with your outfit below the post on the homepage.  So all you have to do is add the Shopstyle code to the Custom HTML widget, save, and your Shop the Look widget will appear on the homepage of your blog.

Step 3:

Now, what if you don’t post an OOTD or fashion post every day, and you don’t always necessarily want the Shop the Look widget to always show up on your homepage?  Easy.  When you don’t want to use it, just drag it back down to the Inactive Widgets section of your widget page.  You can do this with any widget you don’t want to use, dragging it into the Inactive Widgets section will keep the widget settings, but will not show up in any widget area.  Easy!

Now, when you want to use the widget again, just drag it back into the widget area and it will show up again.  And of course, you won’t be posting the SAME Shopstyle widget every time you post, so all you have to do is to create a new widget in Shopstyle that matches your new blog post, delete out the original code and replace it with the new code.  You can do this repeatedly, no worries.

Once again, dependent on the setup of your homepage, this should be your end result:

But keep in mind, you can use this tutorial to put your Shop the Look widget anywhere on your homepage that has a widget area:  the sidebar, the footer, above the header, wherever your blog has widgets, you can use this tutorial.

Once again, people get confused about widgets and widgetized homepages, and if you don’t have time to fool with it all or think its too complicated, hit me up!  Our Custom Blog Design package is a fab and affordable resource for bloggers who are just starting out, we will get you set up so you can start posting on a beautiful new blog!