Product Tags Widget¶
Place interactive tags on top of any image and link each one to a product. When a shopper clicks a tag, a small product card pops up with the price, rating, an add-to-cart button, and a link to the full product page. It is perfect for "shop the look" lifestyle photos.
Page Builder name: Product Tags PapaThemes Dinosaur — Version: 1.0.2
Add it to your page¶
- In your BigCommerce control panel, open Storefront → Page Builder (or edit a page and open Page Builder).
- Find the Product Tags PapaThemes Dinosaur widget in the widget panel on the left.
- Drag it onto your page. A sample image with one product tag appears.
- Select the widget to open its settings, upload your own image, and set up your tags.
Settings¶
Settings¶
This tab controls the image and the look of the pop-up product card.
General¶
| Option | What it does | Default |
|---|---|---|
| Image | The background image you want to tag. Upload or choose one from the image manager. | Sample image |
| Width | Image width in pixels. | 1200px |
| Height | Image height in pixels. | 600px |
| Display in a container DIV | Keeps the image within your theme's centered content area instead of full width. | On |
| Image fit | Fill to box crops the image to fill the area; Fit to box shows the whole image inside the area. | Fit to box |
| Lazyload image | Loads the image only as it scrolls into view, which speeds up the page. | On |
| Background Color | Background color of the add-to-cart button on the product card. | #C72E2E |
| Background Hover Color | Add-to-cart button background color when hovered. | #D85A5A |
| Icon Color | Color of the icon on the add-to-cart button. | #FFFFFF |
| Icon Hover Color | Add-to-cart icon color when hovered. | #FFFFFF |
Products (repeatable)¶
Each product tag is one entry in this repeatable group. The widget starts with one tag.
- Add a tag with the add button at the bottom of the Products list.
- Remove a tag using the delete (trash) icon on that entry.
- Reorder tags by dragging them in the list.
Each tag has a Content tab split into the sections below.
Content¶
| Option | What it does | Default |
|---|---|---|
| Product SKU | The SKU of the product this tag links to. The card pulls the product's name, price, and rating automatically. | empty |
| Tag Icon | The marker style: Tag, Circle, Choose Image (upload your own marker), or Custom HTML/SVG (paste your own marker design). | Tag |
| Icon image | The image used as the marker (shown only when Tag Icon is "Choose Image"). | empty |
| Icon SVG Code | Your own marker design (shown only when Tag Icon is "Custom HTML/SVG"). | empty |
| Tag Icon Color | Marker color (shown for Tag and Circle styles). | #67DAC5 |
| Wave Color | Color of the animated ripple that pulses around the marker to draw attention. | semi-transparent red |
| Position - X | Horizontal position of the tag on the image, from 0% (left) to 100% (right). | 50% |
| Position - Y | Vertical position of the tag on the image, from 0% (top) to 100% (bottom). | 50% |
Desktop¶
| Option | What it does | Default |
|---|---|---|
| Width | Marker image width on desktop (shown when Tag Icon is "Choose Image"). | 50px |
| Height | Marker image height on desktop (shown when Tag Icon is "Choose Image"). | 50px |
| Icon Size | Marker size on desktop (shown for Tag and Circle styles). | 26px |
| Wave Size | How far the animated ripple spreads on desktop. | 80px |
Mobile¶
| Option | What it does | Default |
|---|---|---|
| Width | Marker image width on mobile (shown when Tag Icon is "Choose Image"). | 24px |
| Height | Marker image height on mobile (shown when Tag Icon is "Choose Image"). | 24px |
| Icon Size | Marker size on mobile (shown for Tag and Circle styles). | 26px |
| Wave Size | How far the animated ripple spreads on mobile. | 80px |
Tips¶
Tip
The fastest way to place a tag is in edit mode: click the "Set tag position" button on the image, then click the spot where you want the tag. The Position X and Y values update for you. You can also type exact percentages in the settings.
- Make sure each Product SKU matches a real product in your catalog so the card can show its price and rating.
- Use a clear, high-quality image and keep it to about 5–6 tags so the layout stays uncluttered.
- Match the Tag Icon Color and Wave Color to your brand for a polished look.
- Use the separate Desktop and Mobile sizes to keep markers tappable on phones without overpowering the image on desktop.