While Rewardstyle makes it easy to create shoppable affiliate widgets, what if your products are on another platform, but you still want to create attractive shoppable affiliate widgets? Shop Page WP is an easy plugin that allows you to add an image, title and affiliate link in a neatly curated grid. Read more to find out how to set it up!
Step 1:
Download and activate the Shop Page WP plugin (available from the WordPress repository here). Or simply go to Plugins > Add New and download it directly in your WordPress dashboard. Be sure it is activated.
Step 2:
Add a product. In your blog dashboard, go to Shop Page WP > Add Product. This will take you to the individual product page. On this page, you will add the product title, affiliate URL, product description if desired, and add the product image.
Step 3:
For your product image, you will want to set the Featured Image. Product images will be cropped into uniform, square thumbnails on the front end of your website.
Step 4:
Once you have finished adding your affiliate products (remember, you want to at least add product title, Featured Image and affiliate link), navigate to the Shop Page WP Settings section:
On the Settings page, you can set custom button text (eg “Shop Now”) if you wish, choose your style (I am using the default style), select whether to open your link in a new tab (recommended so users are not navigated away from your site). You can also set the custom image sizes, I think 300 x 300 (the default) is fine but you can set custom thumbnail sizes if you wish on this page, and also select whether or not your images should be cropped. Please note that if you set image sizes, you should follow the blue Regenerate Thumbnails link to download and run the Regenerate Thumbnails plugin to resize your images). Once you have activated this plugin, you can go to your Media Library and you will see a link to Regenerate your thumbnails. I like them cropped for neatness and uniformity. Then click the blue Save Changes button at the bottom of the page.
Step 5:
Lastly, navigate to the Instructions section. This section lists all of the shortcodes that can be used to display your widget. Shortcodes are simply small snippets that can be customized to display widgets on the front end of WordPress. To keep things simple you can use the default
shortcode but this page displays how to limit the number of products displayed, or to display only products in a certain category, etc. This way you can create many different widgets to place on different sections of your site or blog.
Simply CTRL or CMD + click to copy your shortcode, and adjust as needed. Now, it is very easy to paste this shortcode into a blog post or page. Simply navigate to your page or post. If you are using the WordPress Classic Editor, just be sure to click on the “Text” tab and place your shortcode in as text. If you are using the newer Gutenberg editor, click the plus button to add a new block, and search shortcode.
Classic Editor:
Gutenberg Editor:
Once you have added your shortcode to your page or post, you can publish and you will have a nice little affiliate widget like so:
Note: The default settings have the Buy Now button, if you wish to hide this button simply go to Appearance > Customize > Edit CSS in your blog dashboard and paste the following code:
.shop-page-wp-link
and this will hide the button. Happy Shopping!
