Shop the Post widget setup

There are several ways that you can integrate "Shop the Post" widgets into your site, including in your blog posts, pages, sidebar, or footer. Shop the Post widgets have become incredibly popular in the fashion blogger community. Bloggers can earn commissions via attractive widgets and links to partner sites. It's a great way to earn affiliate income while blogging.

Whenever you see a Shop the Post widget on someone's site, they are usually using either RewardStyle or ShopStyle Collective. These companies provide the actual Shop the Post widgets that can be inserted anywhere on your site.

RewardStyle is exclusive and invitation only, so if you're a new blogger, you likely won't be able to join RewardStyle right away. If you're already a RewardStyle member, you can use your widgets in your theme. If you are using RewardStyle, please read the important note at the bottom of this page.

How to Create Shop the Post Widgets

All the Shop the Post widgets seen in our theme demos use ShopStyle Collective. Below we'll show you how to create shop the post widgets through ShopStyle Collective.

1. To get started using ShopStyle widgets in your theme, you will first need to create an account with them.

2. After you've signed up, you'll see this section in your ShopStyle dashboard.

3. To create your first Shop the Post widget, click the Product Widget option. On the following page, you can search for items you'd like to include in your widget. 

4. Next, you can customize how your widget displays.

5. Once you're happy with your widget, click Publish at the top right. 

6. Copy the code at the top of the page. Now it's time to place your widget in your theme.

Adding a shop widget to your posts

There are TWO ways you can add a Shop the Post widget to your posts:

1. You can simply paste the embed code right into your blog post along with your normal text and images. This gives you full control over where the widget is placed in your post. 

2. Or you can utilize the Shop the Post Custom Field that is built into in your theme. This will display your widget on the blog page when using the "Read the Post" button AND on the individual post page. To see an example, scroll to the second post in the Peony demo.

Using the Custom Field

Enabling the custom field

Gutenberg Editor:

1. In the post editor, click on the three dots at the top right corner of the screen.

2. A menu will pop up. Select Options at the very bottom.

3. Under Advanced Panels, check the Custom Fields box. Proceed to the next section of this tutorial.

Classic Editor:

1. In the post editor, click the Screen Options tab at the top right corner of the screen.

2. Find the Custom Fields box and check the box. Proceed to the next section of this tutorial.

Using the custom field

1. Once you've enabled the Custom Field, you'll be ready to use it! Scroll down in your post editor and find the Custom Fields section:

2. The first time you use the Custom Field, you'll need to click the blue  Enter New link.

3. In the box, type shop_post (in all future posts, the shop_post option can be found in the "— Select —" drop-down list).

4. Once you've entered the shop_post Custom Field name, you can fill in the Value. This is where you'll paste your widget code from ShopStyle Collective or RewardStyle.

5. And that's it! Publish your post. Your widget will display below the Read the Post button on blog pages, and in the footer on single post pages.

The process of adding your code to the Custom Field becomes very easy once you've done it a few times! 😊

Adding a shop widget to the homepage

A few of our themes display a shop widget in a widget area on the homepage. Here's how to set up those widgets:

1. Create a 5 or 6 column shop widget in your ShopStyle Collective dashboard.

2. Go to WordPress > Appearance > Widgets.

3. Drag a Custom HTML widget into any of the "Front Page" widget areas. The documentation for your individual theme will tell you exactly which Front Page widget area the demo is using, but you can use any area that you'd like.

4. Paste your ShopStyle widget code in the box and then save.

Adding a shop widget to your sidebar

Some of our themes have a "My Wishlist" shop widget in the sidebar, which uses ShopStyle Collective. Here's how to add your own widget to the sidebar:

1. Create a single-column shop widget in your ShopStyle Collective dashboard.

2. Go to WordPress > Appearance > Widgets.

3. Drag a Custom HTML widget into the Primary Sidebar area.

4. Paste your ShopStyle widget code in the box and then save.

Adding a shop widget to a page

Some of our themes have a "Shop My Looks" page. Here's how to create a similar page:

1. Create a 3x3 column shop widget in your ShopStyle Collective dashboard.

2. Go to WordPress > Pages > Add New.

3. Switch to the "Text" side of the page editor (top right corner of text box).

4. Paste your ShopStyle widget code in the text box and then save.


If you're using RewardStyle...

If you're using RewardStyle, there are a couple additional steps you'll need to take.

1. Install the RewardStyle WordPress plugin.

Here's where to find the plugin and how to upload it:  LINK

2. If you want to use the Custom Field to display your RewardStyle widgets, you will need to grab the HTML code for your RewardStyle widgets and NOT the shortcode. The HTML can be found in the "Other" tab in RewardStyle (rather than the WordPress tab you're probably used to).

The reason for this is that WordPress Custom Fields do not support shortcodes. If you use the shortcode in a Custom Field, the actual shortcode will display, instead of the widget. RewardStyle shortcodes can be used in other areas of your site if you wish — just not in the Custom Field.


Can I use Amazon affiliate widgets?

Yes, you sure can! Follow the same instructions, and just add your Amazon affiliate widget code instead.