User Guide

Search limit to:






Product Components

by Admin on Oct 03, 2025

1. What is Product Components?

The Product Components section allows you to showcase a product image and highlight its key features using interactive hotspots. These hotspots can display text and/or images, offering customers a detailed view of specific product components.

2. Section Components

Section

Highlight specific product details interactively with hotspots.

Available block

Add a hotspot with an image/icon and text to emphasize product features.

3. Location & Setup

  1. Go to "Online Store" > "Themes" > "Customize".
  2. Select where you want to place it (on Homepage or Collection page).
  3. Click “Add Section”.
  4. Search for Product Components.
  5. Click on it to add.

4. Highlight features

  • Customizable Image Source: Replace the product's default image with a custom upload or dynamic metafield.
  • Interactive Hotspots: Add up to 5 hotspots to highlight product components with text and/or images.
  • Hotspot Placement: Precisely position hotspots directly on the product image.
  • Styling Options: Customize colors for hotspots and buttons to match your brand.
  • Hover Content Display: Reveal detailed information when customers hover over a hotspot.

5. Common Use Cases

🤔 How to set up the Product Components section?

Don’t know where to start with your Product components section? Just do these basic things:

STEP 1: Add the section & blocks.

  • Add a Product components section.
  • By default, your section has 1 Component block.
  • Click "Add block" to add more blocks or delete if you don’t need image hotspots.

STEP 2: Add a product image to the section

In the Product components section, go to Product group, then you can choose to:

  • Select a Product to show its image.
  • or Upload a Custom image (the recommended ratio is 16:9).

If you do both, only the Custom image will be shown.

STEP 3: Add the image hotspot blocks

Each Component block represents an image hotspot, you can add up to 5 blocks. Then click on 1 block to set up the Position, Content, and Media.

If you need more detailed guidance, read the use case about How to set up the image hotspots for the Product components.

STEP 4: Adjust the content outside the image

Go back to the Product components section, and you can modify the content of the Heading, Subheading, Text, and Button. Leave any field blank if you don’t need that element.

STEP 5: Click “Save” when done.

 

🤔 How to set up the image hotspots for the Product Components?

STEP 1: Add Component blocks (each = 1 hotspot, max 5).

STEP 2: Adjust hotspot appearance (icon, position & color).

Right in the Component block setting panel, under the Hotspot setting group, you can:

  • Choose the Hotspot icon from the list.
  • Adjust the position using Horizontal position and Vertical position.
  • Click on the Product Components section > Colors> and change the Hotspot color.

STEP 3: Adjust the inside look of the hotspots

When users click on a hotspot, a small tab will appear, let’s customize what you want to show in this tab:

Group Config name & Purpose
Media

Image: Upload a small image to show on top of the tab.

Icon: Choose an icon instead of an image.

Custom icon SVG: Type in an SVG link.

Media style: Choose Square or Round.
Content

Heading: Title for the tab.

Text: Description text.

Content alignment: Adjust alignment for heading and description.

STEP 4: Adjust the content outside the image

Go back to the Product components section, and you can modify the content of the Heading, Subheading, Text, and Button. Leave any field blank if you don’t need that element.

STEP 5: Click “Save”.

 

🤔 What other customization options can you give your Product Components?

For the whole Product Components section

✨ Change color scheme:

Click on the Product Components section, and choose the overall scheme you want to use in both light and dark mode in the Color schema.

✨ Change the heading size:

Click on the Product Components section, and choose the Heading size to be Small, Medium, or Large.

✨ Change the Heading tag (for SEO purposes)

Click on the Product Components section, find and choose the Heading tag from the list.

✨Change the product image’s position 

Click on the Product Components section, find Layout, and choose the Image position to be on Top (before text) or Bottom (after text).

✨ Change the content alignment

Click on the Product Components section, find Layout, and choose the Content alignment to be Left, Right, or Center.

✨ Change the section width, add padding, or add a divider

Click on the Product Components section, scroll down to the Section layout group, and you will be able to change those settings.

Need help? Contact our support team at Omni Themes Support.