Make changes to the buttons of the collection list dawn theme

1234Joep43 · ‎04-05-2024

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,

ThePrimeWeb · ‎04-05-2024

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

ThePrimeWeb · ‎04-05-2024

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 · ‎04-05-2024

https://www.everysolenl.com/

ThePrimeWeb · ‎04-05-2024

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.

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 · ‎04-05-2024

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?

Thanks in advance!

ThePrimeWeb · ‎04-05-2024

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!

Make changes to the buttons of the collection list dawn theme