How can I delete words under the collection card?

How can I delete words under the collection card?

RachelGRB
Excursionist
16 0 5

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!

 

Screenshot 2024-01-22 at 22.09.40.png

Replies 12 (12)

Farouk-dev
Shopify Partner
146 24 28

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

If this message was helpful, please mark it as a solution and give it a thumbs up. For more theme customisations, just send me an email at kadduf6@gmail.com
Spac-es
Shopify Partner
389 112 135

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>

 Captura.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
RachelGRB
Excursionist
16 0 5

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

Spac-es
Shopify Partner
389 112 135

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>

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
389 112 135

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!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

biznazz101
Shopify Partner
494 50 90

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

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


Result:

biznazz101_0-1705964434361.png



Hope that solves your problem!
@biznazz101

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
RachelGRB
Excursionist
16 0 5

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
Shopify Partner
39 8 7

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
Excursionist
16 0 5

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

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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:

Made4uoRibe_0-1705971915016.png

Clever Idea but maybe it will work. 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
RachelGRB
Excursionist
16 0 5

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

likidesigns
Tourist
7 0 0

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!