Edit the header on your site

The Header section of your site plays a key role in navigation and communication with your visitors. It allows you to:

• Display announcements, promotions, and special offers.
• Enable a countdown timer for time-sensitive sales or drops.
• Customize the menu, currency selector, and buttons for easy navigation.

This guide will show you step by step how to create a Header that not only looks great but also boosts conversions. Let’s dive in!

To access the Header settings within your Fourthwall dashboard, go to Site Design > Layout > Header

Customizing the Header Layout

• Edit menu: The first section of the Header settings is the Menu option, which lets you customize your site's navigation. You can edit both the header and footer menus here. To learn more about editing your menus, visit How to edit menu and create drop-down menus.
• Header layout: Choose how your logo and menu are positioned (e.g., Left Logo | Centered Menu).
• Header Size: Select the size of your header
• Cart and account link style: Select icons or text for these elements.
• Show currency selector: Enable users to switch between different currencies that you have enabled on your site so they can see prices and checkout using that currency. To learn more about currency selection, check out the Multi-Currency Settings help article.
• Show social icons: Enable this option to display social media icons in your header. Only the social icons you've added in "Site Design > Style > Social Links" will appear. To learn how to add social links to your storefront, check out this guide: How do I add social links to my storefront?
• Make the section full width: Expand the header across the full screen.
• Transparent header on the homepage: Make the header blend into your site’s background.
• Add custom CSS code: Modify header styles beyond built-in options.
• Customize section colors: Adjust colors for better branding.

Adding an Announcement Bar

The Announcement Bar is perfect for displaying time-sensitive updates like sales, product drops, or free shipping offers. To add it:

1. Click on "Site Design > Layout > Header."

2. Click “Add Header Section.”

3. A new window will appear. Select “Announcement Bar” and click “Add.”

Customizing the Announcement Bar

Now that you have added the announcement bar, you can customize it as shown below

• Announcement text: Enter the message you want to display in the bar, like "Free shipping for orders of $50 and more" or "New drop is live!" "Limited time drop," etc. You can customize this text as you like. We recommend keeping it short and direct.
• Enable Countdown (Optional): Finally, you will find the countdown options. If you check the box next to "Enable countdown," the countdown will show next to the text displayed in the announcement bar along with the end date (see image above). This is great to let your supporters know to take advantage of your announcement now before it ends and help increase conversions. Set the end date to create urgency and increase conversions.

caution

Make sure you use the proper format when inputting your start and end dates, like “January 1, 2022,” or else it won’t display!

• Add Links (Optional): You can link the Announcement Bar to a specific page (e.g., Home, Shop, or a promo landing page). Just select the page under the "Links To" section.
• Add Custom CSS Code: Select this checkbox to add your custom CSS code, where you can tweak styling and placement options.

• Manage sections: Click the three dots (⋮) to manage sections on your site by using the Hide, Rename, and Delete options.