Accordions - Dawn theme

bhristopher
Tourist
20 0 1

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

Example:

IMG_2033.jpeg

Url: https://flaud.world/

Password: 202135283

Thanks,

B

Replies 12 (12)
suyash1
Shopify Partner
3743 410 612

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

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
bhristopher
Tourist
20 0 1

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

Thanks,

B

SagarikaDas
Shopify Partner
189 16 67

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.

SagarikaDas_0-1636954019127.png

 

Sagarika Das | iCart Team

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
bhristopher
Tourist
20 0 1

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

SagarikaDas
Shopify Partner
189 16 67

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!

SagarikaDas_0-1637039645244.png

 

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!

SagarikaDas_1-1637040114704.png

 

Sagarika Das | iCart Team

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
bhristopher
Tourist
20 0 1

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
Shopify Partner
189 16 67

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!!

 

Sagarika Das | iCart Team

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
bhristopher
Tourist
20 0 1

@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
Shopify Partner
189 16 67

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.

Sagarika Das | iCart Team

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!