How to hide the Collection Title on frontpage :: Beyond Theme

Store Design
, ,

Topic summary

A user seeks to hide the collection title on their frontpage while keeping the featured collection images visible in the Beyond theme.

Initial Solutions Attempted:

  • First suggestion involved adding CSS code to theme.liquid file, but this approach didn’t work.

Working Solution:
Moeed provided CSS code to hide the collection title by targeting .featured-collection--root .collection-header with display: none !important.

Follow-up Issue:
After successfully hiding the title, excessive spacing remained between the header and featured collection.

Final Fix:
Additional CSS was provided to remove the top padding: .featured-collection--root { padding-top: 0 !important; }

Status: Issue resolved. The user confirmed both solutions worked—the collection title is now hidden and spacing has been corrected. Screenshots were shared showing the before and after results.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello! I am trying to hide the collection title on my frontpage, only leaving it with the images of the featured collection. Can someone help please?

Captura de Tela 2024-09-19 às 14.20.35.png
Captura de Tela 2024-09-19 às 14.20.35.png1395×590 526 KB

2

Hey @AMP76

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

@AMP76 ,

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

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid
4

Hello, thanks for the support! page is espiritonomade.com password wheush

5

thanks for the reply

it didn’t work :disappointed_face:

6

Hey @AMP76

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 tag

RESULT:

Moeed_0-1726769099597.png
Moeed_0-1726769099597.png1894×909 320 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Please try this code

.featured-collection--header{
display:none!important;
}
8

Thank you so much, it worked. But it left a quite big space between the header and the featured collection, can you help me make it smaller please?

Captura de Tela 2024-09-19 às 15.13.29.png
Captura de Tela 2024-09-19 às 15.13.29.png1385×475 376 KB

1 Like
9

Hey @AMP76

Keep the previous code and add this new code above in the end of theme.liquid file.

.featured-collection--root {
    padding-top: 0 !important;
}

RESULT:

Moeed_0-1726769934692.png
Moeed_0-1726769934692.png1891×913 337 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like