Skip to main content

Header & Footer

Header

Home header background color

Type:
Color
Default value:
#FFFFFF

Sets the background color of the header on the home page.

Header background color for all other pages

Type:
Color
Default value:
#ffffff

Sets the header color for pages other than the home page.

Type:
Color
Default value:
#e5e5e5

Background color of the quick browser, the window that is displayed when searching, in the example, orange color was defined for the background.

Menu & Search

Type:
Select
Default value:
Header top
Options:
Header top | Header middle | Header bottom
| None

Defines the location of the search box:

  • Header top, between the logo and user menu row
  • Header middle, below the logo row and user menu, below the Desktop menu
  • Header bottom, below the Home page carousel

ToDo: Capture Header bottom position when corrected

Type:
Select
Default value:
Always visible
Options:
Always hidden | Hidden on mobile | Always visible

Define when the search box or magnifying glass is shown:

  • Always hidden, the magnifying glass is always displayed on desktop and mobile
  • Hidden on mobile, the magnifying glass is always shown on cell phones
  • Always visible, the search box is always displayed
    In the Header top position, on mobile, the magnifying glass is always displayed
Logo
User menu

Text & Icon color

Type:
Color
Default value:
#333333

Color of the user navigation elements, in the example, is set to green:

 

 

 

 

Icon hover color

Type:
Color
Default value:
#444444

Color of the user's navigation elements when hovering or selecting them.

In the example, red was defined and the cart icon was selected:

Type:
Color
Default value:
#ffffff

Background color of the cart display shown when the cart icon is pressed.

In the example, orange is set:

Type:
Color
Default value:
#cccccc

Color of the border of the cart display that is shown when the cart icon is pressed.

In the example, it is set to yellow:

Cart counter background

Type:
Color
Default value:
#333333

Background color of the counter of items in the cart.

In the example, light blue is set:

Image removed.

Social media icons

Show social media icons on header

Type:
Checkbox
Default value:
Off

Define whether to display the social network icons in the header on desktop or in the menu on cell phones.

Type:
Select
Default value:
Right
Options:
None | Right | Left

Displays the social networks configured in BigCommerce (Storefront/Social Media links) in the site footer on the left or right.

Contact widget

Type

Type:
Select
Default value:
Phone
Options:
None | Whatsapp | Phone

Type of Contact Widget, Phone or WhatsApp

Label

Type:
Text
Default value:
Contact us

Text appearing on the first line, in the example, CONTACT US:

Legend

Type:
Text
Default value:
Mon-Fry 8am to 5pm

Text shown on the second line, in the example, Mon-Fry 8am to 5pm:

Background Color

Type:
Color
Default value:
#000000

Background color, in the example, is set to blue:

Number

Type:
Text

Contact telephone number or WhatsApp.

Show in header

Type:
Checkbox
Default value:
On

Displays the Comtact Widget in the header:

On mobiles:

On desktop:

Type:
Checkbox
Default value:
On

Displays the Contact widget in the menu:

On Mobile:

On Desktop:

If show in header is enabled, on desktop it is not shown in the menu:

Type:
Checkbox
Default value:
On

Displays the Contact widget at the bottom of the site:

Show floating icon

Type:
Select
Default value:
None
Options:
None | Bottom Left | Bottom Right

Displays the Phone or WhatsApp icon floating to the left or right:

Footer
Display settings

Show "Powered by BigCommerce and build with Scaffolding"

Type:
Checkbox
Default value:
On

Showcase "Powered by BigCommerce and build with Scaffolding"

Type:
Checkbox
Default value:
On

Displays a list of brands at the bottom of the site:

Show "©", current year and store name

Type:
Checkbox
Default value:
On

Displays the copyright icon, year and store name at the bottom of the site:

Image removed.

Payment icons

Show American Express

Type:
Checkbox
Default value:
On

Displays the American Express logo in the list of payment methods at the bottom of the site:

Show Discover

Type:
Checkbox
Default value:
Off

Displays the Discover logo in the list of payment methods at the bottom of the site:

Show Mastercard

Type:
Checkbox
Default value:
On

Displays the Mastercard logo in the list of payment methods at the bottom of the site:

Show PayPal

Type:
Checkbox
Default value:
Off

Displays the PayPal logo in the list of payment methods at the bottom of the site:

Show Visa

Type:
Checkbox
Default value:
On

Displays the Visa logo in the list of payment methods at the bottom of the site:

Show Amazon Pay

Type:
Checkbox
Default value:
Off

Displays the Amazon Pay logo in the list of payment methods at the bottom of the site:

Show Google Pay

Type:
Checkbox
Default value:
Off

Displays the Google Pay logo in the list of payment methods at the bottom of the site:

Show Klarna

Type:
Checkbox
Default value:
Off

Display the Klarna logo in the list of payment methods at the bottom of the site: