Watch our biggest AI launch event

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

enterprise plans

Targeting content for specific audiences can help you drive customer acquisition and retention.

You can target content based on attributes such as whether customers have purchased from a specific collection, their current product page, or if they have a product with a specific tag in their cart. These are just a few examples—there are endless possibilities for targeting.

To get the most out of this article, you should be familiar with the following:

Targeting options in Builder depend on your plan.

  • All plans come with the URL Path targeting attribute.
  • Pro and Enterprise plans offer both URL Path and Device targeting capabilities.
  • With Pro plans and above, can use your own Custom Targeting Attributes.
  • Builder provides e-commerce plugins for various platforms, each equipped with custom targeting attributes.

To use targeting:

  1. Open the content entry for which you'd like to configure targeting.
  2. Click the Targeting icon at the top of the Visual Editor.
  3. In the Targeting dialog, click +Target, and choose a property from the dropdown menu.

As an example, the following video shows targeting where the URL is /demo and the Device is mobile. This means this page is to be delivered when the device the visitor is using is a mobile device.

Targeting by device with SSR? When using SSR or SSG, and targeting by device—such as mobile, tablet, or desktop—you must reference the targeted device in userAttributes as in the following example:

userAttributes: {
    ...
  device: "mobile"
}

For more details on userAttributes, visit the userAttributes entry in the Content API documentation.

For a Next.js-specific example, refer to this example on GitHub for retrieving userAgent and device type server side.

The order of content entries in Builder determines how Builder evaluates and determines which content entry to deliver. Builder starts at the top of the list of entries at the specified URL and works its way down to find the entry to render.

For example, when you have multiple pages set up as alternatives for a specific targeting condition, they all share the same URL. When a user requests that URL, Builder checks each page in the list associated with that URL, starting at the top. The first page that meets the specified targeting condition is the version that is displayed to the user.

Consider three versions of a homepage; home, home 2, and home 3. Each has different content, but they are all at the same URL, as in the following:

  1. home 3, targeting mobile
  2. home 2, targeting desktop
  3. home (fallback), with no targeting
3 pages listed in Builder Content. In order, they are: Home 3, targeting mobile. Home 2 targeting tablet. And the last, Home (fallback) has no targeting. The URL for all of them is the same, a slash.

Here's how Builder determines which Page to deliver:

  • First, Builder considers all published Pages at the requested URL, /.
  • If home 3 has the Device targeting attribute set to Mobile, and your user visits yoursite.com from their phone, they get the content from home 3.
  • If home 2 targets Tablet, Builder delivers that Page to tablet users.
  • This example also has a fallback, home (fallback), just in case. It's a best practice to be sure all your conditions have a fallback Page in case none of the conditions are met.

When you configure targeting, you establish a condition about a user and then deliver the appropriate content to that user. For example, you might want a user on a mobile device to have a different UI from a user on a laptop. Targeting statements follow the below pattern:

  • Where condition + operator + value

Built-in conditions are:

  • Device
  • URL Path

Some examples of targeting statements are:

  • Where URL is /shoes
  • Where device is tablet

The operators available are:

  • is means equal to the value
  • is not means not the value. Available for conditions with one possible value; for example, a Boolean.
  • contains means the condition includes in it the string you specify for the value
  • starts with means the condition begins with the string you specify for the value
  • ends with means the condition ends with the string you specify for the value

Additionally, if you're on a Pro or Enterprise plan, you can customize targeting to meet your specific needs. For more information, read Custom Targeting Attributes.

The following video provides an in-depth introduction to targeting in Builder:

For more information targeting based on query parameters, visit this Builder Forum discussion.

With Shopify, Builder offers several ways to target content. For example, you can leverage your Shopify customer tags or if a user has specific items in their cart, you can display and even A/B test your content.

Depending on the type of theme page you're working on, such as a homepage, a collection page, or a product page, Builder populates additional targeting parameters specific to the theme page.

Homepage

Product page

Collection page

Cart page

  • By creating your own custom targeting you can define the parameters you want to target. You can learn how to create them in Custom Targeting Attributes. This article is developer-focused.
  • You can leverage targeting in a variety of ways for your store—check out the tutorial for how to create a product promotion targeted on specific product or collection pages.
  • Take your targeting a step further by scheduling your content and creating A/B tests to measure your page performance.
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences