Header Setting

Header Setting

The header is a crucial element of your online store, serving as the primary navigation point and brand identifier. This guide will walk you through the various settings available to customize your header and create a seamless shopping experience.
  1. The logo is an essential part of your brand identity, and can be customized in size, position, and style to fit the overall design of your store.
  2. Your logo appears in the header on all pages and on the password page.
  3. Logo images can be up to 300 pixels wide.
Customize your logo:
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and click Customize.
  3. Click Theme settings.
  4. Click Logo. In the Logo area, hover over the logo Select image. You have 3 options:
  5. To use an existing image from your Shopify admin, click on an image to select it.
  6. To use an image from your computer, click Upload. Select the image you want to use from your computer. The image will be automatically selected after the upload is finished.
  7. To select a free image, click Explore free images, search for or click on an image to select it.
Customize your favicon image: A favicon is a small icon that appears in the browser tab next to your website's title.
  1. In the Logo area, hover over the favicon image.
  2. Click the image.
  3. You will have 3 options to select your favicon image
  4. To use an existing image from your Shopify admin, click on an image to select it. 
  5. To use an image from your computer, click Upload. Select the image you want to use from your computer.
  6. To select a free image, click Explore free images, search for or click on an image to select it.
Note that the favicon image will be scaled down to 48 x 48 px.

header-logo-settings

Header top

The header top is the area at the very top of your store's pages, and can be customized with color options, text content, and other interactive elements.
To customize the colors:
  1. You can select a pre-made color scheme for your header top, or you can create a new color scheme by going to Theme settings > Add Scheme.
header-top-color-settings
  1. Once in the color scheme customization page, you will be able to customize:
General
Background, Background Gradient, Text, Link, Link Hover, Border, Block title
Theme Library
Color, Text on primary color
Input
Background, Border, Text
Button
Background, Border, Text
Input, Button shadow
Shadow

Optional: You can also enable auto-playing content on the header top, or enable the "country/region selector" and "language selector" to appear.
header-top-customization
​
Add an Item in the Header Top:
  1. Enter the text you want to display.
  2. Assign a link (if applicable) and select whether you want the link to open in a new window or the current window.
add-item-in-header-top
For instructions on how to create and customize your mega-menu, please visit the Menu Setting Guide.

    • Related Articles

    • Menu Setting

      Optimize your store’s navigation with Tapita’s advanced menu options, including a customizable multi-column dropdown (mega menu). This guide provides step-by-step instructions for creating and configuring menus to enhance the user experience. ...

    • Azzel Theme Setting

      On the customization page, click on the second icon to access the theme settings. Now, let’s explore each component in the theme settings one by one! Color With the Colors setting, you can create and customize unique color palettes for different ...

    • Color Swatch Setting

      This feature allows you to display color swatches (visual representations of colors) for products with color options, instead of just displaying the color names as text. Configuring Color Swatches: Go to Theme Settings > Color Swatches. For each ...

    • Home Page

      Understanding Sections and Blocks Sections are the building blocks of your store's layout in Shopify, providing a flexible way to arrange content on each of your store's pages. Accessible from the left-side menu in the Theme Editor, sections are made ...

    • Blog Post

      The Blog Post section, is designed to display blog posts in a visually appealing layout. It typically features an image on one side and the corresponding blog post information on the other. Configuration Options: Section Header: Heading: Enter the ...