how to do collection list name set position in bottom center

Store Design
, ,

Topic summary

Goal: Position the collection list titles at the bottom-center in the Shopify Dawn theme, matching a provided screenshot.

Key steps and attempts:

  • Store URLs and a password were shared so helpers could inspect the theme. Initial CSS targeting .collection-item__title–overlaid was suggested but didn’t work; one cause noted was that collections initially had no products.
  • After products were added, a new CSS approach used absolute positioning on .card__content and styling a.full-unstyled-link. This placed text but not at the desired bottom-center.
  • Another contributor proposed using the Theme Customizer (Online Store > Themes > Customize), adjusting section settings, and adding CSS to .card__information (padding-top: 70%; text-align: center). Screenshots were provided and are central to following these steps.

Outcome:

  • The requester later confirmed the issue was solved after products were added and adjustments made.
  • The exact final setting/CSS snippet used was not specified. The discussion is effectively resolved with no outstanding questions.
Summarized with AI on January 3. AI used: gpt-5.
1

satyapal49_0-1709889338880.png
satyapal49_0-1709889338880.png794×444 244 KB

how to do collection list name set position in bottom center like screenshot in dawn theme

2

Hello @satyapal49

Can you share store URL?

3

https://championshiptraditions.com/

4

https://display-haul.myshopify.com/ password: 1

5

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection-item__title--bottom-center[class*=collection-item__title--overlaid]{ bottom: 40% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

nott working i need to set in this store https://display-haul.myshopify.com/ password 1

7

but there is no product in your collection.

8

added products now

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.card__content { position: absolute; top: 29%; left: 26%; } a.full-unstyled-link { background: #fff; width: 50%; padding: 10px; text-align: center; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

10

satyapal49_0-1709892705763.png
satyapal49_0-1709892705763.png1169×722 721 KB

but i need to be in bottom center

11

Hello @satyapal49 ,

You can set the collection name at the bottom of the images with the help of theme customizer.

Steps -:

  1. Go to Online Store - Themes - Click Customize

  2. Now follow the steps mentioned in screenshot

Anshul_arora_0-1709892965676.png
Anshul_arora_0-1709892965676.png1587×766 178 KB

Anshul_arora_1-1709892973674.png
Anshul_arora_1-1709892973674.png1593×766 45.3 KB

.card__information {
padding-top: 70%;
text-align: center;
}

I hope this helps.

Please let me know if you have any query.

Thank you.

12

not working check after upload products

13

thanks ssolved

14

Was my reply helpful? Click Like to let me know!

welcome @satyapal49