How to Customize the Theme One Header

On This Page

TABLE OF CONTENTS

• Getting Started
• Sections of the Header
  • Colors
    • Header Background
    • Header Text
    • Header Icon
    • Border
    • Border Transparency
  • Settings
    • Announcements
    • Show CTA on Top Right
    • Top Right CTA Image
    • Top Right CTA Alt
    • Top Right CTA URL
    • Logo Image
    • Image Height
    • Mobile Image Height
    • Logo Image Alt
    • Search Placeholder
    • Submit Text
    • Account Text
    • Logout Text
    • Login Text
    • Cart Text
  • Theme Settings
    • URL Links
    • iWish
    • Gradient Colors
    • Price Results Search
    • Make Sidebar Sticky

Getting Started

Your Header serves as the uppermost portion of your webpage. This area is consistent across all the pages of your website. There are many, many areas of customization available with Premium Theme Multi. This area is ideal for giving announcements and other bits of information. Alongside displaying useful bits of information, this area is extremely useful for setting the tone and theme of your store's webpages as it will most likely be the first part that your customers will see.

In order to begin editing your your Header, follow these steps:

1. From your myShopify page, select Online Store > Theme
2. From Theme, select Customize 
3. From the customization menu, you'll see a customization side bar on the left side. From here select Header

Sections of the Header

Under your Header customization, you will notice two overarching categories. These are:

• Colors
• Settings

Colors

Under the sub-heading of Colors, you will find another five categories. These are:

• Header Background
  
• Header Text
• Header Icon
• Border
• Border Transparency

Header Background

The Header Background is a customizable section allowing you to editing the background color for the entirety of the header. The color you choose here will sit behind all of the other parts of the header. The color you choose here is totally customizable.

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Header Text

The Header Text is a customizable section allowing you to edit the color of the text that will appear on your header. The color you choose here will be the color of all the text across your header.

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Header Icon

The Header Icon is a customizable section allowing for the color of any icons added to your header area to be altered or adjusted. 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Border

The Border is a customizable section allowing for the color of the border of your web page's header to be altered or adjusted. The color here is totally customizable.

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Border Transparency

The Border Transparency is a customizable section of your header utilizing a scrolling cline to adjust how clearly you can see through the border of your header. The transparency is adjusted in 10% increments. We recommend playing with these levels of transparency in order to find the design that best fits your store's webpage.

Settings

The Settings portion of the header customization includes the majority of editable options. In this section, you'll find the following categories:

• Announcement
• Show CTA on Top Right
• Top Right CTA Image
• Top Right CTA Alt
• Top Right CTA URL
• Logo Image
• Image Height
• Mobile Image Height
• Logo Image Alt
• Search Placeholder
• Submit Text
• Account Text
• Logout Text
• Login Text
• Cart Text

Announcements

The Announcement section includes a text box that allows for short messages to be displayed across your webpage's header.

Show CTA on Top Right

This section includes a tick box that allows for you to display your store's CTA (Call to Action) at the top right section of your header. If ticked (selected), the CTA that your store has chosen will be visible.

Top Right CTA Image

Within this section, you will notice that you have the ability to add an icon image. You have the ability to add your icon by selecting Select image.

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

Top Right CTA Alt

This section includes a text box that allows for a short text to be added beneath your CTA Image. This can be something directly related to the image or the attached link. We recommend playing around with this to best fit your store's needs.

Top Right CTA URL

This section includes a text box that allows for a URL to be attached and linked to the CTA image and alternative text.

Logo Image

Within this section, you will notice that you have the ability to add a logo image. You have the ability to add your logo by selecting Select image. Once added, this logo will sit on the top left of the header, opposite of the CTA icon.

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

Image Height

The Image Height section is a customizable scrolling cline that allows for you to customize the size of the image added in the Logo Image section above. The size of the image can be adjusted in increments of 5, ranging from 0-200. We recommend playing around with this feature in order to find something that you like.

It is important to note that this Image Height feature is distinct from the following Mobile Image Height section. Image Height deals exclusively with the height as it appears on non-mobile devices.

Mobile Image Height

The Mobile Image Height section is a customizable scrolling cline that allows for you to customize the size of the image added in the Logo Image section above. The size of the image can be adjusted in increments of 5, ranging from 0-200. We recommend playing around with this feature in order to find something that you like. Please note that this is specific to how logo images appear on mobile devices.

Logo Image Alt

This section includes a text box that allows for a short text to be added to your Logo Image. This can be something directly related to the image or the attached link. We recommend playing around with this to best fit your store's needs.

Search Placeholder

The Search Placeholder section includes a text box that allows for a customized message to appear in your header's search bar; this message will be overwritten as you input search criteria.

Submit Text

The Submit Text section includes a text box that allows for the customization of the message that your header's submit button will display.

Account Text

The Account Text section includes a text box that allows for the customization of the message that your header's account button will display.

Logout Text

The Logout Text section includes a text box that allows for the customization of the message that your header's logout button will display.

Login Text

The Login Text section includes a text box that allows for the customization of the message that your header's login button will display.

Cart Text

The Cart Text section includes a text box that allows for the customization of the message that your header's cart button will display.

Theme Settings

At the bottom of your customization sidebar, you will find a bonus dropdown menu under the title Theme Settings. This dropdown holds extra settings, including:

• URL Links
• iWish
• Gradient Colors
• Price Results Search
• Make Sidebar Sticky

URL Links

You will find several text boxes allowing for different forms of Social Media and other websites to be linked through URLs. These include:

• Facebook
  
• Twitter
• YouTube
• Twitch
• Discord Invite
• Instagram

iWish

Here you will see a tick box to select or deselect depending on whether your store has the iWish app installed.

Gradient Colors

Here you will find the option to customize the Gradient Start Color and Gradient End Color. These gradient colors allow for total customization of applicable buttons, such as the search button. 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Price Results Search

This section includes a tick box that allows for your store to display product prices in the search preview. If your store decides to deselect this option, then the product preview will include the product name, but not the price.

Make Sidebar Sticky

This section includes a tick box that allows for your store to stick or anchor the sidebar in place when scroll through the specific webpage. If deselected, this will allow for the sidebar to be scrolled past while browsing the specific webpage.