Header & Footer (Portobello)

Learn how to configure the theme header & footer here. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Header & Footer'

Header Features

Cart Icon

You can change the icon used in the utility navigation between a bag, cart and basket icon.

Thumbnail image in quick search results

Use this article to help you choose what image sizes are best for you.

Show Wishlists Link in Header

Enable this option to have the wishlist icon display in the header, between the Search and Account icons, when a customer adds a product to a wishlist.

Image Based Logo

Image Logo Size

You can adjust the size of the logo here.

Please note before you consider adjusting the recommended sizes, take a look at how three of the biggest brands on the planet size their logos.

Replace Store Logo With SVG

Using this panel you can replace the store logo with an SVG file. You will need to upload the file into your store's WebDAV folder before this will work.

Please note you will still need to upload a standard image based logo in your store control panel for your invoices, packing notes, emails etc.

Uploading an SVG Logo

You can set up an SVG to display instead by following the steps on this article.

Text Based Logo

Configure the size and color of your text based logo here.

Main Navigation

Sticky Navigation

Enabling this feature allows the main navigation bar to stick to the top of the viewport on large screens and above. This simplifies the layout of the utility navigation, only displaying search, cart and compare when available.

While the sticky navigation is configured to work with unlimited categories, for the best appearance limit your main navigation items to 8 or less.

Hide Logo on Sticky Navigation

Checking this will hide the logo when the sticky navigation activates on scroll. Scrolling back to the top of the page will make the logo reappear.

Hide Web Pages in Main Navigation

Checking this option stops information pages created in the Content Management System (CMS) from appearing in the top navigation bar.

Hide "View Parent" Links

By default with the style of dropdown navigation we use, lists appear when the top level item is clicked. In this case, we present a "View Parent" link to allow visitors to access the top level category. This option prevents the "View Parent" link appearing.

Show "Brands" in Navigation

This adds an additional "Brands" link to the navigation. This is just a top level link that redirects to the main Brands page, it does not create a drop down list.

Enclosed Navigation

Setting Up Menu Depths for dropdown menus to appear, you need to set up a menu display depth of at least 2 levels deep.

To set this, in your store Control Panel, go to Store Setup > Store Settings and click the Display tab. Under the Category Setting heading, look for the Menu Display Depth field.

Check this option to hide all top level categories inside a "Shop Online" link. Clicking the link will make a navigation list appear.

You can rename the link that appears in the menu with the Enclosed Category Menu Item Name text box in this section. Note that the text field has a 64 character limit

Portobello contains a number of popular payment method logos to include in the site footer, cart and mini cart.

Check all the methods that you want to use.

Note that we have included PaymentFont in our theme. If you need to include additional payment methods that aren't listed in the Theme Editor, you can add additional method logos by customizing the theme files. Explaining how to edit your theme files is outside the scope of our support, but you can find all the necessary information in the BigCommerce Stencil Documentation.

Payment Badges

Enable this option to show payment method logos in the site footer.

Social Media Icons

Check this option to show social links in your store footer. Note that you must configure these in your store Control Panel before they show in the store.

Footer Elements

Check the relevant boxes to show brands and copyright notices in the footer.

Credits

Uncheck these boxes to hide the "powered by" and "designed by" credits.

Supported Cards

American Express (AMEX)
Diners
Discover
JCB
Mastercard
Mastercard SecureCode
Visa
Verified by Visa

Credit Providers

Klarna

Digital Wallets

Amazon Pay
Apple Pay
Google Pay
PayPal
Visa Payments

Adyen Methods

Alipay
Bancontact Mister Cash
Cartes Bancaires
Elo
Giropay
Hipercard
iDeal
Paysafecard
Sepa
UnionPay
WeChat Pay

Payment Processors

Apple Pay

You can configure the appearance of the Apple Pay button here.

As BigCommerce introduces additional payment provider support, we will add to the list.