How do I move writing at the top of a collection so it is in the middle of the collection images?

[jking403]

Hello,

I have a heading at the top of my collection but I want it to display across the two images like I have shown in the screenshot.

Any help is much appreciated.

Many thanks,

Josh

[jking403]

URL - mutu-store

[Tech_Coding · Accepted solution]

Hello @jking403 

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 </body> on theme.liquid
<style>
#shopify-section-template--20772353736981__collection_list_tFLGxw .section-header {
   position: absolute;
   top: 37%;
   z-index: 99;
}
#shopify-section-template--20772353736981__collection_list_tFLGxw .section-spacing:not(.section-spacing--padded){
     margin-block-start: 0px !important;
}

</style>
RESULT:

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

[jking403]

Hi Tech_Coding, this works! Thank you!

Dont suppose you know how I can change the text colour to white?

Many thanks,

Josh

[Bundler-Manuel]

Hi there @jking403  You should check out the marked solution reply here https://community.shopify.com/c/shopify-design/i-want-to-center-the-collection-page-headings-in-dawn... 

I think this solution should work fine for your case as well so let me know if it does. 

[EstherBui]

Hi @jking403 

Thanks for your query :

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Hide the collection title here: https://prnt.sc/ipE1yMMpEXoW

3. Then Add block custom liquid: https://prnt.sc/H_GUm-ZQAbLs

4. Add this code below to show the collection title: https://prnt.sc/1Wx9ImXatN6q

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

Here is the result: