Static
Include Announcement Bar, Header, and Footer
Last updated
Include Announcement Bar, Header, and Footer
Last updated
The Announcement bar is an optional section that, when enabled, permanently sits at the top of every page on your storefront.
With its eye-catching position on your storefront, it's the perfect place to display important information and incentives for your customers, such as announcements, promotions, sales, and news.
You can change the background color, and content alignment (Left, Center, and Right). If you are a developer, you can add an extra Class to the Module Class Suffix field.
This guide describes setting up the Header section.
The header section is accessible from all page templates, excluding the Checkout, Password, and Gift card page templates.
The Header section is a permanent section in your storefront. It is visible on every page of your store and features your brand's logo, menu navigation, account, search bar, and shopping cart.
To set up your store’s header section:
Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.
From the side menu, select Header.
Select a section setting described in the following table.
Enable sticky header
Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.
Show separator line
Displays a line to visually separate the header from the page's content.
Logo image
Use the following Custom logo selector options to set up an image to use as a logo inside the section. The recommended image dimensions are 800px x 300px (pixels) in .jpg format.
logo width
Adjust the slider Custom logo width to set a size for the logo image inside the section between 50px and 250px.
Logo text
Show logo text if you don't want to use Logo Image.
Logo font
Chose a font if you using Logo Text.
Main menu
The menu to use as your main menu. Click Change to select a different menu.
Desktop menu type
Use the drop-down menu to choose a desktop menu type between Dropdown and Mega menu. The Dropdown option displays second level menu content, with the third level collapsed until the corresponding second level item is clicked. The Mega menu shows all second and third level menu content upon the first click. The menu type is automatically optimized for mobile.
Spacing
Add spacing below your header. Use the range slider to add between 0px and 100px of space to the bottom margin.
Section padding
Add space to the top or bottom of the header. Use the range slider to add between 0px and 100px of space to the top or the bottom of your header.
Theme settings
The Footer is a permanent section that appears at the very bottom of every page on your storefront.
By adding content blocks containing text, a menu, a newsletter sign-up, social media icons, or an image, your footer is a great place to put essential information such as terms and conditions, returns policies, contact information, and accepted payment methods.
Color scheme
The background of the footer can be selected between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Show email signup
Includes an email signup form where customers can subscribe to your newsletter and marketing.
Heading
The title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Intro
The Description for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Social media icon
Displays icons for any social media platforms that you've entered a profile link for in your theme settings.
Show payment icons
Displays the icons for payment methods that are enabled on your store. When a customer visits your store, these icons are filtered so that only the payment methods that are supported in the current customer's region and currency are displayed.
Enable country/region selector
Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings so that customers can view your product prices in the currency of their choice.
Enable language selector
Spacing
Add space above your footer. Use the range slider to add between 0px and 100px of space to the top margin.
Section padding
Add space to the top or bottom of the footer. Use the range slider to add between 0px and 100px of space to the top or the bottom of your footer.
Theme setting
Heading
The title for the block.
Menu
The menu to display in the block. Only top-level menu items are shown in the footer, so drop-down menu types won't display as expected.
The Text block can be used to highlight important information, such as store details, promotions, or contact information.
Heading
The title for the block.
Subtext
The text to display in the block.
Image
The image to display in the block.
Image Width
Sets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px.
Image alignment on large screen
Aligns the image within the block:
Left - Aligns the image to the left of the block.
Center (default) - Aligns the image to the center of the block.
Right - Aligns the image to the right of the block.
Select Theme settings to access additional settings for the section. Refer to the .
Let your customers select their native language. You’ll need to manually translate your theme. to translate your theme.
Select Theme settings to access additional settings for the section. Refer to the .
