How can I add a Symmetry-style gallery to the Dawn theme?

[Bluewaterindust]

Hey Guys

Newbie here and just playing around get my shop built and have been playing with Dawn and a trial of Symmetry and was wondering how i go about putting a Symetry style gallery on the Dawn hompage?

Below is the Symetry gallery i have made but would like to have this in the Dawn theme

Below is what i have so far with Dawn by seaching through posts and have mangaed to get close to what i want with Dawn but not happy with the image size and want the image to be the link and not have buttons

Does anyone know how i can do this, any help would be greatly appriciated!!!

[SheetalZadfiya]

Hello @Bluewaterindust 

Note : Download the attached zip file : gallery-section.zip

Create Gallery section as Dawn theme please consider following code:

1) Create new section gallery.liquid and add code from attached zip file. 

Path : Online Store > Themes > Actions > Edit code > Sections > gallery.liquid

2) Create new snippet bgset.liquid, it’s already rendered inside gallery.liquid file and add code from attached zip file. 

Path : Online Store > Themes > Actions > Edit code > Snippets > bgset.liquid

3) Add base.css file code from attached zip file inside base.css file.

Path : Online Store > Themes > Actions > Edit code > Assets > base.css

Once you finished this steps, You can customise gallery section from backend same as Symetry theme. Please check below screenshots for better clarification.

I hope this code will help you to fulfil your requirements.

[Robkevdh]

Hey 

I used your code in the dawn theme for the image gallery, but the max images it shows per row is 2... How can i change that?

[Mehtab_Ali]

You can change the setting from side penal in customizing theme.

[Jiozx]

@SheetalZadfiya mobile slide show isn't working for me...

[Lucid_Polygon]

If anyone's interested in future, I have created a simple tutorial on how to add an image gallery to a page or blog on the Shopify website. You can follow through to create the same.

[Jiozx]

@Lucid_Polygon thanks but every theme has a media/gallery section. The one from Symmetry theme is unique as it has a slideshow option for mobile.

[Lucid_Polygon]

This is not theme based. It's an additional piece of code in case you want a gallery within a blog/page/product description. 

[savageat4eace]

@Lucid_Polygon I tried the code you provided, and it looks good on desktop but my images are showing blank on Mobile. Do you know how to fix this?

[marcoswata]

Just in case anyone finds this thread.

You can find an image gallery here:

https://marcoswatanabe.com/shopify-guides/image-gallery-shopify-dawn

It's a free, simple and customisable image gallery. It should work on any theme, but let me know if you have any problems.

[Mehtab_Ali]

Hello,

Does this code also support videos?
I am facing the issue of same image dimension differences in mobile and desktop sizes.

[marcoswata]

@Mehtab_Ali which code are you referring to?

[Deonnah]

Yooooo!!!! This was great!! Thank you so much Marco 🙂 

[marcoswata]

@Deonnah I'm glad it helped!

[Mich7]

Hi there

How do I open the attached LIQUID files on windows to access the code?

[LouisONPC]

I'm not on Windows today, but Notepad or any text editor should work.

[LouisONPC]

Thank you. I'm using Dawn, version 10, and when I paste the code into gallery.liquid, I get this error: 'Invalid preset "Gallery": cannot include blocks in preset because there are no blocks defined.'

[mandabear]

I used these instructions. On my practice site it worked. On my live site, it took it down. 😞 Totally gone. I wonder if the update to Dawn made it not work. 

[marcoswata]

My gallery or the other one in this thread?

[mandabear]

No not yours the one posted by SheetalZadifya

I rebuilt my site yesterday afternoon. 

[Mehtab_Ali]

Thanks a lot Sheetal for your help. It worked but further I am facing a few challenges, I would be thankful if you could guide me on that.

A) Mobile slider isnt working.
B) Picture dimensions are different for mobiles and desktop due to which images are cutting from top and bottm, how to fix that?
C) is there also a way to make slider on desktop?