Harper - Shop the Post Widgets

The Harper theme comes with built-in support for your Shop the Post widgets.

How to create shop the post widgets

Before you can start placing Shop the Post widgets on your website, you'll need to create one! These widgets are typically set up through ShopStyle/Collective Voice or RewardStyle, or another affiliate network that offers affiliate carousel widgets. Click here for ShopStyle Collective setup instructions. Click here for important info regarding using RewardStyle.

Adding shop the post widgets to your blog posts

Now that you've set up your Shop the Post widget, it's time to place the widget in a blog post. The Harper theme utilizes two custom fields to display your Shop the Post widget – one for the title and one for the actual shopping widget.

Shop the Post widgets via Custom Fields

Enabling the custom field box

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  Preferences at the very bottom.

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

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

Using the custom fields

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. Click the blue  Enter New link. In the Name box, type shop_title. In the Value box, type the title you want to display above your Shop the Post widget. Keep in mind you can use different titles for each post – you aren't set on only one! Click Add Custom Field.

(Don't want to display a title? Skip to step 3).

3. Click the blue  Enter New link again. In the Name box, type shop_post. In the Value box, paste your widget code from ShopStyle Collective or RewardStyle. Click Add Custom Field.

You only have to create the shop_title and shop_post fields once. Now that you've created them, they will be available for you to pick from in future posts in the "— Select —" dropdown.

7. When you're done, you should see two custom fields like this:

Please note that it doesn't matter what order these fields display in  –  they will display in the correct order on your website.

8. Now you can publish your post. Your widget will display below the Read the Post button on the homepage.

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

Homepage "Shop My Picks" widget

  1. Create a 5 or 6 column shop widget in ShopStyle or RewardStyle.
  2. Go to WordPress > Appearance > Widgets.
  3. Drag a Custom HTML widget into Front Page 8.
  4. Paste your shop widget code in the box and then save.