How to Set Up a Transparent Header in the Wonder Theme

Modified on Fri, 27 Feb at 1:29 PM

How to Set Up a Transparent Header in the Wonder Theme

In the bustling world of e-commerce, a store's success often hinges on user experience, particularly in how customers navigate your site. Enter the mega-menu, a game-changer in online navigation. This isn't just a menu; it's an essential tool for showcasing your products and enhancing user engagement.

In this guide, we'll delve into the integration and optimization of mega-menus within Shopify themes. Whether you're just starting out or are looking to upgrade your store, understanding mega-menus is key to elevating your site's functionality and aesthetic appeal. Ready to transform your Shopify store into a navigational gem? Let's get started.

Step 1: Access Your Theme Customization

Go to your online store and click "Customize" on the Wonder theme currently in use.

Step 2: Configure the Header Section

Click on the Header section and select the 'Transparent' option in the Header settings. For a better effect, we recommend enabling the sticky page header.

Note: The header logo image you set in the Header section will be visible outside the Logo Banner section.

Step 3: Set Custom Navigation Color

While still in the Header section, set the custom navigation color for when the header is transparent. This applies when navigation is in the Image Banner/Logo Banner section and when using the 'Fashion' layout of the gallery on the product page.

Step 4: Arrange the Logo Banner Section

Select the Logo Banner section and place it as the first section in the template order.

Step 5: Customize the Logo Banner Section

Set the logo image to scale properly when scrolling up and down.
Add and customize the background video/image to your liking.

Article about Logo banner section

Step 6: Save and Refresh

Save your changes. After refreshing the page, you will see the gorgeous effect of a transparent header combined with the Logo Banner section.