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 just starting out, you won't be able to use RewardStyle. If you're already a RewardStyle member, you can use your widgets in your theme. There is a small amount of code in some of our themes that is specific to ShopStyle, but it won't affect how your widgets work. If you are using RewardStyle, please see the note at the bottom of this page.

How to Create Shop the Post Widgets

All the Shop the Post widgets seen in the demo use 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 (note: you can create an unlimited number of widgets, links, etc.)

3. To create your first "Shop the Post" widget, click the Product Widget option.

4. On the following page, you can search for items you'd like to include in your widget. 

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

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

7. 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

If your site has updated to  WordPress 5.0, you will either need to use the Classic Editor plugin (in place of Gutenberg) or install Custom Fields for Gutenberg to access the Custom Fields section.

1. Create a new blog post (or edit an existing one).

2. Click the Screen Options tab at the top right of the page.

3. Find the Custom Fields box and check the box.

Don't see the Custom Fields checkbox? Make sure that you do not have  Advanced Custom Fields active on your site, as it will override the default Custom Fields option.

4. Scroll down and find the Custom Fields section.

5. The first time you use the custom field, you'll need to click  Enter New.

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

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

8. Now you can publish your post. Your widget will display below the Read the Post button on blog pages, and in the footer on single post pages.

Don't worry, 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 (Vivienne, Pippa, and Amelia).

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.

Note about RewardStyle: If you are using RewardStyle and your widgets are not displaying, you'll need to do two things:

  1. Install the RewardStyle Wordpress plugin (contact RewardStyle directly to obtain the plugin).
  2. When using the Shop the Post custom field, you have to grab the *HTML code* for your RewardStyle widget, NOT the shortcode. Wordpress custom fields do not support shortcodes, so your widget will not appear unless you use HTML. RewardStyle shortcodes can be used in other areas of your site if you wish – just not in the custom field.