'Shoppable Image Hotspots' App User Guide

1. Install the 'Shoppable Image Hotspots' app
2. Create a shoppable image on the app 'Settings' page
3. Add a 'Shoppable Image Hotspots' section/block to a page in your theme

Install the 'Shoppable Image Hotspots' App

Create a Shoppable Image on the App 'Settings' Page

1. General Settings
2. Hotspot(s) - one per hotspot
3. Advanced Settings

Below the settings are a 'Save' button as well as an 'Add New Hotspot' button (which you can click to insert an additional hotspot into the image).

Let's go through each of the 3 expandable settings sections...

General Settings

The 'General Settings' section contains the following fields and settings:

• Side heading text - Enter your desired heading text to show to the left/right of the shoppable image. Here again, if you prefer not to show a heading, leave this field blank. (Note: If you selected 100% image width above and also enter 'Side heading text' (along with 'Description' text and/or a button), the side heading/description/button will appear below the shoppable image.)
  
  
• Description - Enter the textual content you want to appear below the side heading. Leave this field blank if you don't want to show any side content.
  
  
• Button color - Use the color selector tool to choose the color of the button. (Note: You can change the color of the text itself in the Advanced Settings section below.)
  
  
• Button text - If you want to show a clickable button below the side heading and/or description text, enter the text for the button here. To hide the button, delete the button text (i.e. leave this field blank).
  
  
• Button destination URL - Enter the full URL (including the https:// prefix) of the page you want the button to link to.
  
  
• Description & button alignment - Use the dropdown to choose whether you want the description text (and button, if activated) to be left- or center-aligned.

Please note that the 'General Settings' section only contains the most basic settings for the section/block. There are many other settings in the Advanced Settings section below.

Hotspot(s) - One Expandable Section Per Hotspot

By default, there will only be one (1) hotspot section when you first create a new shoppable image. To add additional hotspots to the image, simply click the 'Add New Hotspot' button at the very bottom of the settings box (right next to the 'Save' button).

The first 3 settings in this 'Hotspot' section are:

1. Hotspot horizontal position (X axis) - Use the slider to choose how far across the image (from left to right) the hotspot should be. For example, if the horizontal position of the hotspot should be 32.5% the way across the image (starting at the left), you would set the slider to 32.5%. (Note: The slider moves in increments of 0.5%.)
2. Hotspot vertical position (Y axis) - Use the slider to choose how far up the image (from bottom to top) the hotspot should be. For example, if the vertical position of the hotspot should be 71.0% the way up the image (starting at the bottom), you would set the slider to 71.0%. (Note: The slider moves in increments of 0.5%.)
3. Select product/page - Click the 'Select' button to select the product, collection or page the hotspot should link to. (Note: While you will usually select a product here, you don't have to. You can also select a collection page, blog page, informational page, or even enter a URL for another site.)

The remainder of the hotspot settings depend on which type of page you just selected:

• Product
• Collection
• Blog
• Pages
• Enter URL

We'll now go through each of the page types and the settings for each.

'Product' Page Type

If you select PRODUCT as the page type, you will see the following settings:

• Select product - Use the dropdown to select one of the products in your store's catalog. You can begin typing the product title to quickly find the product within the list.
  
  
• Title - Select the 'Use product title' option to show the product's full title in the info box. Alternatively, select the 'Show alternate title' option and then enter the alternate product title text in the field that appears.
  
  
• Text - Use this setting to specify what text (if any) you want to display below the product title and the product's price. Select 'No text' if you don't want to show any additional text. Select 'Show first 200 characters of description' if you want the info box to show the first couple sentences of the product description. Select 'Show alternate text' if you want to create custom text to show in the info box (i.e. a bullet list of key features or product highlights).
  
  
• Link text - Enter the text for the hyperlink that links to the product page.
  
  
• Open link in new tab - Check this box if you want the product page to open in a new tab.

'Collection' Page Type

If you select COLLECTION as the page type, you will instead see the following settings:

• Select collection - Use the dropdown to select one of your store's collection pages. You can begin typing the collection title to quickly find the collection page within the list.
  
  
• Title - Select the 'Use collection title' option to show the collection's full title in the info box. Alternatively, select the 'Show alternate title' option and then enter the alternate collection title text in the field that appears.
  
  
• Image - Use this setting to specify what image (if any) to show on the left side of the info box. Select 'Use collection's default image' to show the collection's default image (from the collection page in your Shopify admin panel). Select the 'No image' option if you don't want to show any image in the info box. Select 'Show alternate image' if you want to upload an image from your computer (then click inside the dashed-line box to upload the image).
• Text - Use this setting to specify what text (if any) you want to display below the collection title. Select 'No text' if you don't want to show any additional text. Select 'Show first 200 characters of description' if you want the info box to show the first couple sentences of the collection description. Select 'Show alternate text' if you want to create custom text to show in the info box.
  
  
• Link text - Enter the text for the hyperlink that links to the collection page.
  
  
• Open link in new tab - Check this box if you want the collection page to open in a new tab.

'Blog' Page Type

If you select BLOG as the page type, you will instead see the following settings:

• Select blog post - Use the dropdown to select one of your store's blog posts. You can begin typing the blog post title to quickly find the post within the list.
  
  
• Title - Select the 'Use blog post title' option to show the blog post's full title in the info box. Alternatively, select the 'Show alternate title' option and then enter the alternate title text in the field that appears.
  
  
• Image - Use this setting to specify what image (if any) to show on the left side of the info box. Select 'Use blog post image' to show the blog post's default image (from the blog post page in your Shopify admin panel). Select the 'No image' option if you don't want to show any image in the info box. Select 'Show alternate image' if you want to upload an image from your computer (then click inside the dashed-line box to upload the image).
• Text - Use this setting to specify what text (if any) you want to display below the blog post title. Select 'No text' if you don't want to show any additional text. Select 'Show first 200 characters of description' if you want the info box to show the first couple sentences of the blog post. Select 'Show alternate text' if you want to create custom text to show in the info box.
  
  
• Link text - Enter the text for the hyperlink that links to the blog post.
  
  
• Open link in new tab - Check this box if you want the page to open in a new tab.

'Pages' Page Type

If you select PAGES as the page type, you will instead see the following settings:

• Select page - Use the dropdown to select one of your store's informational pages. You can begin typing the page title to quickly find it within the list.
  
  
• Title - Select the 'Use page title' option to show the informational page's full title in the info box. Alternatively, select the 'Show alternate title' option and then enter the alternate title text in the field that appears.
  
  
• Image - Use this setting to specify what image (if any) to show on the left side of the info box. Select 'Use page default image' to show the page's default image (from the informational page in your Shopify admin panel). Select the 'No image' option if you don't want to show any image in the info box. Select 'Show alternate image' if you want to upload an image from your computer (then click inside the dashed-line box to upload the image).
• Text - Use this setting to specify what text (if any) you want to display below the page title. Select 'No text' if you don't want to show any additional text. Select 'Show first 200 characters of page body' if you want the info box to show the first couple sentences of the informational page's body. Select 'Show alternate text' if you want to create custom text to show in the info box.
  
  
• Link text - Enter the text for the hyperlink that links to the informational page.
  
  
• Open link in new tab - Check this box if you want the page to open in a new tab.

'Enter URL' Page Type

If you select ENTER URL as the page type, you will instead see the following settings:

• Title - Enter the title text for the info box.
  
  
• Image - Click inside the dashed-line box to upload an image from your computer (if desired).
• Text - Use this field to specify what text (if any) you want to display below the title.
  
  
• Link text - Enter the text for the hyperlink that links to the collection page.
  
  
• Link URL - Enter the full URL (including the https:// prefix) of the page you want to link to.
• Open link in new tab - Check this box if you want the linked-to page to open in a new tab.

At the very bottom of this section, you'll see a red 'Delete' button. Only click this button if you want to delete the hotspot from the shoppable image.

To add another hotspot to the shoppable image, click the 'Add New Hotspot' button at the very bottom of the left settings box (below the 'Advanced Settings' section right next to the green 'Save' button).

Advanced Settings

As noted above, the most basic settings for the section are located in the General Settings section above (which you've already configured). This 'Advanced Settings' section contains additional settings for further customizing the look of the section/block, as follows:

• Side heading font size - Use the slider to choose your desired font size for the side heading (minimum of 14px and maximum of 64px).
  
  
• Side heading alignment - Use the dropdown to choose whether you want the side heading to be left- or center-aligned.
  
  
• Button text color - Use the color selector tool to choose the color of the button text.
  
  
• Button border radius - Use the slider to choose the border radius for the corners of the button. The higher the number you choose, the more rounded the corners will be.
  
  
• Button alignment - Use the dropdown to choose whether you want the button to be left- or center-aligned.
  
  
• Hotspot size - Use the dropdown to choose the size of the hotspot circles overlaid on the image: small, medium or large.
  
  
• Hotspot color - Use the color selector tool to choose the color of the hotspots.
  
  
• Hotspot info box size - Use the dropdown to choose whether you want the product info boxes to be small, medium or large.

Once you've configured all of the settings and added all of the hotspots you want to appear in the image, click the green 'Save' button at the bottom of the left settings box.

Add the 'Shoppable Image' Section/Block to a Page in Your Theme