How can I insert an image into a product page accordion on the Dawn theme?

[bhristopher]

How to create an accordion on the product page where I can insert an image?

Example:

Url: https://flaud.world/

Password: 202135283

Thanks,

B

[suyash1]

@bhristopher- free accordion code here , you can use it and put image instead of text

[bhristopher]

@suyash1 - Can't seem to figure out why it isn't dropping down. Could you take a look?

Thanks,

B

[SagarikaDas]

Hello @bhristopher,

Hope you are doing well!

In Shopify 2.0 themes like Dawn, you can achieve this using the "Collapsible Tab" block. Then you can insert images (by selecting dynamic data source) using Shopify metafields.

[bhristopher]

@SagarikaDas - Thank you for that! How exactly do I add the image using metafields?

[SagarikaDas]

Hello @bhristopher,

This Shopify guide will help you in creating metafields in your dawn theme: https://help.shopify.com/en/manual/metafields

First, we need to change the type of the Collapsible tabs that is by default "Rich text". Go to Online Store > Edit Code and open main-product.liquid file. Change the type to "liquid" for the content of the Collapsible tab.

Save the changes!

Now, for adding images using metafield:

• First, you have to define a 'Product' metafield of Content type = Image.
• Then, go to your store admin > Product. Open the product detail and upload the image to your metafield.
• Now go to the theme editor and open your product template. Add Collapsible tabs and enter the below code (replace the "namespace" with your metafield name) in the content tab.

{{ product.metafields.my_fields.namespace | img_tag }}

 You can see the image in your Collapsible tab!

[bhristopher]

It worked! Thank you so much.

Now i'm running into a problem with the size of the image in the collapsible tab. The image in the tab is the same px width as the dropdown menu and "add to cart" button.

Are you able to take a look at the code and tell me where I need to make the adjustment?

Url: https://flaud.world/products/copy-of-copy-of-copy-of-copy-of-sweatsuit-pullover

Password: 202135283

Thanks,

B

[SagarikaDas]

Hello @bhristopher,

I found a solution! Kindly replace the Collapsible tab content with the below code:

<img src="//cdn.shopify.com/s/files/1/0549/4279/3789/files/size-chart_7518321c-ace8-406e-92dd-2ed52b93cbe2.png?v=1637045283" alt="">

Cheers!!

[bhristopher]

@SagarikaDas - I'm trying to add a different image in the collapsible tab for a specific product, but it's changing for all of the other products. How do I fix this?

Thanks,

B

[SagarikaDas]

Dear @bhristopher,

As you are working on the default product template for all the products, it will happen!

You either need to use metafields for dynamic data product-wise (that only shows small-size images) or you can create different product page templates for specific products.

[bhristopher]

@SagarikaDas  Got it, I will try to create a different product theme template.

While I have you here, i'm looking to align the title and price on one line. The title being on the left side, and the price being on the right side. Are you able to take a look and come up with a fix for this?

[bhristopher]

@SagarikaDas How do I create the exact same template? I'm unsure of what file/asset I need to copy and paste from.

[SagarikaDas]

Hello @bhristopher,

I think this guide will help you to resolve your issue: How To Create Custom Product Template in Shopify 2.0 Themes

[buildarocket]

AMAZING!!! Thank you, this worked perfect. 

[dysonant]

THANK YOU!!!!!  Seriously, you saved me with this bit of knowledge.

[King-Kang]

Hi @SagarikaDas ,

But how do you make those collapsible tabs closed when another one is open? And how do you make the first one open as default?

Cheers