Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 12
In the ever-evolving world of e-commerce, providing an exceptional shopping experience for your customers is crucial. One effective way to achieve this is by customizing your product descriptions to match the chosen product variant. If you're using Dawn or the Shopify 2.0 Free themes, we have a game-changing solution for you. Introducing our revolutionary variant description code, designed to take your Shopify store to the next level.
Why Dynamic Variant Descriptions Matter: When shoppers visit your online store, they expect a seamless and informative browsing experience. Traditional product descriptions may not effectively convey the unique features and benefits of each variant, leaving customers guessing or feeling frustrated. Our variant description code changes all of that.
What you are buying:
- Variant description that change dynamically
- Using metafield to add the description in each variant
- Description can be placed anywhere in the product information
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
We need to create a variant metafield before we start with coding.
1. From your Admin Shopify store, click the Settings on your left hand bottom corner.
2. Click Custom data, and choose Variants, then click Add definitions
3.Follow the settings in the image below. then SAVE.
NOTE: Make sure that the Namespace and key are the same.
Add the variant description in your product
1. From your Admin Shopify store, go to Products
2. Choose the product you want to edit.
3. Scroll down to the variants area, and click the Edit button next to variant image and information. See image below
To start:
1. Go to Admin Shopify store > Themes > Actions or three dots > Edit Code
2. In Asset folder, open the global.js.
3. Add the code below at the very bottom, then SAVE.
class CustomDescription extends VariantSelects { constructor() { super(); this.variantSelect = document.querySelector('variant-selects') || document.querySelector('variant-radios') this.variantSelect.addEventListener('change', this.updateDesc.bind(this)) } updateDesc() { this.querySelectorAll('.variant-description').forEach(desc => desc.classList.add('hidden')) this.querySelector(`[data-desc-id="${ this.variantSelect.currentVariant.id }"]`).classList.remove('hidden') } } customElements.define('custom-description', CustomDescription); |
Add the description in your Product template:
1. Go to Admin Shopify store > Themes > Customize
2. Go to Products, then choose the product template you want to edit.
3. Under the Product Information, click Add block, and search for Custom liquid
4. Inside the custom liquid textarea, paste the code below. Make sure to SAVE.
<custom-description> {% for variant in product.variants %} <div class="variant-description {% unless product.selected_or_first_available_variant.id == variant.id %}hidden{% endunless %}" data-description-id="{{ variant.id }}"> {{ variant.metafields.custom.variant_description.value }} </div> {% endfor %} </custom-description> |
That's it (",)