Shop the Post widgets

Your theme comes with built-in support for Shop the Post widgets. Here's an example of how the widgets will display on your homepage:

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 either Collective Voice or RewardStyle/LTK. Click here for instructions on setting up Collective Voice widgets. If using RewardStyle, click here.

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. Your theme utilizes two custom fields to display your Shop the Post widget – one for the title and one for the widget itself.

Using the 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:

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

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 widget. Keep in mind you can use different titles for each post – you aren't set on only one! Click Add Custom Field.

3. Click the blue  Enter New link again. In the Name box, type shop_post. In the Value box, paste your widget code from Collective Voice 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 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! 😊