Solved

How to change layout of collection page in Debut theme

MPOPernille
Explorer
48 0 16

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.

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MPOPernille 

great thanks for clear please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.product-card__title {font-weight: bold;}
.price-item {font-weight: normal;}
.product-card__image-with-placeholder-wrapper {
background: #eeeeee; /* change color as you like */
    padding: 50px 20px;
    margin-bottom: 20px;
}

 

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

View solution in original post

Replies 18 (18)

KetanKumar
Shopify Partner
36839 3635 11972

@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
MPOPernille
Explorer
48 0 16

@KetanKumar 

Hey, and thanks for the quick reply!

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

KetanKumar
Shopify Partner
36839 3635 11972

@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
MPOPernille
Explorer
48 0 16

@KetanKumar 

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

KetanKumar
Shopify Partner
36839 3635 11972

@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
MPOPernille
Explorer
48 0 16
KetanKumar
Shopify Partner
36839 3635 11972

@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
MPOPernille
Explorer
48 0 16

@KetanKumar 

No, it's like this

Skjermbilde 2021-06-23 kl. 14.46.05.png

KetanKumar
Shopify Partner
36839 3635 11972

@MPOPernille 

yes i can see current look

KetanKumar_0-1624535546131.png

 

so what do you need for change?

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
MPOPernille
Explorer
48 0 16

I want it to appear like this, if it's possible😅

Skjermbilde 2021-06-23 kl. 10.07.29.png

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MPOPernille 

great thanks for clear please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.product-card__title {font-weight: bold;}
.price-item {font-weight: normal;}
.product-card__image-with-placeholder-wrapper {
background: #eeeeee; /* change color as you like */
    padding: 50px 20px;
    margin-bottom: 20px;
}

 

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
MPOPernille
Explorer
48 0 16

Great, thanks @KetanKumar! That was super helpful!

Is there a separate code to get the text to appear like this? 

Skjermbilde 2021-06-23 kl. 10.07.29.png

KetanKumar
Shopify Partner
36839 3635 11972

@MPOPernille 

can you please add collection title and description 

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
MPOPernille
Explorer
48 0 16

@KetanKumar 

Title: Matoppbevaring

Description: Det du trenger for å organisere skap, hyller og kjøleskapet på en fornuftig og tilfredsstillende måte.

KetanKumar
Shopify Partner
36839 3635 11972

@MPOPernille 

great can you please add this on your collection  name on shopify admin collection side

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

nahjames
Tourist
5 0 1

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

MPOPernille
Explorer
48 0 16

@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). 

nahjames
Tourist
5 0 1

Hey there, no problem at all!

Store looks great so far.

For the product reviews with stars, I would recommend installing an app like Judge.me. If you want it specifically on top of the header like the screenshot you posted, then you may need a developer to manually install it for you.

As for the header and text below that, you can add some HTML/CSS by going to:

Actions --> Edit Code --> Sections --> collection-template.liquid

I hope that helps, if this sounds a bit difficult don't hesitate to reach out for any further questions!