Made in Builder.io

Join us for an AI launch event by

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

growth plans

Targeting content for specific audiences can help you drive customer acquisition and retention. By showing specific content to specific visitors, you can better serve your customers' needs.

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

All plans include the URL targeting attribute, while Growth and Enterprise include Device as well. Additionally, for Growth plans and higher you can add your own Custom Targeting Attributes attributes.

Shopify is the canonical example of an integration that provides many more targeting attributes, but Builder has e-commerce plugins for many different platforms, and they provide custom targeting attributes as well.

This video provides an overview of how targeting works.

In Builder you can target specific pieces of content to customers based on attributes such as whether they have purchased a product from a certain collection, which product page they are on, or whether they have a product with a specific tag in their cart.

👉 Tip: For more information on learning how to target based on query parameters, check out this Builder Forum discussion.

To use targeting, click the Targeting icon at the top of your Builder page.

In the Targeting dialog, click +Target, and choose a property from the dropdown menu.

For out-of-the-box implementations, the options you see in the dropdown are Device and URL path.

For Shopify, the options are shown below and other plugins provide similar attributes. This topic concentrates on default and Shopify implementations.

Select each tab below for the targeting attributes available to you.

Default Built-in Attributes

Shopify Custom Attributes

Out of the box, Builder allows you to target based on device (desktop, tablet, mobile) or specific URL path. But you can take that a step further by setting up custom targeting in Growth plans and greater.


When you choose Device or URL path, you can

Once you've chosen a targeting attribute, when a user visits the page you've set the attribute on and meets the targeting criteria, the content will be displayed.

The pages in your Builder Space are listed in the order in which they will be tested against. Your alternate pages for a target condition all exist at the same URL. So the request for the URL comes in and Builder goes down the list of pages that exist at that URL. The first one meeting the targeting condition you set is the version that will be shown to that user for that request/visit.

Note the screenshot below. There are four versions of the homepage. They have different names for the purposes of your library and they will have different content, but they are all at the same URL.

If home2 has the Device targeting attribute set to Mobile, and your user visits yoursite.com/home from their phone, they get the content from home2.

You might set the page called "home" to the Desktop device, so desktop users will see that page. If none of the pages have a targeting attribute of Tablet, then whichever page at /home that has no device targeting attribute set is the one that will display. It's a best practice to be sure all your conditions have a fall-back 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 Growth or Enterprise plan, you can customize targeting to meet your specific needs. For more information, see Custom Targeting Attributes.

  • 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.

Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Features

Pricing

What's New

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Headless CMS: Visual Guide

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Use Cases

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms