How to display collection's names under images

[Monness]

Hello,

On my store’s main page down where the Collection List is, the images are displaying without any text. I would like each collection’s name to appear directly underneath its image so customers know which one they are viewing.

Additionally, I’d like the collection title to be positioned in the center. How can I achieve that?

Thank you in advance for your help!

[Moeed]

Hey @Monness

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.collection-list .card__content h3 {
    display: block !important;
}
.title-wrapper--no-top-margin {
    justify-content: center !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Monness]

Thank you so much! I have adjusted the title but I still need to work on collection names as they’re still not displaying.

[AiTrillion]

Hello @Monness ,

Can you please copy the below code and paste it below the image tag?

{{ collection.title }}

Please check and let me know if this worked for you or not.

[Monness]

@AiTrillion

{{ collection.title }}

Hi, Where exactly do I paste it?

[AiTrillion]

<p> {{collection.title}}</p>

[Monness]

I can’t find where to paste it.. Is it in the theme.liquid as well?

[AiTrillion]

• You can check the file which look something like
  collection-list.liquid

  • featured-collection.liquid

  • collection-grid.liquid

[Bang_T]

Hello @Monness

Go to Theme customize > Theme Settings > Custom CSS and paste this code

.collection-list .card__content h3 {
display: block !important;
}

[oscprofessional]

Hi @Monness ,

Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

.collection-list .card__content h3 {
    display: block !important;
}

[Monness]

Looks like I can’t save it for some reasons? Or am I doing it wrong?

Also I just now noticed an empty image below the collections? It wasn’t there yesterday

[Monness]

@Bang_T

.collection-list .card__content h3 {
display: block !important;
}

Worked! Thank you so so much!

[Bang_T]

Happy to help @Monness !

[Monness]

Do you maybe know why there’s an empty image below the collections? It appeared out of nowhere and I have no idea how to get rid of it

[Bang_T]

Hello @Monness

Please start new thread for this issue