Homepage layout for clickable photos

solunacreations
Excursionist
21 0 9

Hi,

I have created 4 clickable gallery photo's for my homepage, each one is added as a new section, which directs to different collections.

I need some help with the layout, instead of the grid going vertically, I would like it to go horizontally and to match the way my featured products are also laid out on the homepage for the desktop and mobile.

Website: www.bysolunacreations.com

Password: Shoppadrop

See examples below of how I would like to set these out.

Desktop - 4 gallery photos in a horizontal line:

solunacreations_0-1618350438529.png 

like this:

solunacreations_1-1618350459745.png

When viewing in mobile view it should then look like this:

solunacreations_2-1618350546933.pngsolunacreations_3-1618350567313.png

 

0 Likes
solunacreations
Excursionist
21 0 9

Posting again to bump this thread - hopefully someone can help!

0 Likes
Quyen_Beo
Explorer
58 7 12

Instead of adding 4 separate sections, you should add 4 blocks within 1 section.

Default shopify section can do this

On Debut theme, you can add section Collection list. If you use another theme, it still should have this kind of section

Then add in 4 blocks with setting 4 collections a row

Quyen_Beo_0-1618599866365.png

Quyen_Beo_1-1618599888230.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
solunacreations
Excursionist
21 0 9

Thanks @Quyen_Beo 

The reason I have done it as 4 separate sections is because I can only upload 1 photo for the collection, and I want a different image for the collections on the homepage.

Do you have any other suggestions how I can do this to have different photo on the homepage to the collection page and have that layout?

 

Thanks!

0 Likes
Quyen_Beo
Explorer
58 7 12

To achieve it, you will need to edit the code, on that Collection list section, for each block, beside the collection choosing field, you need to add 1 more field for image uploading. Then that image will be used instead of the collection image.

This would take 1 hour of working. So if you can't do that yourself, hire a developer to do that for you.

If you want to learn to do that, you can start with this document
https://www.shopify.com/partners/blog/how-to-create-your-first-shopify-theme-section

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes