BigCommerce Sticky Header: Enhance UX & Boost Conversions on Cornerstone

In the fast-paced world of e-commerce, every element on your website plays a crucial role in user experience (UX) and, ultimately, conversion rates. One such element that consistently proves its worth is the sticky header. A sticky header, which remains visible at the top of the screen as users scroll, ensures that critical navigation, branding, and calls-to-action are always within reach. At Big Migration, we frequently encounter merchants seeking to optimize their BigCommerce stores, and implementing an effective sticky header on themes like Cornerstone is a common, yet vital, request.

A recent BigCommerce forum discussion highlighted this very need, with a merchant asking how to add a sticky header for both desktop and mobile on the Cornerstone theme. While the basic implementation is straightforward, the conversation quickly evolved to reveal deeper UX considerations that every BigCommerce store owner should understand.

Why a Sticky Header is Essential for Your BigCommerce Store

Before diving into the 'how,' let's reiterate the 'why':

• Enhanced Navigation: Users can quickly jump to other sections of your site (categories, cart, account) without scrolling back to the top.
• Consistent Branding: Your logo and brand identity remain visible, reinforcing trust and recognition.
• Always-Visible CTAs: Key calls-to-action, such as 'Add to Cart' or 'Search,' can be integrated into a compact sticky header, driving engagement.
• Improved User Experience: A seamless browsing experience leads to longer session times and reduced bounce rates.

The Basic CSS Solution for Sticky Headers on BigCommerce Cornerstone

For the Cornerstone theme, a sticky header is typically active on mobile by default. However, desktop users often miss out on this convenience. BigCommerce partners like Daniel Olvera and Sajid Jameel provided the foundational CSS snippet to enable this functionality:

.header {
  position: sticky;
  top: 0;
  z-index: 999;
}

Let's break down what this CSS does:

• position: sticky;: This is the magic property. It tells the browser that the element should behave like position: relative until a certain scroll position is met, after which it becomes fixed (like position: fixed) relative to the viewport.
• top: 0;: This defines the offset from the top edge of the viewport where the sticky element should 'stick.' Setting it to 0 means it will stick to the very top.
• z-index: 999;: This property controls the stacking order of elements. A high z-index ensures that your header will appear above other content on the page, preventing elements from scrolling over it.

Implementing the CSS on Your BigCommerce Store

You have a few options for adding this CSS to your BigCommerce store, ranging from quick fixes to more integrated solutions:

1. Storefront > Custom CSS (Quickest for Basic Fixes)

This is the most straightforward method for non-developers. Navigate to Storefront > My Themes, click the 'Customize' button on your active theme, then go to the 'Theme Styles' or 'Custom CSS' section (the exact path may vary slightly based on your theme version). Paste the CSS directly into the custom CSS box. This method is great for quick tests but can become unwieldy with extensive custom styles.

2. Script Manager (Good for Encapsulated Styles)

For a slightly cleaner approach, especially if you have other scripts, you can use the Script Manager. Go to Storefront > Script Manager, click 'Create a Script', set the placement to 'Head' and load on 'All Pages'. Then, paste the CSS wrapped in

This method keeps your custom CSS separate from the theme's core files, which can be helpful for organization.

3. Theme File Editor (Developer-Preferred Method)

For developers or those comfortable with theme file modifications, the Theme File Editor offers the most integrated solution. Navigate to Storefront > My Themes, click the three dots on your active theme, and select 'Edit Theme Files'.

• Add to assets/css/theme.css: Open assets/css/theme.css and add the CSS snippet at the very bottom. This ensures your styles override any conflicting default styles.
• Embed in templates/layout/base.html: Alternatively, you can embed the