Articles on: Announcement Bars & Banners

đŸŽ¯ Announcement Bar — Advanced Targeting Options

The Placement tab is where you control exactly who sees your announcement bar, where it appears, and when it goes live. Instead of showing the same message to every visitor on every page, you can create precise visibility rules that match your campaign goals.


Whether you want to greet returning VIPs, promote a sale only to visitors from Instagram, or schedule a holiday banner to appear automatically — the targeting system gives you fine-grained control without touching any code đŸŽ¯



âš ī¸ Before You Begin


To configure Advanced Targeting settings:


→ Open an existing announcement bar

→ Or create a new one first


Then click the Placement tab inside the editor.


â„šī¸ Some targeting options are hidden depending on the placement type you selected during creation. For example, Page Targeting is not shown for Cart or Checkout placements, and Customer Targeting is not available for Checkout placements. These conditional sections are called out below so you know exactly when to expect them.



📐 Display Position


This setting controls the physical location of the bar on the page.


Storefront Positions


Available when the bar is created for Storefront Page placement:


  • Top Push — Pushes the rest of the page content downward. The bar sits in the normal document flow.
  • Top Push (Sticky) — Stays fixed at the top of the viewport while the customer scrolls. The page content is still pushed down.
  • Top Overlap — Floats over the top of the page without pushing content down.
  • Top Overlap (Sticky) — Floats at the top and remains visible while scrolling.
  • Bottom Overlap (Sticky) — Appears at the bottom of the viewport and stays there while scrolling.
  • Manual — You control exactly where the bar appears using a code snippet or app block.


Cart Positions


Available when the bar is created for Cart Page or Cart Drawer placement:


  • Top of Cart — Inserts the bar at the top of the cart area.
  • Bottom of Cart — Inserts the bar at the bottom of the cart area.
  • Manual — Place it yourself using a custom code snippet.


Checkout Position


Available when the bar is created for Checkout Page placement (Shopify Plus only):


  • The bar renders as a custom block inside the checkout flow. Positioning is managed through the checkout UI extension settings.


Manual Placement Behavior


When Manual is selected:


  • The Page Targeting dropdown is automatically disabled and forced to Custom.


A code snippet is provided for you to paste into your theme:

\<div class="futureblink-announcement-block" id="{announcementId}"\>\</div\>


  • The bar will only render where this block is placed.



đŸŽ¯ Page Targeting


Page Targeting decides which pages the bar appears on. This section is hidden for Cart and Checkout placements since those are page-specific by design.


Available Options


  • Every page — Shows on all pages of your storefront.
  • Home page only — Shows only on the homepage.
  • All product pages — Shows on every product detail page.
  • Products in specific collections — Shows on product pages that belong to selected collections only.
  • When selected, a Select collections button appears so you can choose which collections qualify.
  • Specific products — Shows only on hand-picked product pages.
  • When selected, a Select products button appears so you can choose individual products.
  • All collection pages — Shows on every collection listing page.
  • Specific collections — Shows only on selected collection pages.
  • When selected, a Select collections button appears.


How It Works on the Storefront


The bar checks the current page type and URL path before rendering:


  • For specific products, the bar matches against the product ID.
  • For products in specific collections, the bar checks if the current product belongs to any of the selected collections.
  • For specific collections, the bar matches against the collection handle in the URL.



⏰ Scheduling


Scheduling lets you control when the bar goes live and when it stops automatically. If left unconfigured, the bar appears immediately after publishing and stays live until you manually unpublish it.


Start Time


  • Right now — The bar appears immediately after publishing.
  • Specific date — The bar stays hidden until the chosen date and time.
  • When selected, a Date Picker appears along with hour, minute, and AM/PM inputs.


End Time


  • Never — The bar stays live indefinitely.
  • Specific date — The bar automatically stops showing after the chosen date and time.
  • When selected, a Date Picker appears along with hour, minute, and AM/PM inputs.


