Customizing your header with the theme customizer

BySupport Admin

Your header is the first thing customers see when they land on your shop. It houses your logo, navigation menu, and essential shopping tools like the search bar and cart. Using the WooShop header builder, you can arrange these elements exactly where you want them and ensure they look great on both desktop and mobile devices.

How to customize your header

  1. Open the Customizer: Log in to your WooShop dashboard. In the left-hand sidebar, go to Appearance > Customize.

  2. Enter Header Settings: Once the customizer loads, click on the Header tab in the side menu.

  3. Use the Header Builder: You will see a grid at the bottom of your screen with three rows: Top, Main, and Bottom. This is where you drag and drop elements like your Logo, Primary Navigation, and Cart icon.

  4. Add Elements: Hover over an empty slot in any of the three rows and click the plus (+) icon. Select the item you want to add (e.g., Search Bar, Social Icons, or a Button).

  5. Adjust Layouts: You can drag elements between the left, center, and right columns to change their position.

  6. Customize Individual Items: To change the specific settings for an element (like your logo size or menu font), click the gear icon on that element within the builder grid.

  7. Switch to Mobile View: Click the tablet/phone icon at the bottom of the customizer to arrange a different layout specifically for mobile users. This usually involves adding a "Trigger" (the hamburger menu icon).

  8. Publish Your Changes: When you are happy with the look, click the blue Publish button at the top of the sidebar.

Practical setup examples

  • The Minimalist Shop: Place your Logo on the left and your Primary Navigation in the center of the Main Row. Add the Cart icon to the far right. This keeps the focus entirely on your products.

  • The Promotion-Heavy Header: Use the Top Row for a "Secondary Navigation" or an "HTML" block to display a sitewide announcement, like "Free shipping on orders over $50."

  • The High-Conversion Layout: Add a Button element to the right side of your Main Row and link it directly to your "Sale" category or "New Arrivals" page.

Troubleshooting common issues

The menu isn’t appearing in the header
You likely haven’t assigned a menu to the "Primary" location. Go to Menus in the customizer, select your main menu, and check the box that says "Primary Menu."

The logo looks too small or too large
Click the gear icon next to the Logo element in the header builder. Under the "General" tab, you’ll see a slider for "Logo Max Width." Adjust this until the size looks right. If it looks blurry, ensure you uploaded a high-resolution transparent PNG or SVG.

The header looks messy on mobile
The mobile header is edited separately. Make sure you have added a Trigger element so users can actually open your menu on their phones. If the logo is taking up too much space, click the phone icon in the customizer and reduce the "Logo Max Width" specifically for mobile.

Sticky header isn’t working
If you want the header to stay at the top of the screen as customers scroll, go to Header > Sticky Header and toggle it on. You can choose to stick the entire header or just one specific row (like the Main Row).

Next steps:

Similar Posts