Shopify themes, liquid, logos, and UX
Hi,
I want to change the lay out of my "collections" on the homescreen to look like something like this: buttons instead of pictures.
This is how it looks now:
Does anyone know how to do this?
Solved! Go to the solution
This is an accepted solution.
Nvm, just try this instead
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.collection-list .card {
flex-direction: row-reverse !important;
text-align: left !important;
}
.collection-list .card .card__content .card__information {
margin: auto 0 !important;
}
.collection-list .card .card__content .card__information h3.card__heading {
text-align: left !important;
}
.collection-list.contains-card.contains-card--collection li {
width: 100% !important;
background-color: #f8f4ec !important;
padding: 20px !important;
border-radius: 19px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.collection-list.contains-card.contains-card--collection {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
}
@media only screen and (max-width: 989px) {
.collection-list.contains-card.contains-card--collection {
display: grid !important;
gap: 15px !important;
grid-template-columns: 1fr !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
You need to create a new section and write html a/to the requirement or just customize the existing section so it will look as you need.
Hey @ottenniels,
Can you share the link to your store please? Thanks!
Hey @ottenniels,
You may wanna upload smaller images.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.collection-list .card {
flex-direction: row-reverse;
text-align: left !important;
}
.collection-list .card .card__content .card__information {
margin: auto 0;
}
.collection-list .card .card__content .card__information h3.card__heading {
text-align: left !important;
}
.collection-list.contains-card.contains-card--collection li {
width: 100%;
background-color: #f8f4ec;
padding: 20px;
border-radius: 19px;
width: 100%;
max-width: none;
min-width: 0;
}
.collection-list.contains-card.contains-card--collection {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 989px) {
.collection-list.contains-card.contains-card--collection {
display: grid;
gap: 15px;
grid-template-columns: 1fr;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi,
I don't see a difference when I add the code!
Niels
Are you working on the current theme that's live or are you working on another draft theme? If so, please provide the theme ID to the draft theme.
When you customize the theme, the ID is here
I'm working on the live theme. The ID is 159503352143
Can you take a screenshot how you pasted the code, I don't see the code in the live theme
themes/159503352143/editor
This is an accepted solution.
Nvm, just try this instead
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.collection-list .card {
flex-direction: row-reverse !important;
text-align: left !important;
}
.collection-list .card .card__content .card__information {
margin: auto 0 !important;
}
.collection-list .card .card__content .card__information h3.card__heading {
text-align: left !important;
}
.collection-list.contains-card.contains-card--collection li {
width: 100% !important;
background-color: #f8f4ec !important;
padding: 20px !important;
border-radius: 19px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.collection-list.contains-card.contains-card--collection {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
}
@media only screen and (max-width: 989px) {
.collection-list.contains-card.contains-card--collection {
display: grid !important;
gap: 15px !important;
grid-template-columns: 1fr !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
It works mate, thank you so much
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025