ENVY theme: how to hide the collection names using the collection list

Store Design
1

https://ffyhq99rzmx77e45-56842748069.shopifypreview.com

Imaged below. Wanting to just remake these images with this text inside the photo instead and not have the text below it. A hover slight zoom effect (like in the “shop the look” template) would be nice. But the main thing is how to hide the text below these images?

bp23_0-1629476077388.png
bp23_0-1629476077388.png960×417 296 KB

1 Like
2

@bp23

Please add the following code at the bottom of your assets/theme.index.min.css file.

#shopify-section-collection--collection-list .collection-grid .homepage-collection-link{
display: none; 
}

Hope this works.

Thanks!

3

hello @bp23

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-collection--collection-list .collection-grid .homepage-collection-link{
display: none; 
}
4

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme-index.min.css and paste this at the bottom of the file:
    .indiv-collection-grid-homepage:before{
    content: “”;
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    }
    .homepage-collection-link{
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 99;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: opacity .35s,-webkit-transform .35s;
    transition: opacity .35s,-webkit-transform .35s;
    transition: opacity .35s,transform .35s;
    transition: opacity .35s,transform .35s,-webkit-transform .35s;
    }
    .homepage-collection-link a:hover{
    opacity: 1;
    }
    .indiv-collection-grid-homepage:hover:before,
    .indiv-collection-grid-homepage:focus:before{
    opacity: 0.5;
    }
    .indiv-collection-grid-homepage:hover .homepage-collection-link,
    .indiv-collection-grid-homepage:focus .homepage-collection-link{
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    }
    Hope it helps!
5

@dmwwebartisan @Kinjaldavra the code you provided DID hide the text however, the image then become unclickable to go through to the collection page.

6

Hi @bp23
Have you tried my tutorial?
I help you to hide it and add effects to show on hover, it will be great.
Hope it helps!