Have you ever seen those cute shoppable photos where you can click on any item in the photo to “shop” it? These are called Moneyspot widgets and you can easily create them in Rewardstyle. First of all, you must have an active Rewardstyle account. If you don’t have an account, you can click here to apply.
You’ll want to have the products that are available in your shoppable photo already uploaded to your Rewardstyle products, so be sure you have added your products here first:
In Rewardstyle, go to Tools > Moneyspot:
Click on the black Upload button to upload the image you want to use. Ideally this would be like an OOTD selfie or shot of an interior where you would want to be able to have the reader click to see similar, shoppable products.
Select Icons or Hotspots from the Moneyspot Type section. Icons will appear as clickable icons on your image. Once you have clicked to Create Icons, a list of all of your Products will pop up, and you can then select which products you want to be linked to the icons in your image:
You have various font options for the icons as well as the ability to show brand, price, etc. on your icons. This tutorial is simply to show how to set up the basics of the Moneyspot widget, and you can customize the icons or hotspots as you wish.
Hotspots will appear as the reader hovers over your image, and when you choose Hotspots, you will get the exact same option, to pick out which products you want to link to your Hotspots:
You will see that Hotspots have various options for display including no color, or a border with the color of your choice. You can also choose Invisible Hotspots or to Show Hotspots on Hover.
When you have finished adding all of your icons or hotspots, under Select your Platform, select WordPress and click the Copy Code button:
Now all you have to do is to paste the code into a blog post or page for your Moneyspot widget to display live. You do not have to actually upload the image you are using to your post or page, you have already done this by uploading the image to Rewardstyle. You can go to Pages > Add New (or follow the steps here to learn how to add new pages to your blog and link them to your navigation menus). You will want a blank page, and it can be full-width, or you can set the page to show your sidebar as well, it is your personal preference. You can also insert the Lookbook into a blog post instead of on its own page. Once your page or post is created, all you have to do is click on the Text tab in the upper right corner of the post editor if you are using the Classic Editor:
Or insert the Code block if using Gutenberg:
And that’s it! Now you’ll have a nifty, shoppable image! This works great for OOTD posts where readers can hover over your outfit to shop it, and it’s also great for a room redesign where you want readers to be able to shop items featured in your space.