Displaying unique content for product variants

Technical Questions Shopify
1

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 onto your product page (or are creating a product page section for a 2.0 theme) 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:

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 to this entry so it only displays for the product that contains these variants.