How can I alter the layout of my collections on the homepage?

Solved

How can I alter the layout of my collections on the homepage?

ottenniels
New Member
8 0 0

Hi, 

I want to change the lay out of my "collections" on the homescreen to look like something like this: buttons instead of pictures.

ottenniels_0-1709561283566.png

 

This is how it looks now: 

ottenniels_1-1709561346584.png

 

 

Does anyone know how to do this?

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 519

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.

ThePrimeWeb_0-1709648109503.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 11 (11)

Guleria
Shopify Partner
3976 793 1132

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.  
 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @ottenniels,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ottenniels
New Member
8 0 0
ThePrimeWeb
Shopify Partner
2139 616 519

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.

ThePrimeWeb_0-1709634525301.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ottenniels
New Member
8 0 0

Hi, 

I don't see a difference when I add the code!

Niels

ThePrimeWeb
Shopify Partner
2139 616 519

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

ThePrimeWeb_0-1709641541767.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ottenniels
New Member
8 0 0

I'm working on the live theme. The ID is 159503352143

 

ThePrimeWeb
Shopify Partner
2139 616 519

Can you take a screenshot how you pasted the code, I don't see the code in the live theme

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ottenniels
New Member
8 0 0

themes/159503352143/editor

ThePrimeWeb
Shopify Partner
2139 616 519

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.

ThePrimeWeb_0-1709648109503.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ottenniels
New Member
8 0 0

It works mate, thank you so much