Sampo
documentation

Dynamic Hotspots with Metaobjects

We recommend using metaobjects for Product Hotspots. By following this guide you can add the Hotspot labels and Hotspot content via Metaobject entries. 

Adding a Product Hotspot Metaobject

  1. In the Shopify Admin navigate to Content > Metaobjects 
  2. Click "Add definition" 


  3. Define the metaobject by adding the Metaobject name "Product Hotspot" and all the necessary fields as described below 


Add the following fields for the Product Hotspot metaobject:

  • Title:
    • Select field type: Single line text field
    • Add name: "Title"
    • Select "Use this field as display name"
    • Note: This title is shown in the Admin side of the store, not in the Online Store
  • Hotspot Label:
    • Select field type: Single line text field
    • Add name: "Hotspot label"

  • Popup text content:
    • Select field type: Rich text
    • Add name: "Popup text content"

  • Image:
    • Select field type: File
    • Add name: "Image"
    • Under "Validations" choose "Accept specific file types" > "Images"

  • Video:
    • Select filed type: File
    • Add name: "Video"
    • Under "Validations" choose "Accept specific file types" > "Videos"

4. Remember to Save the metaobject

Product Hotspot Metaobject with the necessary fields


Adding entries to the Product Hotspot metaobject

  1. Navigate to Content > Metaobjects > Product Hotspot
  2. Click "Add entry"
  3. Add a title for the entry, e.g. "Material: Organic Cotton"
    - Note: this won't be shown in the Online store, it's for the Admin side only
  4. Add Hotspot Label, e.g. "Organic Cotton"
  5. Add Popup text content related to this topic
  6. Add an image or Video

Add entries for different aspects of your store's products that you want to highlight via Hotspots.


Using the Product metafield to link Hotspot entries to products

Define the Hotspot metafield for Products

  1. Navigate to Settings > Custom data
  2. Under "Metafield definitions" select "Products" 
  3. Click "Add definition"
  4. Add a name: "Hotspots" (and a description)
  5. Click "Select type" and choose "Metaobject"
  6. Select the appropriate Metaobject Reference -> Product Hotspot
  7. Select "List of entries" 
  8. Remember to Save the metafield definition


Select entries for the Hotspot metafield

  1. Navigate to Products and Select the product you want to add Hotspot content to
    - Alternatively, select multiple products and use the Bulk edit feature 

  2. Find Product Metafields > Hotspot and select the appropriate entry by clicking the metafield 
  3. Remember to Save your changes



Connect the Hotspot to the Product template

  1. In the Theme editor, select the Product template and find/ add "Hotspot" -block
  2. In the "Hotspot" - block Choose "Connect dynamic source" and find "Hotspots"
  3. Now all the products with Hotspot metafield entries will get the content to Hotspots based on those entries

 


Positioning the Hotspots on the Product image

You might need different hotspot positions for different type of products. One option is to create separate product templates, however, we recommend using a product metafield as a dynamic source for the "Hotspots position array" found in the "Hotspot"-block's Advanced settings. Follow these steps to enable dynamic positioning via product metafield. 

Define the Hotspot position metafield 

  1. Navigate to Settings > Custom data
  2. Under "Metafield definitions", select "Products" 
  3. Click "Add definition"
  4. Add a name "Hotspot position" (and a description, see example below)
  5. Select type: "Single line text"
  6. Select "One value"


Define Hotspot Positions for Products

Products using the same product template, where Hotspot positions are defined with a dynamic source, must have position definitions in the Hotspot Position metafield.

  1. Add position definitions to each product's Hotspot position metafield following this example where three Hotspots are defined: 
    "left,10,10|left,20,65|right,75,75"
    - The first value specifies the text position (right/left) 
    - the second value specifies the horizontal position
    - the third value specifies the vertical position 
    - Definitions for each Hotspot are separated with "|" -character. 
  2. When all products have position values in the Hotspot position metafield, navigate to the Theme editor, select Product template and Hotspots block. Then connect the dynamic source in the Advanced settings