Adding buttons to collection lists and featured collection

[jake_mitchell]

Hi

Not sure if asking this in the right place. 

I'm using colourblock for something at the moment and would like to change a little thing around. Not super familiar with liquid so wondering if anyone can help. 

When using 'featured collection' or 'collection list' I would like the collection name to appear as a button across the collection image rather than the text label below it. Image below should give an idea. 

[LitExtension · Accepted solution]

Hi @jake_mitchell,

Go to Assets > base.css and paste this at the bottom of the file:

.section-collection-list .card__content {
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-collection-list .full-unstyled-link {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding: 1rem 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    color: rgb(var(--color-button-text));
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(var(--color-button),var(--alpha-button-background));
}

Hope it helps!

[frey2]

is it possible to change the colour of the button?

[LitExtension]

Hi @frey2,

You have successfully added the button and want to change the button color?

[frey2]

Hello! I figured out how to do this thank you! But have a couple more things I am trying. 

1. Is there any way to change the text of the button? E.g to say "Shop Now"

2. Is there any way to change the colour of button on hover? E.G from green to white?

Thanks!

[KetanKumar]

@jake_mitchell 

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.

[LitExtension]

Hi @jake_mitchell,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.