Important Scheduling Behavior


  • If you set both a start and end time, the end must be after the start.
  • If you publish an announcement whose end date has already passed, the schedule is automatically cleared and the bar goes live immediately.
  • On the storefront, a scheduled bar is created in the DOM but hidden with display: none until the start time is reached. When the end time passes, it is automatically hidden again.


💡 Scheduling is perfect for flash sales, holiday campaigns, or time-limited announcements that you want to set up in advance.



đŸ‘Ĩ Customer Targeting


Customer Targeting lets you show or hide the bar based on who is viewing your store. This section is hidden for Checkout placements.


Visibility by Login Status


  • All customers — Show to everyone, whether logged in or not.
  • Logged in customers only — Hide the bar from guests.


Show Bar To


Controls which customer segment should see the bar:


  • All Customers — No restriction.
  • Specific tag — Only customers with a specific tag can see the bar.
  • When selected, a text field appears: Enter tags (comma-separated).
  • Example: VIP, wholesale, returning
  • Specific lifetime spent — Only customers who have spent a certain amount across all orders can see the bar.
  • When selected, a number input appears for the minimum lifetime spend.
  • The bar checks the customer's total_spent value from Shopify.


Hide Bar From


Controls which customer segment should not see the bar. Hide rules are evaluated before show rules.


  • No one — Don't hide from anyone.
  • Specific tag — Hide from customers with a specific tag.
  • When selected, a text field appears for comma-separated tags.
  • Specific lifetime spent — Hide from customers who have spent at least a certain amount.
  • When selected, a number input appears for the minimum lifetime spend.


How Customer Targeting Works


On the storefront, the app checks the current customer's data (injected via Liquid):


  1. If Logged in only is selected and the visitor is a guest → bar is hidden.
  2. Hide rules are checked first. If the customer matches any hide condition → bar is hidden.
  3. Show rules are checked next. If the customer matches any show condition → bar is displayed.
  4. If no conditions match, the bar defaults to hidden for safety.


âš ī¸ Important: Customer targeting requires the customer to be logged in for tag and spend-based rules. Guests will not match tag or spend conditions.



🌍 Geolocation Targeting


Geolocation Targeting controls which countries or regions can see the bar.


  • All world — Visible to every visitor regardless of location.
  • Specific countries — Only visitors from selected countries can see the bar.
  • When selected, a Select countries button becomes active.
  • Clicking it opens a modal with a searchable list of 246 countries.
  • Select the countries you want to include. Selected countries appear as a summary list below the button.


How Geolocation Works


The storefront detects the visitor's country using Shopify's /browsing_context_suggestions.json endpoint. The result is cached in the browser's sessionStorage under country_code so subsequent page loads don't repeat the request.


💡 Use this to run region-specific campaigns — for example, a "Free Shipping to the US" bar that only US visitors see.



🔗 UTM Source Targeting


UTM Targeting lets you show the bar only to visitors arriving from specific traffic sources. This is useful when you want to align messaging with a particular ad campaign or social platform.


This section is hidden for Checkout placements.


Enable UTM Filtering


Check the box "ONLY show to visitors who match UTM Source" to enable filtering.


âš ī¸ When enabled, visitors who arrive directly (without a UTM source) will not see the bar.


Available Platform Checkboxes


When enabled, the following checkboxes appear:


  • TikTok
  • Facebook
  • Instagram
  • Google
  • Pinterest
  • Twitter


â„šī¸ Facebook and Instagram are linked: selecting one automatically includes the other in the check.


Custom UTM Code


If you need more specific filtering:


  • Check Custom UTM_CODE to reveal a text input field.
  • Enter comma-separated key=value pairs.
  • Example: utm_medium=sales,utm_campaign=newsletter
  • The check is case-insensitive.


How UTM Targeting Works


The storefront reads the current URL's utm_source parameter:


  • If only platform checkboxes are used, the bar shows if the visitor's utm_source matches any selected platform.
  • If a custom UTM code is also provided, the bar shows if either the platform matches or all custom key-value pairs match the URL.


