FROM CACHE - en_header

Accordions - Dawn theme

bhristopher
Excursionist
28 0 5

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 15 (15)
suyash1
Shopify Partner
6111 715 1012

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
bhristopher
Excursionist
28 0 5

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

Thanks,

B

SagarikaDas
Shopify Partner
232 23 84

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

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
bhristopher
Excursionist
28 0 5

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

SagarikaDas
Shopify Partner
232 23 84

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

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
bhristopher
Excursionist
28 0 5

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
232 23 84

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

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
bhristopher
Excursionist
28 0 5

@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
232 23 84

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.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
bhristopher
Excursionist
28 0 5

@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?

Screen Shot 2021-11-22 at 12.03.42 AM.pngScreen Shot 2021-11-22 at 12.03.56 AM.png

bhristopher
Excursionist
28 0 5

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

SagarikaDas
Shopify Partner
232 23 84

Hello @bhristopher,

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

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
buildarocket
New Member
1 0 1

AMAZING!!! Thank you, this worked perfect. 

King-Kang
Trailblazer
145 7 58

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

dysonant
Tourist
6 0 1

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