Change Product Description for Different Product Variant

[epoll24]

Hi I'm trying to change the description text for different variants of my product. I have two different variants but each variant includes different items so I want to be able to have different text in the description/what's included text. My website is PulseDevice.com and I'm using Impact Theme. 

 

[PaulNewton]

To have dynamic descriptions per variant you will either need to pay for an app or customize your theme.

Though some themes may re-render the product-information section when a variant changes which can let you use metafields directly to achieve this.

In the admin for the content try making a test variant metafield definition holding a test description.

Then in the theme reference the variant metafield with a custom liquid block i.e. {{ product.selected_variant.metafields.content.description }}

Though in most themes this info wont update when the variant is changed , so theyneed both liquid and javascript customizations.

If you need this customization built for you then contact me by my email for services, or DM me(slower).
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

[tim]

It could be easier to split your product into 2 separate products and implement product variations as per https://support.maestrooo.com/article/307-product-creating-product-variations-that-link-to-different... 

As seen in demo store at https://impact-theme-sound.myshopify.com/products/mw07-plus-atomobili-lamborghini-polished-black-mat... 

Because these would be separate products you'd be able to configure their product page templates with different texts.

[EasifyApps]

Hi @epoll24,

The Easify Product Options app offers a couple of solutions that might interest you 🤗:

1. Utilize the app's Advanced conditional logic to display different descriptions based on the Shopify variants selected by customers. You can create the descriptions using the Paragraph option type. Here's a sample:

Simple settings:

1. Alternatively, you can split your existing products into 2 separate ones, each with its own description. Then, leverage the Option URL feature in the app to establish cross-product links between them. This way, on the product page, it appears as if customers are switching between regular Shopify variants, but in reality, they're transitioning between different products. Here's an example:

Let me know which approach you prefer, and I can guide you through the setup. Alternatively, reach out to the Easify team via the in-app live chat for assistance.

[soulchild37]

Hi Epoll24,

You can utilize the metafield (Custom Data) feature, to store the description unique to each of the product variants.

You can go to your store Settings > Custom Data > Variants, and create a custom definition, with name "Variant Description" ,  Namespace and key "custom.variant_description", set the type to "Rich Text" .

After creating this definition, you can go to your product > select the variant, and scroll to metafield sections, and find the "Variant Description" , and you can enter the description you want for that variant.

After this, you can go to your store theme > Customize, and navigate to the product page template, and click "Add block" under the "Product information" section, and select "Custom Liquid". Next, you can click into this "Custom Liquid" block, and paste the code below : 

{% for variant in product.variants %}
<div class="yagi-variant-description" data-variant-id="{{ variant.id }}" style="display:none;">
  {{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
{% endfor %}

<script>
function yagiHideAllVariantDescriptionExcept(variant){
  document.querySelectorAll('.yagi-variant-description').forEach(el => {
    el.style.display = 'none';
  });

  const descriptionEl = document.querySelector(`.yagi-variant-description[data-variant-id="${variant}"]`);
  if (descriptionEl){ descriptionEl.style.display = 'block'; }
}

const queryString = location.search;
const urlParams = new URLSearchParams(queryString);
var variantId = '{{ product.variants.first.id }}';

if(urlParams.get('variant')){
  variantId = urlParams.get('variant');
}

yagiHideAllVariantDescriptionExcept(variantId);

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='hidden'].product-variant-id").addEventListener('change', yagiVariantChanged);
});

function yagiVariantChanged() {
  if (document.querySelector('.product-variant-id')?.value !== variantId) {
    variantId = document.querySelector('.product-variant-id')?.value;

    if(!variantId) { variantId == '{{ product.variants.first.id }}' }
    yagiHideAllVariantDescriptionExcept(variantId);
  }
}
</script>

Click "Save", then go to your online store, and navigate to the product , you should see the description show / hide based on the variant you have selected.

If you would like to follow a step-by-step guide with screenshots for this, you can follow this guide I wrote here : https://yagisoftware.com/articles/how-to-set-different-description-for-each-product-variant-in-shopi... 

Hope this can help! 

Regards,

Axel Kee

[soulchild37]

Hello Epoll24,

You can utilize the metafield (Custom Data) feature in the Store Settings, to save the description unique to each product variants.

You can go to your store Settings > Custom Data > Variants, and create a custom definition, with name "Variant Description" ,  Namespace and key "custom.variant_description", set the type to "Rich Text" .

After creating this definition, you can go to your product > select the variant, and scroll to metafield sections, and find the "Variant Description" , and you can enter the description you want for that variant.

After this, you can go to your store theme > Customize, and navigate to the product page template, and click "Add block" under the "Product information" section, and select "Custom Liquid". Next, you can click into this "Custom Liquid" block, and paste the code below : 

{% for variant in product.variants %}
<div class="yagi-variant-description" data-variant-id="{{ variant.id }}" style="display:none;">
  {{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
{% endfor %}

<script>
function yagiHideAllVariantDescriptionExcept(variant){
  document.querySelectorAll('.yagi-variant-description').forEach(el => {
    el.style.display = 'none';
  });

  const descriptionEl = document.querySelector(`.yagi-variant-description[data-variant-id="${variant}"]`);
  if (descriptionEl){ descriptionEl.style.display = 'block'; }
}

const queryString = location.search;
const urlParams = new URLSearchParams(queryString);
var variantId = '{{ product.variants.first.id }}';

if(urlParams.get('variant')){
  variantId = urlParams.get('variant');
}

yagiHideAllVariantDescriptionExcept(variantId);

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='hidden'].product-variant-id").addEventListener('change', yagiVariantChanged);
});

function yagiVariantChanged() {
  if (document.querySelector('.product-variant-id')?.value !== variantId) {
    variantId = document.querySelector('.product-variant-id')?.value;

    if(!variantId) { variantId == '{{ product.variants.first.id }}' }
    yagiHideAllVariantDescriptionExcept(variantId);
  }
}
</script>

Click "Save", then go to your online store, and navigate to the product , you should see the description show / hide based on the variant you have selected.

If you would like to follow a step-by-step guide with screenshots for this, you can follow this guide I wrote here : https://yagisoftware.com/articles/how-to-set-different-description-for-each-product-variant-in-shopi... 

Hope this can help! 

Regards,

Axel Kee

[jackholeeen]

Hi good day, i have a question. I want to add another description by using this variation. yagi-variant-key_products  variant.metafields.custom.variant_key-products
How to do it by using this code. thank you so much

{% for variant in product.variants %}
<div class="yagi-variant-description" data-variant-id="{{ variant.id }}" style="display:none;">
  {{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
{% endfor %}

<script>
function yagiHideAllVariantDescriptionExcept(variant){
  document.querySelectorAll('.yagi-variant-description').forEach(el => {
    el.style.display = 'none';
  });

  const descriptionEl = document.querySelector(`.yagi-variant-description[data-variant-id="${variant}"]`);
  if (descriptionEl){ descriptionEl.style.display = 'block'; }
}

const queryString = location.search;
const urlParams = new URLSearchParams(queryString);
var variantId = '{{ product.variants.first.id }}';

if(urlParams.get('variant')){
  variantId = urlParams.get('variant');
}

yagiHideAllVariantDescriptionExcept(variantId);

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='hidden'].product-variant-id").addEventListener('change', yagiVariantChanged);
});

function yagiVariantChanged() {
  if (document.querySelector('.product-variant-id')?.value !== variantId) {
    variantId = document.querySelector('.product-variant-id')?.value;

    if(!variantId) { variantId == '{{ product.variants.first.id }}' }
    yagiHideAllVariantDescriptionExcept(variantId);
  }
}
</script>