How can I delete words under the collection card?

[RachelGRB]

Me again!

Could someone please help how to remove the words underneath the collection card? (In this instance - 'New In')

Ive tried some of the codes on here but they leave a blank space but I just want the image to show.

www.glamrocksboutique.co.uk

Thankyou!

[Farouk-dev]

Hi @RachelGRB,

Here you go...

1. From your Admin Page, click Online Store > Themes >Actions > Edit code

2. In the Asset folder, open the component-card.css

3. Paste the code below at the very bottom of the file.

.card__content {
  display: none !important;
  grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
  padding: 1rem;
  width: 100%;
  flex-grow: 1;
}

If this solved your issue, please mark it as a solution. Thanks

[Spac-es]

If you do this, the link won't work. You need to make the container still exist without taking up any apparent space but covering the entire image.

1º Add the following code to your base.css or theme.css file.

.card__content {
  position: absolute;
  height: 100%;
}

2º Then, add this JavaScript code to your theme.liquid to apply a transparent color only to the first container that appears in the document. This way, the rest of the text that appears in the other containers will be visible.

<script>
const firstCardHeading = document.querySelector('.card__heading');
  if (firstCardHeading) {
    firstCardHeading.style.color = 'transparent';
  }
</script>

 

[RachelGRB]

I've done this thankyou but it puts the collection name on the top of my image now whoops!

[Spac-es]

The JavaScript code should be applying 'color: transparent' to the text... Weird that it didn't work. Try adding this alternative code instead:

<script>
const elementsCardHeading = document.querySelectorAll('.card__heading');

  if (elementsCardHeading.length > 0) {
    elementsCardHeading[0].style.color = 'transparent';
  }
</script>

[Spac-es]

If it still doesn't work, we can opt to obtain the container's ID and apply the CSS style. Instead of using the previous script codes, add the following code to your base.css or theme.css:

#Slide-template--21739532714271__collection_list_jrMtqV-1 .card__heading {
  color: transparent;
}

 I hope it helped and worked for you!

[biznazz101]

Go to Themes> Customize> Navigate To & Click Section> Custom CSS Settings> Add This Code

.card__information {display: none; visibility: hidden;}

Result:

Hope that solves your problem!
@biznazz101

[RachelGRB]

Hey! it removes it but won't let me save.

It gives me this error message - Online Store editor session can't be published

[HM_Helal]

Hey @RachelGRB,

To remove the words underneath the collection card, please follow these steps:

1. Go to the Theme Editor by navigating to Theme Editor > Assets > component-card.css.

2. Once you open the file, add the following CSS code at the end of the file:

.collection-list-wrapper .card__content {
    display: none !important;
}

3. Save the changes and check if the issue is resolved.

If you encounter any further difficulties or require additional assistance, please don't hesitate to let me know.

If this solution resolves your issue, please consider marking it as the accepted solution.

[RachelGRB]

hey! this worked but then the card become unclickable so it couldn't be clicked to navigate to that collection.

[Made4uo-Ribe]

Hi @RachelGRB 

Check this one. I transfer the content on the center which the mouse pointer will turn to hand point. Indicates its clickable. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.card__content {
    position: absolute;
    top: 40%;
    background: transparent !important;
}
.full-unstyled-link {
    color: transparent !important;
}

And Save. 

Result:

Clever Idea but maybe it will work. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[RachelGRB]

This works but then it makes all of my product cards disappear too 😭

[likidesigns]

Hi there!

I'm having the same issue, where I added the above code and it removed the words underneath the collection, but now the collection isn't clickable. Any chance of an updated fix that works for both desktop/mobile versions? 

Thank you!