Mia [Genesis] - Shop the Post widgets

The Mia 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 Collective Voice or RewardStyle (LTK). Click here for instructions on creating Collective Voice product widgets.

In the Mia 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 Voice widget 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 Mia theme utilizes two custom fields to display your Shop the Post widget – one for the title and one for the actual shopping 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:

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 and blog pages.

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

Homepage "Travel Essentials" widget

  1. Create a 5 or 6 column shop widget in Collective Voice or RewardStyle.
  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.

Sidebar "Shop Mia's Favorites" widget

  1. Create a 2x2 (2 columns, 2 rows) shop widget in Collective Voice or RewardStyle.
  2. Go to WordPress > Appearance > Widgets.
  3. Drag a Custom HTML widget into the Primary Sidebar.
  4. Paste your shop widget code in the box.
  5. If you'd like to add a button ("Visit the Shop" shown above), paste the following code beneath your shop widget code:
<a href="LINK TO A PAGE" class="button">Visit the Shop</a>