# Displaying unique content for product variants

**URL:** <https://forum.builder.io/t/displaying-unique-content-for-product-variants/1365>\
**Category:** Shopify\
**Tags:** shopify\
**Created:** [November 19, 2021, 10:18pm UTC](https://forum.builder.io/t/displaying-unique-content-for-product-variants/1365 "2021-11-19T22:18:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [November 19, 2021, 10:18pm UTC](https://forum.builder.io/t/displaying-unique-content-for-product-variants/1365/1 "2021-11-19T22:18:38Z")

</div>

If you’ve added a Builder section to your existing product page, you can follow these steps to display unique content per variant:

1. After you’ve installed a [custom section](https://www.builder.io/c/docs/custom-dropzones) onto your product page (or are creating a product page section for a [2.0 theme](https://www.builder.io/c/docs/shopify/sections-everywhere)) you can create an entry in this section model and add the unique content for each variation onto the page.

2. Select the content that you want to show for the first variation. Open the data tab and select “+ new binding”. Choose `ShowIf` and paste `state.currentVariant === 'variant-id-here'` for the binding. You will need to manually enter in the variant id into this binding for each piece of content. Repeat this step for each piece of content that should display for the different variants.

3. In the content JS section of the data tab, paste this code:

```auto
var firstTimeVariant = new URL(firstTimeUrl).searchParams.get("variant");
if (firstTimeVariant) {
  state.currentVariant = firstTimeVariant;
} else {
  state.currentVariant = "default-product-variant-id-here";
}
window.addEventListener("change", function () {
  var currentPageUrl = document.URL;
  var url = new URL(currentPageUrl);
  var isVariantUrl = url.searchParams.get("variant");
  if (isVariantUrl && firstTimeUrl != currentPageUrl) {
    firstTimeUrl = currentPageUrl;
    state.currentVariant = isVariantUrl;
  }
});

```

1. Once you publish the entry and navigate to the live product page, you will see the content change depending on the selected variant. Since you are hard coding the variant id’s, you will want to add [product targeting](https://www.builder.io/c/docs/targeting-builder-shopify-app) to this entry so it only displays for the product that contains these variants.