I previously moved the title of my collection to the collection card itself, but take it off the image because its hard to read and place above the image instead

Store Design
,
1

I previously moved the title of my collection to the collection card itself, but take it off the image because it’s hard to read and place above the image instead. I cannot figure out where or how to edit the code. My website is littlewayboutique.com and I would like it to look like the image below.

Screenshot 2025-08-15 142119
Screenshot 2025-08-15 142119555×390 44.9 KB

4

Hi @aimeegadams ,

Currently, I can see your collection UI looks like this (screenshot). Based on the example image you’ve provided, it looks like this is the layout you’re aiming for, right? (screenshot)

If that’s the case, you can follow these 2 simple steps to achieve the desired look:

Step 1: Click on Customize (screenshot).
Step 2: Add the following CSS code in the Custom CSS section (screenshot):

.collection-list-wrapper.page-width {
    padding-top: 47px !important;
    max-width: 140rem !important;
}
.collection-list-wrapper .collection-list {
    gap: 51px !important;
}
.collection-list-wrapper .collection-list .collection-list__item.grid__item {
    width: calc(33.33% - 51px * 2 / 3) !important;
    max-width: calc(33.33% - 51px * 2 / 3) !important;
}
.collection-list-wrapper .collection-list .collection-list__item.grid__item .card__content {
    top: -51px !important;
}
.collection-list-wrapper slider-component .card--media .card__content * {
    font-size: 24px !important;
}

Save your changes and check the result.

Please let me know if you need further adjustments to the CSS!

Best,
Felix

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution :heart:

5

Hi @aimeegadams,

Please go to Actions > Edit code > Layout > theme.liquid file, find ‘.collection-list-wrapper slider-component .card–media .card__content‘ and change code here:

Screenshot
Screenshot1646×886 173 KB

Code:

.collection-list-wrapper slider-component .card--media {
    flex-direction: column-reverse;
}
6

Hi @aimeegadams

Open the Theme customize > Section shop by collection > Custom CSS and paste this code, if this section doesn’t has this setting then open the Theme settings > Custom CSS

.collection-list-wrapper .collection-list .card:not(.ratio){
	flex-direction: column-reverse;
	background: transparent;
}
.collection-list-wrapper slider-component .card--media .card__content{
	position: relative !important;
	bottom: 0 !important;
	padding-left: 0 !important;
}
.collection-list-wrapper slider-component .card--media .card__content .card__heading{
	font-size: 20px;
}

Hope it help

7

Hey @aimeegadams ,

This is a common tweak in Dawn when you want the collection title outside the image overlay. By default, Dawn places collection titles inside the card image with an overlay, but you can move it above with a small Liquid/HTML adjustment.

Move Collection Title Above Image:

  1. Follow These Step:

  • Online Store

  • Themes

  • Edit Code

  • Opne the file

  • sections/collection-list.liquid

    2. Find the collection card block

Look for code similar to this:

<div class="card__content">
  <h3 class="card__heading">
    {{ collection.title | escape }}
  </h3>
</div>

This is currently inside the card image.

  1. Move Title Above the Image

Cut the … block and paste it before the image div, like this:

<div class="collection-card">
  <h3 class="collection-card__title">
    {{ collection.title | escape }}
  </h3>
  <div class="collection-card__image">
    {{ collection.image | image_url: width: 600 | image_tag }}
  </div>
</div>
  1. Add CSS to Style It

In your base.css (or theme.css), add:

.collection-card__title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222; /* adjust to your brand */
}

Now the title will appear above the image instead of overlaying it.

If you’d like me to implement this directly on your store, please feel free to reach out - here is my portfolio: https://rajatweb.dev/ where you’ll get my contact info and also see my past work.

Best,
Rajat – Shopify Expert