Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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;
}
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.
sorry i can't see
Hm, that's weird.. Does it happen if you choose another collection as well?
how can i?
great thanks
do you have like this?
yes i can see current look
so what do you need for change?
I want it to appear like this, if it's possible😅
This is an accepted solution.
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;
}
Great, thanks @KetanKumar! That was super helpful!
Is there a separate code to get the text to appear like this?
can you please add collection title and description
Title: Matoppbevaring
Description: Det du trenger for å organisere skap, hyller og kjøleskapet på en fornuftig og tilfredsstillende måte.
great can you please add this on your collection name on shopify admin collection side
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
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).
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024