Header section

There are four navigation menu arrangement types in the Poco theme’s header section.

1. Logo top left, menu bottom

2. Logo top center, menu bottom

3. Logo middle left, menu left

4. Logo middle center, menu left

The header customizations are as follows:

Setting
Description

Color scheme

In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Logo and menu position

Customization of logo and menu position in the header section is as follows:

  • Logo top left, menu bottom

  • Logo top center, menu bottom

  • Logo middle left, menu left

  • Logo middle center, menu left

Icon style

Customization of icon style in the header section is as follows:

  • Icon

  • Text with icon

Icon is the default mobile layout.

Sticky header

Customization of Sticky header in the header section is as follows:

  • None

  • On scroll up

  • Always

  • Always, reduce logo size

Show separator line

Enable this checkbox to show border of the bottom.

Search input border color

Select color to show search input border and button color.

Cart content type

There is three type of cart content. This setting only work when icon style is set to text with icon.

  • Show text - Defines only text

  • Show amount - Defines cart item amount

  • Show text with amount - Defines cart label and amount.

Applicable on desktop.

Cart color scheme

In this part, you can change the background and foreground color of a cart type button using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Desktop corner radius

Set desktop radius range in cart, minimum range is 0px and maximum range is 40px.

Mobile corner radius

Set mobile radius range in cart, minimum range is 0px and maximum range is 10px.

Menu

Show border above the menu Enable this checkbox to show border of the top of menu.

Menu color scheme

Applicable when menu is set to bottom.

In this part, you can change the background and foreground color of a menu using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Menu dropdown color scheme

In this part, you can change the background and foreground color of a menu dropdown using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Menu

Click on "Select menu" to add a menu in the header section.

Menu dropdown open as

Customization of Menu dropdown open as in the header section is as follows:

  • Click

  • Hover

Desktop menu type

Customization of desktop menu type in the header section is as follows:

  • Inline

  • Burger menu

Menu type is automatically optimized for mobile.

Show dropdown submenu on hover

Enable this checkbox to show dropdown submenu on hover of the menu. Not applicable on megamenu.

Store locator

Add store pickup location in section blocks with type "Store selector". Click here "Store setup" to set the store details.

Icon In the section, the icons are given to select. are for selecting:

  • None

  • Box

  • Chat bubble

  • Checkmark

  • Clipboard

  • Dairy

  • Dryer

  • Eye

  • Fire color

  • Gift

  • Heart

  • Leather

  • Lightning bolt

  • Lock

  • Map pin

  • Nut free

  • Price tag

  • Question mark

  • Recycle

  • Return

  • Ruler

  • Shirt

  • Shoe

  • Snowflake

  • Star

  • Stopwatch

  • Truck

  • World

Heading

Enter text for store locator heading.

Offer

Add offer details in section blocks with type "Offer details dropdown". Color scheme In this part, you can change the background and foreground color of a offer block using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Dropdown color scheme In this part, you can change the background and foreground color of a offer block dropdown using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Desktop corner radius Set desktop radius range in offer block, minimum range is 0px and maximum range is 40px. Mobile corner radius Set mobile radius range in offer block, minimum range is 0px and maximum range is 10px.

Icon In the section, the icons are given to select. are for selecting:

  • None

  • Box

  • Chat bubble

  • Checkmark

  • Clipboard

  • Dairy

  • Dryer

  • Eye

  • Fire color

  • Gift

  • Heart

  • Leather

  • Lightning bolt

  • Lock

  • Map pin

  • Nut free

  • Price tag

  • Question mark

  • Recycle

  • Return

  • Ruler

  • Shirt

  • Shoe

  • Snowflake

  • Star

  • Stopwatch

  • Truck

  • World

Icon color Select icon color to highlight the icon. This color is not applicable for color icon in the given list. Heading

Enter text for offer title. Text

Enter text for offer description or sub heading.

Contact details

Add contact details in section blocks with type "Contact details dropdown". Color scheme In this part, you can change the background and foreground color of a contact detail block using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Dropdown color scheme In this part, you can change the background and foreground color of a offer block dropdown using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Desktop corner radius Set desktop radius range in contact detail block, minimum range is 0px and maximum range is 40px. Mobile corner radius Set mobile radius range in contact detail block, minimum range is 0px and maximum range is 10px.

Icon In the section, the icons are given to select. are for selecting:

  • None

  • Box

  • Chat bubble

  • Checkmark

  • Clipboard

  • Dairy

  • Dryer

  • Eye

  • Fire color

  • Gift

  • Heart

  • Leather

  • Lightning bolt

  • Lock

  • Map pin

  • Nut free

  • Price tag

  • Question mark

  • Recycle

  • Return

  • Ruler

  • Shirt

  • Shoe

  • Snowflake

  • Star

  • Stopwatch

  • Truck

  • World

Heading

Enter text for contact detail label.

Customer accounts log in

To manage customer accounts, go to your customer accounts settingsarrow-up-right. Show avatar Customers will only see their avatar when they're signed in with "Shop".

Dropdown color scheme In this part, you can change the background and foreground color of a offer account dropdown using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6 and so on.

Mobile layout

Mobile logo position Customization of mobile logo position in the header section is as follows:

  • Center

  • Left

Spacing

Bottom margin You can adjust the range of the bottom margin to increase or decrease the bottom spacing as needed.

Section padding

Utilize this feature to add spacing to the top and bottom of the menu.

Last updated