Solved

Make changes to the buttons of the collection list dawn theme

1234Joep43
Tourist
10 0 4

Scherm­afbeelding 2024-04-05 om 13.33.06.png

Hi,

 

I want to make changes to this collection list but I can't figure out how. I would like to do three things:

- change the colour of the buttons into black

- change the colour of the text into white

- make the corners of the buttons rounded

- reduce the distance between the different collection pictures (without the margins on the right and left to change)

 

Thanks in advance!

 

Yours,

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2038 589 463

This is an accepted solution.

Replace the code with this to remove the white background. 

<style>
ul.collection-list .card__information {
    background-color: #000 !important;
    border-radius: 15px !important;
}

ul.collection-list .full-unstyled-link {
    color: white !important;
}

.section-collection-list .card--standard>.card__content {
    background-color: transparent !important;
}
</style>

 

 

Regarding the new margins. It would look completely off with the other sections. The only option is to change the margin for every section, but that is too much work really. I suggest that you leave it as it is because it'll only cause more problems in the future than helping.

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 5 (5)

ThePrimeWeb
Shopify Partner
2038 589 463

Hey @1234Joep43,

 

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!
1234Joep43
Tourist
10 0 4
ThePrimeWeb
Shopify Partner
2038 589 463

Hey @1234Joep43,

 

All of it is ok except for "reduce the distance between the different collection pictures (without the margins on the right and left to change)". You can't change something and not change something at the same time. If you reduce the distance, the margin is going to be affected logically speaking. If you fill a bottle with water, you can't tell someone to pour out half and still make sure the bottle is full. It is illogical.

 

 

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>
ul.collection-list .card__information {
    background-color: #000 !important;
    border-radius: 15px;
}

ul.collection-list .full-unstyled-link {
    color: white !important;
}

.section-collection-list .card--standard>.card__content {
    background-color: transparent;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712318698228.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!
1234Joep43
Tourist
10 0 4

I understand! Thank you so much already :). I do have some follow-up questions:

 

What would be a way to make the space between the collections smaller (while accepting the changed margins)?

 

When i implement the code i get these little white corners (below), would there be a way to remove those? And how could i perhaps make the button and the text in it a bit smaller?

Scherm­afbeelding 2024-04-05 om 14.20.10.png

 

Thanks in advance!

ThePrimeWeb
Shopify Partner
2038 589 463

This is an accepted solution.

Replace the code with this to remove the white background. 

<style>
ul.collection-list .card__information {
    background-color: #000 !important;
    border-radius: 15px !important;
}

ul.collection-list .full-unstyled-link {
    color: white !important;
}

.section-collection-list .card--standard>.card__content {
    background-color: transparent !important;
}
</style>

 

 

Regarding the new margins. It would look completely off with the other sections. The only option is to change the margin for every section, but that is too much work really. I suggest that you leave it as it is because it'll only cause more problems in the future than helping.

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!