Header & Footer (Portobello)
Learn how to configure the theme header and 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
| Setting |
Description |
| Cart icon |
Change the icon used in the utility navigation between a Bag, Cart and Basket icon.
|
| Show wishlists link in header |
Select 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.
|
| Thumbnail image in quick search results |
Select the size of the thumbnail images that appear in the quick search dropdown. Use this article to help you choose what image sizes are best for you.
|
Image Based Logo
| Setting |
Description |
| Image logo size |
This changes the logo's size to Original (as uploaded), Optimized for theme, or Specify Dimensions. If you select Specify Dimensions, two boxes for maximum height and width will appear, allowing you to enter dimensions. When you enter one dimension, the opposite dimension is automatically adjusted to maintain the image's original aspect ratio. The Optimized for theme option is 250 x 100 pixels in size.
|
Replace Store Logo With SVG
| Setting |
Description |
| SVG file name |
You can set up an SVG to display instead by following the steps on this article. 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.
|
Text Based Logo
| Setting |
Description |
| Font size |
Select the size of the font used for text logo. |
| Text color |
Select the color of the font used for text logo. |
Main Navigation
| Setting |
Description |
| Enable sticky navigation |
Select this 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 |
Select this to 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 |
The visibility of web page links from the category navigation menu can be toggled.
|
| Hide "View Parent" links in category dropdowns |
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 "All category_name" link to allow visitors to access the top level category. This option prevents the "All category_name" link appearing.
|
| Show brands in main navigation |
Shows link to brands page in the navigation.
|
Enclosed Navigation
| Setting |
Description |
| Enclose category navigation in single dropdown |
Select this option to hide all top level categories inside a "Shop Online" link. Clicking the link will make a navigation list appear. Combine this with the "Expanded Dropdown Menu" navigation design for best results if you have a large category structure. |
| Enclosed category menu item name |
You can rename the link that appears in the menu with this field. Please note that the text field has a 64 character limit. |
Social Media Icons
| Setting |
Description |
| Show in footer |
Select this to display social media icons in the footer. Please note social accounts must be set up to use this feature. |
Footer Elements
| Setting |
Description |
| Show brands in footer |
Select this to display link to brands page in the footer.
|
| Show "©", current year and store name |
Select this toggles the © details in the footer.
|
Payment Badges
| Setting |
Description |
| Show payment badges in footer |
Select this enables or disables payment method icons in the footer. Please 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.
|
Credits
| Setting |
Description |
| Show "Powered by BigCommerce" |
Choose this toggles the link back to BigCommerce.com.
|
| Show "Designed by Flair" |
Choose this toggles the link back to Flairconsultancy.com.
|
Supported Cards
| Setting |
Description |
American Express, Diners, Discover, JCB, Mastercard, Mastercard SecureCode, Visa, Verified by Visa
|
Choose to enable or disable card and/or alternate payment method icons.
|
Credit Providers
| Setting |
Description |
| Klarna |
Choose to enable or disable Klarna, a credit provider that spreads payments over a number of months. |
Digital Wallets
| Setting |
Description |
| Amazon Pay, Apple Pay, Google Pay, Paypal, Visa Payments |
Choose to enable or disable digital wallets.
|
Adyen Methods
| Setting |
Description |
Alipay, Bancontact Mister Cash, Cartes Bancaires, Elo, Giropay, Hipercard, iDeal, Paysafecard, Sepa, UnionPay, WeChat Pay
|
Choose to enable or disable Ayden methods.
|
Payment Processors
| Setting |
Description |
Powered by Braintree, Powered by Sage Pay, Powered by Skrill, Powered by Square, Powered by Stripe
|
Choose to enable or disable payment processors.
|
Apple Pay Buttons
| Setting |
Description |
| Apple Pay button color |
Select this allows you to set the color style for Apple Pay button. The Apple Pay button only displays on certain browsers.
|
