Adding buttons to collection lists and featured collection

Technical Q&A

Topic summary

A user seeks help modifying the Shopify Colourblock theme to display collection names as buttons overlaid on collection images instead of text labels below them.

Solution Provided:
A CSS code snippet was shared to add to base.css that:

  • Positions the collection name as an overlay using absolute positioning
  • Styles it as a button with padding, background color, and centered alignment
  • Applies to both ‘featured collection’ and ‘collection list’ sections

Follow-up Questions:

  • How to change button color (resolved independently by user)
  • How to customize button text (e.g., “Shop Now”)
  • How to add hover color effects (e.g., green to white transition)
  • How to remove an arrow element and reposition a box to bottom center

Multiple users requested site URLs to provide specific solutions. The discussion remains open with several customization requests unanswered.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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.

jake_mitchell_1-1657485334930.png
jake_mitchell_1-1657485334930.png1914×1272 269 KB

1 Like
2

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!

1 Like
3

@jake_mitchell

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

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.

5

is it possible to change the colour of the button?

6

Hi @frey2 ,

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

7

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!

8

jessesal7_0-1737516122566.png
jessesal7_0-1737516122566.png1146×475 668 KB

hey how do i delete the arrow and move the box to the bottom center

1 Like
9

@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.