Remove Collection Text and Replace with Overlay Buttons (Canopy Theme)

Technical Q&A
1

Hello,

I have the Canopy theme on Shopify. My homepage has different collection images that display under my header carousel. Currently, the title of those collections displays under the image as clickable text.

I am wanting to remove that clickable text from underneath the image, and replace it with a text button that overlays each collection image.

I have read different articles that says to add code within assets/theme.scss.liquid, but I do not have that option within my Canopy theme. Can some someone please help me solve this?

Here is how it’s currently displaying on my site:

Screen Shot 2022-03-05 at 3.21.33 PM.png
Screen Shot 2022-03-05 at 3.21.33 PM.png2054×866 269 KB

2

Hi @bcwatson ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hi,

My Store URL is www.stardogstyle.com

It’s not password protected currently.

4

Hi @bcwatson ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css->paste below code at the bottom of the file:
.product-grid.grid .column .title {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.product-grid.grid .column .title a {
    font-size: 0;
    display: block;
    height: 100%;
}
.collections-section .product-grid.grid .product-block .image {
    margin-bottom: 0;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hi! Inserting that code removed the text underneath - thank you so much for that! But I want to instead add text buttons that overlay each collection image on the homepage.

Can you please advise how I would do that too?

6

Hi @bcwatson ,

You try below code in file styles.css:

.product-grid.grid .column .title {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.4);
}
.product-grid.grid .column .title a {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    background: #000;
    padding: 10px 20px;
    
}
.collections-section .product-grid.grid .product-block .image {
    margin-bottom: 0;
}

check to see if you got it right. If not, can you send us the mockup so we can try it? Thanks

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.