💡 Create a "Welcome Instagram Shoppers" bar that only appears when utm_source=instagram is present in the URL.



âąī¸ Time-on-Site Targeting


Time-on-Site Targeting controls how long a visitor must be on the page before the bar appears.


  • Always Show (Default) — The bar appears immediately when the page loads.
  • Show after a while — Delays the bar's appearance.
  • When selected, a Delay (in seconds) number input appears.
  • Accepts values from 1 to 300 seconds (5 minutes).


How Delay Works


On the storefront, the bar is created immediately, but starts with display: none. After the configured number of seconds, it becomes visible.


💡 A short delay (5–10 seconds) can feel less intrusive than an immediate popup, especially for announcement bars at the bottom of the page.



📱 Device Visibility


While device visibility is configured in the Design tab, it directly impacts targeting behavior and is worth mentioning here for completeness.


  • Desktop and Mobile — Visible on all devices.
  • Only Desktop — Hidden on screens 768px and narrower.
  • Only Mobile — Hidden on screens wider than 768px.


This is useful when you want different bars (or different messaging) for desktop versus mobile shoppers.



âš ī¸ Important Notes


  • Manual position disables Page Targeting because you control placement via a code snippet.
  • Checkout placement hides Customer Targeting and UTM Targeting because Shopify Checkout does not expose customer tags or UTM parameters to UI extensions in the same way.
  • Cart placement hides the Page Targeting dropdown because the bar is scoped to the cart area by design.
  • Geolocation uses the visitor's detected browsing country. VPNs or proxy services may cause unexpected results.
  • Customer tags and spend only work for logged-in customers. Guests are treated as unmatched for tag/spend rules.
  • UTM filtering will hide the bar from direct traffic. Make sure this is intentional before enabling.
  • Multiple targeting conditions work together with AND logic. The bar must pass all active targeting checks to be displayed.



💡 Examples & Use Cases


Example 1 — Region-Specific Free Shipping


  • Geolocation: Specific countries → United States, Canada
  • Page Targeting: Every page
  • Position: Top Push (Sticky)


Result: Only US and Canadian visitors see a persistent free shipping bar.


Example 2 — VIP Customer Reward


  • Customer Show: Specific tag → VIP
  • Customer Hide: No one
  • Page Targeting: Home page only


Result: Only logged-in customers tagged as VIP see the bar on the homepage.


Example 3 — Instagram Campaign Follow-Up


  • UTM Source: Instagram \+ Facebook
  • Page Targeting: All product pages
  • Position: Bottom Overlap (Sticky)


Result: Visitors arriving from Instagram or Facebook ads see a product-page-only bar with campaign-specific messaging.


Example 4 — Scheduled Flash Sale


  • Scheduling: Start → Friday 9:00 AM, End → Friday 11:59 PM
  • Page Targeting: Every page
  • Position: Top Push


Result: The bar automatically appears at 9 AM on Friday and disappears at midnight — no manual unpublishing needed.


Example 5 — Delayed Bottom Bar


  • Time-on-Site: Show after a while → 10 seconds
  • Position: Bottom Overlap (Sticky)
  • Page Targeting: All product pages


Result: After a visitor has browsed a product page for 10 seconds, a subtle bottom bar appears with a related offer.



🚀 Final Result


Once configured successfully, the Advanced Targeting settings help you show the right message to the right person at the right time.


With proper targeting in place:


✅ Bars appear only on pages where they are relevant

✅ Customers see messages tailored to their location, source, or segment

✅ Time-sensitive campaigns run automatically without manual intervention

✅ Guest and logged-in shoppers receive differentiated experiences

✅ Ad traffic receives consistent messaging from click to conversion

✅ Merchants avoid showing the same generic bar to every visitor


Using these targeting options effectively ensures every announcement bar feels intentional, timely, and relevant to the people who see it đŸŽ¯

Updated on: 03/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!