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
8962 1113 1460

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
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
246 24 93

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

 

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
bhristopher
Excursionist
28 0 5

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

SagarikaDas
Shopify Partner
246 24 93

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

 

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
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
246 24 93

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

 

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
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
246 24 93

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.

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
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
246 24 93

Hello @bhristopher,

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

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
buildarocket
Shopify Partner
1 0 1

AMAZING!!! Thank you, this worked perfect. 

dysonant
Tourist
6 0 2

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

King-Kang
Trailblazer
148 8 76

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