Skip to main content

# 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