Shoppable images provide a way for users to shop products straight from post content.
Images contain different hotspots with affiliate links to products.
When a user purchases such a product, you get a commission.
Create a Shoppable Image
To convert a regular image to a shoppable one, you have to add some pins (hotspots) to it. Please follow these steps to define pins:
- Go to the WP Dashboard › Media and pick an image you want to add pins to
- On this image edition view, click the Edit Pins button right under the image
- Pins UI should show up on the left side of the image
- Click the Add Pin button
- A new pin will be added on top of the image (in the top left corner)
- Drag and drop to change position
- On the right side, you should find pin details panel, expand it
- Fill in the product name, URL for a product page and its price
- If you want to add a pin for a self-hosted WooCommerce product, switch to WooCommerce tab and select it
Add a Shoppable Image To a Post
To insert a shoppable image into post content, please follow these simple steps:
- Go to the WP Dashboard › Media and pick a shoppable image (defined above)
- On image edition view, click the Edit Pins button right under the image
- Pins UI should show up on the left side of the image
- You should find there shortcode like this
(see the green border on the image above) - Copy it and paste inside post content
