[Genesis] - 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.
Display of the shop the post area will vary between themes
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 a new blogger, you likely won't be able to join RewardStyle right away. If you're already a RewardStyle member, you can use your widgets in your theme. If you are using RewardStyle, please read the important note at the bottom of this page.
How to Create Shop the Post Widgets
Click here for instructions on creating ShopStyle Product Widgets (Shop the Post widgets).
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. If you're using Gutenberg, use the Custom HTML block to add your widget.
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 homepage blog feed (if applicable) and blog page when using the "Read More" button. To see an example, scroll to the second post in the Ingrid demo.
Using the Custom Field
Enabling the custom field
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.
Using the custom field
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. The first time you use the Custom Field, you'll need to click the blue Enter New link.
3. In the box, type shop_post (in all future posts, the shop_post option can be found in the "— Select —" drop-down list).
4. Once you've entered the shop_post Custom Field name, you can fill in the Value. This is where you'll paste your widget code from ShopStyle Collective or RewardStyle.
5. And that's it! 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! 😊
Adding a shop widget to the homepage
A few of our themes display a shop widget in a widget area on the homepage. Here's how to set up those widgets:
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.
If you're using RewardStyle...
If you're using RewardStyle, there are a couple additional steps you'll need to take.
1. Install the RewardStyle WordPress plugin.
Here's where to find the plugin and how to upload it: LINK
2. If you want to use the Custom Field to display your RewardStyle widgets, you will need to grab the HTML code for your RewardStyle widgets and NOT the shortcode. The HTML can be found in the "Other" tab in RewardStyle (rather than the WordPress tab you're probably used to).
The reason for this is that WordPress Custom Fields do not support shortcodes. If you use the shortcode in a Custom Field, the actual shortcode will display, instead of the widget. RewardStyle shortcodes can be used in other areas of your site if you wish — just not in the Custom Field.
Can I use Amazon affiliate widgets?
Update 2024: Amazon has discontinued their widgets, so it's no longer possible to integrate Amazon widgets into your site. You'll need an account with ShopStyle or RewardStyle in order to create the affiliate product widgets displayed in the theme demo.