Charlotte - Shop the Post widgets

The Charlotte theme comes with built-in support for your Shop the Post widgets. Here's how it looks on the homepage and blog pages:

And here's how it looks on your individual post pages:

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 RewardStyle or Collective Voice.  Click here for Collective Voice setup instructions.

In the Charlotte theme, the image thumbnails are set fairly small so that the widget "fits" correctly (height-wise) on the homepage next to the post image. For your reference, here are settings for the Collective Voicewidget shown in the demo:

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

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

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! 😊

Charlotte Homepage "Shop My Favorites" widget

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

2. Go to WordPress > Appearance > Widgets.

3. Drag a Custom HTML widget into Front Page 4.

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

5.  Click here for instructions on adding the "Shop My Favorites" title and "What I'm Lovely Lately" subtitle.