How to Make Header Transparent Only on Homepage, Specific Pages, and Blog?

Store Design
,
1

Hello Shopify Community experts,

I am using the Rise theme to design a new website. While customizing the header, I encountered a problem and need some guidance.

I want to make the header transparent only on the homepage, my newly created pages, and the blog pages, while keeping the default Shopify header on all other pages.

Other pages, such as collection pages, product pages, cart page, legal pages, shipping policy, and privacy policy, register page…… should just use the default header settings.

Currently, I am using the code provided by Shopify AI, but it shows errors on other pages:

.shopify-section-group-header-group.announcement-bar-section { height: 5px; } /* Exclude product and cart pages */ body:not(.template-product):not(.template-cart) .header-wrapper { position: absolute !important; width: 100% !important; background: transparent !important; } body:not(.template-product):not(.template-cart) .header-wrapper .header { margin-top: 20px !important; }

Could anyone guide me on how to fix this so that the transparent header only applies to the homepage, my new created pages, and blog pages, without affecting other pages? Any code examples or tips would be greatly appreciated.

Thank you in advance!

Best regards

2

Hello @enrique2025

Please share your store link

Regards

Titu

3

Hello @enrique2025,

Please share tha store URL.

Thanks!

5

@enrique2025 I think your issue is solved.

8

I’ve found a solution.
By using Shopify’s page editor, you just need to add an image banner to each corresponding page.