I have two options and need a different description for each option. I need help! dawn theme

[KLDesigns]

When I click on Matted & Framed, I would like a certain description to come up and same for Print Only.

I created the following meta fields and not sure what to do. I only need it for a specific collection.

Any help would be appreciated!

[WalkYourStyle]

So what you want to do is based on the variant option that the customer chooses a different product description to show up?

[KLDesigns]

Yes, that is correct.

[WalkYourStyle]

Can you please share your store’s URL?

[KLDesigns]

https://bf1310-7a.myshopify.com

[WalkYourStyle]

First you need to create 2 product metafields one that stores the ‘MATTED & FRAMED’ description and another one that stores the 'PRINT ONLY ( NO FRAME) ’ description. Then you need to modify your theme’s code like this

1. Go to ‘Online Store’ → Themes

2. From your Active Theme click on the 3 dots (…) → Edit Code

3. Inside the sections folder locate the file ‘main-product.liquid’

4. Copy the entire code of the ‘main-product.liquid’ file

5. Create a new section file called ‘main-product-backup.liquid’

6. Paste the code you just copied to the new file you created.

7. In the ‘main-product.liquid’ file scroll down until you find the ‘{% schema %}’ tag.

8. Above the ‘{% schema %}’ tag paste this code

9. Inside the ‘main-product.liquid’ file, find the element with class name ‘product’. It should look like this

7. Now it’s time to modify the above div element and add data attributes to store the metafield’s description you created at the start.

Before this symbol ‘>’ of the above element add the below data attributes

data-matted-framed-description="{{ product.metafields.custom.matted_and_framed }}"
data-print-only-description="{{ product.metafields.custom.print_only }}"

It should look like this

8.Now you are basically done. The only thing left is to modify the product’s description so that it shows only one description. When someone clicks on a product, the default option is ‘MATTED & FRAMED’, so the description should initially display the ‘MATTED & FRAMED’ description.

[Sajat]

Hi @KLDesigns ,

Welcome to Shopify Community.

It requires a bit of coding knowledge to actually achieve this feature.

Are you comfortable with liquid?

Let me know if you need any help.

Thank you,

Sajat

[KLDesigns]

Thank you so much. I will try this out later on today and let you know how it goes.

I am hoping that I created the metafields correct. Am I correct in putting the metafield to the product variant? see photo below.

It is only giving me 100 characters in the metafield description and my descriptions are longer. Thoughts?

[WalkYourStyle]

I think it’s better to create the metafields in the product scope rather than in the variant. Use multiline text as the type of the metafield, as shown below.

[WalkYourStyle]

Revised Instructions

Metafields Creation

1. Go to your Shopify Admin → Settings → Custom Data

2. Click on Products → Add definition

3. Add name of the metafield such as (MATTED AND FRAMED or PRINT ONLY) and select type of multiline text

4. Go to your products and fill in the metafields

Code Update

1. Go to ‘Online Store’ → Themes

2. From your Active Theme click on the 3 dots (…) → Edit Code

3. Inside the sections folder locate the file ‘main-product.liquid’

4. Copy the entire code of the ‘main-product.liquid’ file

5. Create a new section file called ‘main-product-backup.liquid’

6. Paste the code you just copied to the new file you created.

7. In the ‘main-product.liquid’ file scroll down until you find the closing section tag ‘’.

8. Above the ‘’ tag paste this code

9. Inside the ‘main-product.liquid’ file, find the element with class name ‘product’ that looks like this

10. Now it’s time to modify the above div element and add data attributes to store the metafield descriptions you created at the start.

Before the symbol ‘>’ of the above element add the below data attributes

data-matted-framed-description="{{ product.metafields.custom.matted_and_framed }}"
data-print-only-description="{{ product.metafields.custom.print_only }}"

After adding the above data attributes the div element should look like this:

11. Now you are basically done. The only thing left is to modify the product’s description so that it shows only one description. When someone clicks on a product, the default option is ‘MATTED & FRAMED’, so the description should initially display the ‘MATTED & FRAMED’ description.

[KLDesigns]

Thank you so much. I will try this later on today

[KLDesigns]

You are the best! I will try this later on today and let you know how it goes. Thank you.

[KLDesigns]

Hi…that worked…thank you so much however I have a question.

When I click on Print Only the right description comes up and then if I click back on matted and framed the print only description is still there. Do I need to update the code? When I refresh it changes but can it happen if a customer clicks back and forth between the two options. I hope that makes sense.

[WalkYourStyle]

can you please share the url of the product ?

[WalkYourStyle]

Can you please share an image of the code you’ve added please? Also the data attributes.

[KLDesigns]

https://bf1310-7a.myshopify.com/products/trex002?variant=46062890909919

[WalkYourStyle]

Also how did you name your metafields?

[KLDesigns]

[WalkYourStyle]

The data attributes look correct. If I may ask did you replace the entire div element that I gave you or did you just include the data attributes?

[WalkYourStyle]

Can you show me exactly where you added the script code in your main-product.liquid file please?