# How do I target by query string parameters in Shopify using theme studio?

**URL:** <https://forum.builder.io/t/how-do-i-target-by-query-string-parameters-in-shopify-using-theme-studio/391>\
**Category:** Technical Questions\
**Created:** [January 12, 2021, 8:42pm UTC](https://forum.builder.io/t/how-do-i-target-by-query-string-parameters-in-shopify-using-theme-studio/391 "2021-01-12T20:42:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\
**Post date:** [January 12, 2021, 8:42pm UTC](https://forum.builder.io/t/how-do-i-target-by-query-string-parameters-in-shopify-using-theme-studio/391/1 "2021-01-12T20:42:46Z")

</div>

Usually the need to target content based on query parameters (e.g. `utm_campaign`) arises when showing specific content to users that come in via paid advertising. There are few different ways to show different content to people depending on what ads they see.

1. **Use a custom dropzone with client side only setting**  
Builder uses server side targeting to make sure your content loads as fast as possible, as well as give you access to shopify targeting data (e.g. customers, products, collections, etc.). However, query parameters are not available when rendering on the shopify sesrver. To get around this, you can create a [custom dropzone](https://www.builder.io/c/docs/custom-dropzones) model and then set it to only render client side. When creating the model, click on “Show more options” and select the “Client side only” option. Note that this approach will make it so you can no longer use the built in Shopify targeting:

 ![Screen Shot 2021-01-14 at 12.14.52 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/5bd5a69a94eddb28ea8b855debd94d4a76c32ff6.png)

The next Step is to add a custom attribute to your organization so that we can pass the query param to the Builder component. Visit the [organization settings page in Builder](https://builder.io/account/organization), click to edit “custom targeting attributes.” Add in a custom targeting attribute called `queryParam` so that we can target off of any query parameter we want.

 ![Screen Shot 2021-01-14 at 4.13.58 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/a18d05f9f461ba9dfbd593ebd8cc23673b5c2c8b.png)

Next, you will need to paste the following piece of code wherever you put the custom dropzone in your shopify theme. This code will pass the correct targeting information to Builder.

```
<script>
  window.builderWcLoadCallbacks = [function (context) {
    return context.builder.setUserAttributes({
      /* Add your targeting attributes for Builder
       * to dynamically load content to the web component above
       */
      queryParam: window.location.search
    });
  }];
</script>

```

Now you will be able to select the Query param attribute when targeting content:

 ![Screen Shot 2021-01-14 at 4.21.08 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/790e275e146400df131bea04ffab46b6626fbe84.jpeg)

1. **Use different pages**  
If you can control what page people visit after clicking a particular ad, then the easiest way to control what content they view is to create different content on different urls. In other words, create specific landing pages for specific ads. This approach will work for `/pages` landing pages, but will not work if you are sending people to product or collection pages.

2. **Use alternate views**  
You can create alternate views for theme pages within Builder. These alternate views allow you to tailor content specifically for people that visit the page and have the parameter `?view=some-view` in the URL. If you have control over what page a user is visiting once they click an ad, then you can include the `view` parameter in that URL and they will see the correct content. For more information on alternate views, read [this doc](https://www.builder.io/c/docs/shopify-faq#alternate).

3. **Use state bindings**  
If you are creating ads in a more dynamic way, or only are changing a few items on a page depending on the query params present in the URL, then using `state` [bindings](https://www.builder.io/c/docs/guides/state-and-actions) in Builder are a fantastic way to go. Builder automatically puts information about the current URL on the `state` object, and it can be accessed by referencing `state.location`.
