Shoppable Images

Shoppable images provide a way for users to shop products straight from post content. Images contain different hotspots with affiliate links to products. When 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 WordPress Admin › 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
• New pin will be added on top of the image (in 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 a post content, please follow these simple steps:

• Go to the WordPress Admin › 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 [adace_shoppable_image attachment="123"] (see green border on image above)
• Copy it and paste inside post content