Changing product description upon variant selection

New Member
1 0 0

Hello, I'm new to Shopify, but have some experience with web development and programming. I'm trying to write a small script to change a product's description upon selecting a variant. I found this tutorial:
https://community.shopify.com/c/Shopify-Design/Demo-change-description-in-product-with-different-var...

 

Which as a solution makes sense to me. Grab the product ID, and then use that ID to determine which description is displayed, while the rest remain hidden using some Jscript and CSS.

 

The part that confuses me is that my callback hook for variants in the theme I'm using does not match the one from the tutorial. This theme has the callback in its own "product-variants-selector.liquid" file instead of being nested in the product.liquid file. I know enough of the syntax to roughly understand what it's doing, but not enough to adapt the code to match this hook.

 

 

<script>
  var initializeProduct{{ product.id }}{% if unique_product_discr %}_{{ unique_product_discr }}{% endif %} = function(selector, context) {
    $(selector).variantSelector({
      context: context,
      productDiscr: {% if unique_product_discr %}{{ unique_product_discr }}{% else %}0{% endif %},
      productId: {{ product.id | json }},
      productJson: {{ product | json }},
      productAvailable: {% if product.available %}true{% else %}false{% endif %},
      productVariantsSize: {{ product.variants.size }},
      productOptionsSize: {{ product.options.size }},
      productOptions: {{ product.options | json }},
      selectedVariantId: {{ product.selected_or_first_available_variant.id }}
    });
  };
</script>

I'm not just looking to solve this problem but to also better understand how this works so I can better solve problems like this in the future.

0 Likes
Tourist
17 0 0

Hey Cameron,

 

I'm at the same level as you, basic undestanding and trying to get the description to change on the minimal theme.

 

I found this https://community.shopify.com/c/Shopify-Design/Where-to-find-the-selectCallback-on-the-minimal-theme... which tells you that the selectcallback is in the theme.js

 

I have copied the code in there but it's still not working, so unfortunately, I currently don't have a solution either.

0 Likes