Header settings

Overview #

The Header settings group is a core component of the theme settings, designed to control the overall look and feel of the shop's header. These settings are applied globally across the theme but can be customized at the section or block level for more specific adjustments. The header settings include options for text alignment, icons, headings, and button styles, providing a cohesive and customizable framework for your online store's header.

Key components and functionality #

Text alignment

This setting allows you to control the alignment of text within the header, offering options such as left, center, and right alignment. This flexibility helps you tailor the presentation of text to suit your design preferences.

Icon

The icon setting enables you to add a visual element to your header, enhancing its aesthetic appeal. Icons can represent actions or features, providing a more intuitive user experience. You can enter the icon name to display it, or leave it blank to hide the icon.

Caption

The caption setting provides a space for additional text that can accompany your main heading or icon. This can be used to offer more context or information to users.

Heading

The heading setting allows you to define the main title or heading within the header. This is a key element for structuring your page and improving SEO.

Heading type

This setting lets you choose the HTML tag for your heading, ranging from paragraph (<p>) to various heading levels (<h1> to <h6>). The default is h2, which balances prominence with SEO considerations.

Subheading

The subheading setting provides an additional layer of text below the main heading, useful for adding more detail or context.

Button icon

This setting allows you to add an icon to your button, enhancing its visual appeal and making it more interactive. Enter the icon name to display it, or leave it blank to hide the icon.

Button text

The button text setting defines the label displayed on your button, guiding users on the action they can take.

Button URL

This setting specifies the link that the button will direct users to, facilitating navigation or actions such as purchases.

Open link in a new tab

A checkbox option that, when enabled, opens the button link in a new browser tab. The default setting is false.

Button style

This setting offers various style options for buttons, including primary, secondary, extra large, plain, small, and small secondary. These styles help in differentiating buttons based on their importance or function.

Button layout

The button layout setting allows you to choose the position of the icon relative to the text on the button, with options like icon left, icon right, or icon only.

Button position

This setting determines the vertical placement of the button in relation to the content, with options for above or below content. The default is above.

Button position mobile

Similar to the button position setting, but specifically for mobile devices. The default is above.

Display full width mobile

A checkbox option that, when enabled, allows the button to span the full width of the mobile screen. The default setting is false.

Usage examples #

You might consider using the text alignment setting to center-align your header text, drawing attention to important announcements or promotions. Adding an icon next to your main heading can visually indicate the purpose of the page, such as a shopping cart icon for a checkout page. For calls to action, you might consider choosing a primary button style for your main call-to-action button, ensuring it stands out against other elements on the page.

These settings provide a flexible framework for customizing the header of your theme, allowing you to create a cohesive and visually appealing user experience across your online store.