How to change layout of collection page in Debut theme

Solved
MPOPernille
Excursionist
37 0 15

Hey,

I'm wondering if anyone knows how to change the collection page in Debut theme from the standard layout, to more custom? 

What I'm looking to do is something like this (see screenshot). 

 

Thanks in advance.

KetanKumar
Shopify Partner
20524 2121 7737

@MPOPernille 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
nahjames
Tourist
5 0 2

Hey there!

So I noticed there are quite a few elements in that screenshot which aren't in the typical Debut theme - specifically for the collections page. Without a screenshot of what your current store looks like, it's hard to say what exactly you're looking to change, but I'll just go through it one by one.

1) Review Previews (the 5 stars): this can be done through an app, one I recommend is Judge.me. In terms of exact placement of the reviews, that can be done manually or automatically - if you're unsure how I'd recommend asking a developer for help.

2) Heading and text above product rows: the easiest way I can think of for this is to just add some HTML/CSS into the collection-templates.liquid file, which can be either done locally on say VSC or just directly by going to Online Store --> Themes --> Actions --> Edit Code. Be careful though, if you don't want live changes appearing on your store, then you should make a back-up of the theme file first before making any changes and publishing them!

Hope that helps,

James

0 Likes
MPOPernille
Excursionist
37 0 15

@KetanKumar 

Hey, and thanks for the quick reply!

The site URL is https://noiia.no/.

0 Likes
MPOPernille
Excursionist
37 0 15

@nahjames 

Hey, thanks for your reply!

I know that the store I took the screenshot from are using Debut, but they have most likely done a lot of changes to it as most of the site have a very customized look. 

My store's URL is https://noiia.no/collections/matoppbevaring, if you want to take a look at how it looks now (pretty standard Debut I believe). 

KetanKumar
Shopify Partner
20524 2121 7737

@MPOPernille 

sorry i can't see

KetanKumar_0-1624442262995.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
MPOPernille
Excursionist
37 0 15

@KetanKumar 

Hm, that's weird.. Does it happen if you choose another collection as well?

0 Likes
KetanKumar
Shopify Partner
20524 2121 7737

@MPOPernille 

how can i?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
MPOPernille
Excursionist
37 0 15
KetanKumar
Shopify Partner
20524 2121 7737

@MPOPernille 

great thanks 

do you have like this?

KetanKumar_0-1624451966801.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes