Product Flags
The Product Flags widget is a powerful visual tool designed to grab customer attention instantly while they browse your store. By displaying eye-catching labels—such as "Best Seller," "Low Stock," "New Arrival," or "Organic"—directly on your product cards, you can create urgency, highlight key selling points, and drive higher click-through rates.
Zone Availability: Webpage
Key Features
Visual Urgency: Instantly highlight products with tags like "Limited Stock" or "Trending."
Flexible Logic: Assign flags manually, by collection, or via product feeds.
Customization: Fully control the text, colors, position, and design of the flags to match your brand.
Multiple Flags: Support for displaying multiple flags per product to convey more information.
Configuration Options
Option | Description |
Trigger Logic | Choose products manually, via collections, or feeds to determine which items display flags. |
Design Styles | Select from preset flag styles or upload your own custom designs. |
Text & Color | Customize the flag label text, background colors, and font styles. |
Positioning | Adjust where the flag appears on the product card (e.g., top-left, top-right). |
Follow these steps to create and publish your Product Flags widget.
Phase 1: Create the Widget
Navigate to the Widgets section in your Dynamatic dashboard.
Click (+) Create Widget.
Enter a Widget Title (e.g., "Best Seller Flags") and an optional Short Description.
In the template search bar, type "Product Flags".
Select the Product Flags template and click Next.
Phase 2: Customize Content & Logic
Once inside the editor, you will see three main tabs: Content, Style, and Advance.
1. Content Tab
Trigger Products: Choose Manual, Collection, or Feeds to select which products will carry the flag.
General Settings: Configure the specific label text (e.g., "50% OFF", "Hot").
Add/Remove: Use the manual selector to pick specific items if you aren't using dynamic rules.
2. Style Tab
Customize the visual appearance to match your theme.
Layout: Adjust padding, border radius, and alignment.
Colors: Set the Background Color and Font Color for the flag.
Typography: Adjust font size and weight.
3. Advanced Tab
Device Targeting: Choose to hide/show the widget on Mobile, Tablet, or Desktop.
Custom CSS: Add specific CSS code here for advanced styling requirements.
Deploying to Your Store (Campaign & Zone Setup)
Because this is a Webpage widget, it requires a Campaign and a Zone ID to render correctly on your Shopify theme.
1. Create a Campaign
Go to the Campaigns tab in the dashboard.
Create a new campaign or edit an existing one.
Add Experience: Select your newly created "Product Flags" widget.
Targeting: Ensure the correct Audience and Zone are selected.
2. Install on Shopify Theme
Go to Placements > Zones in Dynamatic and copy the Zone ID for your Webpage zone.
Open your Shopify Admin > Online Store > Themes.
Click Customize on your active theme.
Navigate to the page where you want the flags to appear (e.g., Collection Page or Home Page).
In the theme editor sidebar, click Add Block or Add Section (depending on your theme structure).
Select Dynamatic Zone (App Block).
Paste the Zone ID you copied earlier into the App Block settings.
Save your theme settings.
Publishing Your Configured Widget Live
This following documentation section provides the final, detailed steps required to publish your fully configured widget and make it visible to customers on your live storefront.
01. How to successfully setup a widget
02. Understanding and Creating Audiences
03. Creating Placements and Zones
05. Displaying Your Widgets on the Storefront
Limitations & Troubleshooting
Clutter: Avoid using too many flags on a single product, as it may cover the product image or confuse the customer.
Visibility Issue: If the widget is not appearing on the webpage:
Ensure the Campaign status is set to Active.
Verify that the Zone ID pasted in the Shopify Theme Editor matches the Zone ID in Dynamatic.
Check that the product being viewed is included in the Trigger Products list.
Not sure where to start? Here are three powerful strategies to get the most out of Product Flags:
Use Case 1: The "FOMO" Generator (Fear Of Missing Out)
Goal: Clear out low-inventory items quickly by creating a sense of urgency.
The Setup: Create a "Low Stock" flag (e.g., "🔥 Only a Few Left!") and assign it to products with inventory lower than 10 units.
The Result: When customers see that an item is running out, they are psychologically pushed to make a purchase decision faster to avoid missing out.
Use Case 2: The "Trust & Validation" Booster
Goal: Help undecided customers choose products confidently.
The Setup: Create a "Social Proof" flag (e.g., "🏆 Best Seller" or "⭐ Staff Pick") and manually assign it to your highest-converting or highest-rated items.
The Result: New visitors who don't know what to buy will gravitate toward these flagged items because they feel "safe" and validated by other customers' choices.
Use Case 3: The "Fresh Drop" Hype
Goal: Draw attention to new inventory for returning customers.
The Setup: Create a "New Arrival" flag (e.g., "✨ Just Dropped" or "🆕 New") and trigger it on products added to the store in the last 30 days.
The Result: Returning customers often scan for what's new. These bright flags break the visual pattern of the collection page and guide them straight to your latest (and often full-price) items.