Shoppable Images

The Shoppable Images are images that contain hotspots with links to products.

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