Collection List and featured Collection Heading aligned left, Title of Collections List not shown...

[GOMAK]

Hello again Experts,

i am looking for Code that lets me have the Heading of Collection List and featured Collection, aligned on the left, at the same time i would like to not show the titles on the collection list but still show them at featured collection, and maybe make the cards of featured collection generally a bit bigger.

All of this will be on the Shrine Pro Theme.

This is the Preview URL of a Draft i am working on:

https://thxvn3fyvwa9njnz-68898914601.shopifypreview.com

Thank you if someone can help me with this!

[Spac-es]

I didn’t understand this part: “not show the titles on the collection list but still show them at featured collection”
Something like this?

Add this code in your base.css file:

.collection-list__item .card__content {
  opacity: 1 !important
}
h3.card__heading .full-unstyled-link {
  color: white;
  filter: drop-shadow(2px 4px 6px black);
  text-align: left;
  font-size: 12px;
}
.color-scheme-template--24143431696718__featured_collection_Dewkdn.color-background-1.isolate.gradient.content-for-grouping.animate-section.animate--hidden.always-display.animate--shown .card__information h3 {
  display: none;
}
h2.title.h2.title-with-highlight {
  text-align: left;
}
.page-width {
  max-width: 170rem !important;
}

Result:

[GOMAK]

yes thats almost it, thank you

what i mean with titles is the Text on the bottom of Collection List Tabs, i would like them to not be shown,

but product information on the featured collection section below

[DaisyVo]

Hi @GOMAK

I am not sure if I understand your idea right, if not, please let me know

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.title-wrapper-with-link:has(.collection-list-title) {
    justify-content: left !important;
}
.collection__title .title.h2.title-with-highlight {
    text-align: left !important;
}
.collection-list.contains-card.contains-card--collection .splide__track ul.splide__list {
    gap: 10px !important;
}
.collection > .collection__title.animate-item.animate-item--child.index-0.title-wrapper.title-wrapper--no-top-margin.page-width {
    display: none !important;
}

Here is the result:

I hope this helps

Best,

Daisy

[GOMAK]

this is very close but not exactly what i mean

what i also mean is, that i would like the Collection List Titles that are marked there hidden, everything else is perfect.

[DaisyVo]

Hi @GOMAK

So please use this code more in the same position

.collection-list-wrapper.page-width .collection-list.contains-card.contains-card--collection ul.splide__list .card__content {
    display: none !important;
}

Here is the result:

I hope this result

Best,

Daisy

[GOMAK]

i didnt notice until now, the images are not clickable anymore, can you adjust this code so they are?