Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Solved! Go to the solution
This is an 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!
This is an 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!
is it possible to change the colour of the button?
Hi @frey2,
You have successfully added the button and want to change the button color?
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!
hey how do i delete the arrow and move the box to the bottom center
@jessesal7
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.
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.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025