Customizing Themes & Device Optimization

How to Update Your Storefront Theme

Log in to BC store & navigate to “Storefront” on the left side panel
Click “Customize” on the selected theme to bring up customizer window
If customizing for the first time, you should start with customizing ‘Theme Styles’. Navigate to the left side panel and click the color palette icon (“Theme styles”)

Note: Clicking into any widget in design mode will change your side panel back to widget settings. To remain in the Theme Styles tab, refrain from clicking into widgets in the design screen.

Swap design mode into mobile view (located at the top banner where there are device icons) because the Bamboo theme has been designed to be optimized for mobile devices. Designing mobile-first will guarantee your design to template more seamlessly across all screen sizes.
Theme variant: To see which theme is applied, click “Styles” in the left menu. This will also reveal the other theme variants available to apply to your store (Zen, Grove, Bend)
Reminder: Save before exiting any theme changes you wish to keep so you don’t lose your progress. Some other store settings will be outside of the customizer and changes will not auto-save when leaving the customizer to update an external setting.

Places to Update Content

If you are starting a store from scratch rather than switching themes remember to switch out the placeholder content. It can be found in the following areas:

Blog
About page
Products
Footer links

Theme Styles Settings

This section covers how to use settings to adjust elements such as text & background colors, fonts, images, blog & price ranges.

Global: This menu item shows global colors applied to your site. We recommend going to different pages of your site to preview colors as not all color changes will apply within a single page. (Page design mode can be changed from the top left drop-down menu, or you can enter Preview mode to navigate around the site and find a page you’d like to edit, then return to design mode). We also advise saving often during customization to reduce the risk of losing progress.

Global Colors

Note: While customizing hierarchies of text color, they may not all exist on the homepage to preview, so it’s important to check other pages to see where the text colors may apply.

Reverse text color settings are meant for lighter text on a darker background. This setting is specifically linked to a category header setting, for cases where you have a category banner image that requires a different text color setting for visibility. If there is an image uploaded for your category page, there is an option in the “header and footer” theme settings to set your font color as a reverse text color. This setting is also used in the variant product option selector on the product page, for the text color to appear on hover.
Link text color settings can be customized to be a bit brighter than your main brand text color to help links stand out. This applies to filter options, sort drop down text, reviews link, and forgot password links.
Link text hover settings allows you to set a color to convey the user’s hover interaction with links, which can also be set back to the main brand color.
Primary Background settings will update the main center background of your site, input fields, and privacy policy banner. Widget sections will have their own section background color setting that will appear overlaid on primary backgrounds.
Secondary Background settings will update the color of Wishlist dropdown, category SEO text container background (by default located at the bottom of the category page), mobile menu link background, menu open state, account order details total section background, create account section, and return saved container background.
Reverse Background settings will update the social link background color on mobile menu as well as several areas on the account page.
Reverse Alternative Background settings will update the facet label element background, active filter tags, mobile sub-menu drop downs, quick search (desktop) background, and border color on menu.
Border Color will change input field border colors.
Elements Color will determine UI elements such as star ratings, checkboxes, exit icon, accordion icons, quantity selector, and carousel dot indicators.
Disabled Color & Background refers to the text and background color for disabled components, such as out of stock or loading buttons that users cannot interact with.
Focus Color targets accessibility feature text. Use the accessibility feature in preview mode to see focus states and their colors. Keeping it as default is suggested if there are no specific desired colors.
Footer specific text settings will be in the “header and footer” tab and have their own set of text color settings. We recommend matching the “Reverse Text” color for consistency across your brand.

Body Text & Links/Headings

Depending on the theme variant selected, there will be different text options available.
Pre-set fonts were selected to be easy to read.
Can change font sizes if desired.
While customizing for mobile view, desktop versions will naturally scale up from settings.
Heading 1 is the largest heading you’d see and set on the site, and all other heading settings trickle down in size from there.

Global Border Radius

These settings apply to all corners/borders aside from the following list, which have their own controls in different areas of the settings:

Primary & secondary buttons
Product card buttons
Footer subscription input field and button
Checkout buttons, search input field and button
Carousel arrow button
Footer subscription button

Image Loading

We recommend using the default setting for Lazyloading with LQIP so pages feel like they are loading quicker for users even if it is taking a while to load.

Blog

Note: Inside BC themes, the blog is called “Journal.”

Blog pages can be accessed through the footer in preview mode. From here, return to design mode to continue editing.
Specifying image dimensions will allow you to set max width & height for images. The smaller the images, the quicker your site will load. We recommend optimizing how your images will look, but if your images are small natively, you may keep to its default sizing.
Max width can be set to be larger than a mobile screen size. While this will be constrained on mobile view to the max mobile width, you will see changes in desktop, which respects the wider width you’ve set.
Max height can also be set to a height you want, but it will only change how it appears on desktop.

Pricing

If products have variants that have different prices, selecting this checkbox will display lowest to highest pricing for those products on product cards and product pages.

Buttons & Icons Theme Settings (Colors)

Button Base Font Size

Font Size will change font sizes for the text appearing across all your buttons.

Primary Action Button

These are the main call-to-action buttons.

Note: The only way to revert to having a no-color setting would be discarding changes. It’s important to first save the version where buttons have a no-color setting so that if you need to revert back to this state after selecting a color to preview, you will be able to return to that version.

The Zen theme variant has no color to the button background by default, but can be updated to be filled if desired.
Hover color states can be viewed in preview mode.
Elements refer to any icons you may have in buttons.

Secondary Action Button

These are the secondary buttons you’ve added to your site.

Preview more of these buttons on the homepage.
Glow setting will appear more on the Bend theme version so that on hover, the button will have a glow effect.

Button and Newsletter Border Radius

This setting customizes the border radius of select dropdowns, product card badges, filter input fields, checkbox containers, product variants selectors, input fields, PLP page mobile select dropdowns, PLP mobile filter buttons, form increment buttons (such as quantity selectors), form option variants, account page address boxes, checkbox containers, and accordion borders.

This will change the border radius setting for the email newsletter input field at the bottom of your site.
Star review icon (empty) setting, under Icons, refers to the color a star displays when it is empty, this can be kept with no color or set to an inactive color state of your choice.

Header & Footer Theme Settings

Logo

Note: To upload a logo, return back to Storefront menu (outside of the theme styles) > Logo > Select your logo type & upload logo asset.

Logo position and size changes will only reflect on desktop, while mobile logo position will remain in the center.
While different sizings are possible, keep in mind that the larger the logo, the larger your menu and header will become. This may make it more difficult for users to navigate when required to move their mouse further across the screen.
Logo font size: If you chose not to upload an image for a logo, you can control the font size of the text logo you’ve added.

Main Navigation

Hiding linkings to web pages: Having this checked will hide content pages, but keep shoppable pages displayed in the navigation.

Suggestion: For most stores, keeping content pages hidden will optimize your navigation for a more product-focused user experience. However, stores with smaller catalogs may find more value in unhiding these web pages in order to create a more content-focused experience.

Social Media Icons

These are settings for the footer to display social media, unchecking this will display an empty column in the footer where social media icons used to appear.

Promotion Banner

This refers to the banner at the very top of the page for any promotions or announcements for your site, and you can customize its background and text colors.

Header

Header icon style: Select from a pre-set collection of icon styles that come with our different theme variants to best suit your brand.
Header background color: Changes the color of your header that appears at the top across all pages of your site.
Header icon color: Changes the color of icons in your header, which by default is the cart icon.
Header icon text color: This changes the quantity text color that appears in the cart icon when a product is added to cart.
Header icon background color: This changes the background color of the quantity that appears in the cart icon when a product is added to cart.

Footer

Footer background: This changes the background color of the footer section.
Footer content color: This changes the text color in the footer section, with the exception of the dividers.

Display Settings

You may choose to hide “Powered by BigCommerce” if desired.

“Show brands in footer” is recommended to keep on if you have brands set up and are a primary route for users to shop your products. Brands would appear as navigational links in your footer when this is active.
“Show ‘&copy’, current year and store name” is recommended to keep on to display copyright and store information.

The area showing this is using the primary text color for privacy & terms links, secondary text color for copyright information, and general site background color for the background. You may adjust its colors back in the theme global settings.

Products Theme Settings

Product Sale Badges

This section is referring to the labels that appear on top of product cards.

Settings here will adjust its alignment, what the ‘sale’ and ‘sold out’ badge displays as, its default colors, and hover color.

In the backend of BigCommerce, you can choose to hide sold out products from your site.

Product Card Display

Quickview: You may choose to hide quickview buttons that appear on product cards on hover, which opens an overlay for users to shop a product without navigating into a product page. If you have a catalog with higher purchase values where users are likely required to visit a product page to assess its full details, we recommend removing quickview to reduce the number of clicks needed to get to the product page.

Product Details Page

These settings customize data information to be displayed or hidden on the product page.

Filters Display

These settings customize the product list page’s filter column. You can hide price options from filters (by unchecking “Show ‘Shop by Price’ in filters”), and the site’s category navigation (by unchecking “Show Category Nav Link”) from this interface if desired.

Number of Products Displayed

These settings customize how many products to display on each page type by default before a ‘load more’ button appears.

For product page settings, this will customize how many products are in cross-sell carousels.

Product Cards (Quick Search)

These settings customize the styling for product cards that appear in the search drop-down when a user enters a search term in the search input field.

Image sizes

Main product images settings will customize product page image gallery sizing for desktop, and will keep the same size on mobile.

Suggestion: If you have more product information in the buy section, it would be best to keep the image gallery and buy section sized evenly. Conversely, the less product information you have, the more visual reference customers require, so it would be best to increase the size of your image gallery.

Thumbnail image in product page will customize the sizing of thumbnails in the image gallery.

Suggestion: Larger thumbnails provide more visual reference to users but we advise against scaling them too large as they will begin pushing down important product information on mobile, preventing it from showing in the first viewport.

Thumbnail image in cart and other pages refers to images in the cart, order content, return, and order list templates, which can be customized with specific dimensions if desired or left on default as the original dimensions have been optimized to work best with the theme.
Zoomed image refers to how far the image zooms in on the main image gallery on product pages. By default, this is optimized for the theme and zooms to 1200x1200px.
Brand image in gallery view is the fallback size setting for brand images on the brand list page.
Product swatch images customize the sizes of the visual swatches that appear as variants on product pages (such as color). We recommend keeping it to its default sizing for visual clarity and to prevent it from taking up too much vertical space in the buy section.

Checkout Page Theme Settings

These settings adjust the colors and logo placement on checkout pages. We recommend keeping all colors to match how you’ve set your colors in global theme settings to remain consistent with your brand.

To preview changes, you have to view the site link. Unfortunately, the customizer will not allow you to preview changes.

Widgets

Page Builder Widgets App Guide

How to Use Widgets

Log in to BC store & navigate to “Storefront” on the left side panel
Click “Customize” on the selected theme to bring up customizer window
Navigate to “Page Builder” tab on the left side menu to bring up the widget panel
Bamboo specific widgets are available under the “Custom” widget menu, located below the native BC “Basic” widget menu
Simply drag & drop desired widget into design mode’s widget sections

Be cautious of the width of “Drop widgets here” zones. If you want to add a full-bleed widget, you must drop the widget in a widget zone that is full-screen wide. Other widget zones with padding from the screen sides will be wrapped in an element and will constraint your dropped widget to that padding.
To edit the column settings where you dropped your widget into, you will need to access “Layers” from the left side panel and locate the column you wish to adjust the settings of (content alignment, margin & padding, background settings, border settings)

Available Widgets

Content Image

To add a text & image section

Category Carousel

To add a carousel of featured categories of your choice

Hero Carousel

To add a hero banner carousel with images, description, and call to actions

Section Header

To add header text to a section

Custom Content

To add an accordion section with custom details (good for product pages)

Custom Image

To add an image of your choice to a section

Featured Product

To add a carousel of featured products of your choice

List Section

To add a list view of text details

Category Blocks

To add a grid view of featured categories of your choice
On desktop, this will dynamically wrap and stack when you add more than 3 category blocks. To ensure there isn’t too much white space in this section, add in category blocks until they fill up the next row(s) of the widget.

Accessing Widget Section & Block Settings

Widgets with repeating blocks & ability to add more blocks:

Template settings are nested in “...” icon drop down

Adding new blocks will have data pre-filled but may not always show up in the preview or save.

Usually requires merchant to fill in all block content to successfully save & preview

Widgets without repeating blocks/ability to add more blocks will directly show template customizer

Widget Customization & Preview Quirks

Previews

General

Some previews may not accurately show before clicking ‘save’. It’s important that the merchant completes updating all widget information and then clicks save in order to see how the template will actually appear.
The logo of the site will appear under the mobile header in design mode to allow for a widget zone to appear in the header, but when previewing and saving, the logo will return back to the header. position.

Category Carousel

Preview will show as stacked product cards, but after clicking ‘save’, they will return to a carousel view.
To customize section, text, and button settings, click “...” in the top right corner of the widget settings panel, and click “settings.”

Carousel Rows will customize the carousel to 1 or 2 stacked rows.
Checking “Mobile Full Width” will display your carousel full width across mobile screens, meaning the product cards will reach the edges of the screen. Unchecking this setting will introduce padding to the sides of the carousel, so that product cards will have some space from the edges of the screen.
Mobile Card Display will change mobile card sizings. The ‘small’ setting will fit more cards in a single mobile viewport.

To see updates to the carousel accurately, changes must be saved first. The preview mode will initially show the carousel as stacked cards but this is not representative of how it will actually appear on your site.

Hero Banner

Only “Slide 1” will appear in the preview. Additional slides will not display in previews. So to preview them, move each slide to “Slide 1” and then revert it back to its original order.
To make your hero banner full bleed, update right and left padding to “0” in the column setting (you can locate this in the “Layers” tab in the left sidebar under the column your hero carousel lives in).
To add contrast to the text overlaying the banner, you can customize its background overlay color in the “Add Content Background Gradient” setting.

Product Carousel

Preview will show as stacked product cards, but after clicking ‘save’, they will return to a carousel view.
To see updates between 1 row settings and 2 row settings, changes must be saved first.

Color Settings

Active swatch selections from the swatch menu will display a white circle in the middle of the swatch. For an accurate reference of the color selected, refer to the HEX code and the color swatch displayed in the main widget customizer module.

Background Images

After setting an image as a background, there isn’t a way to remove the image as the background. The previous widget will need to be deleted and recreated without an image background.

Container Image Alignment

Alignment will only change if the image width is shorter than the container.

Button & Text Styling Options

Some drop-down selections may encounter repeated stylings.
To adjust sizes of buttons, customize the padding to increase or decrease their width and heights.

Recommended Logo & Image Sizes

These recommendations are made with mobile in mind.

Logo: 250x100px
Product images: 1280x1280px
Brand logo images: 190x250px

Icons

How to change theme icons

Dropdown of theme type icons (bend, grove, zen)
User controls:

Icon colors
Icon files (user cannot upload new icons, but can choose from pre-set ones)

In Bend, the design style of “Menu” and “Cart” icons are natively unique from “Zen” and “Grove” but can be applied to these themes. From the theme setting, the client(merchant) can pick the “Menu” and “Cart” icons based on the 3 theme style names and the icon should show according to the selected item.

Additional Settings

Homepage Settings

Header & Footer

Header height is hardcoded to 65px on mobile.
The logo image will take up the full height of the container.
Depending on the width of the logo, the sizing will differ, but it should be no taller than 65px on mobile view.

Product carousel

Merchant should set up a product in their featured products list that has a sale so its easier to reference the changes to styling for the badges when setting up the theme styles

Newsletter

For detailed step-by-step instructions, we recommend checking BigCommerce’s official documentation here: https://support.bigcommerce.com/s/article/Collecting-Newsletter-Subscriptions?language=en_US

Footer

These are native links that dynamically pull from your available site pages, categories, and brands if they exist. This will require custom code to add more pages.

Navigation Bar Settings

Announcement banner

For detailed step-by-step instructions, we recommend checking BigCommerce’s official documentation here: https://support.bigcommerce.com/s/article/Creating-Editing-Banners?language=en_US

Header

Header height is hardcoded to 65px.
The logo image will take up the full height of the container.
Depending on the width of the logo the sizing will differ but it should be no taller than 65px on mobile view.

Menu links are dynamic and automatically pulled from your category set up. There is currently not a way to customize additional custom links.

Product Page Settings

Reviews

For detailed step-by-step instructions, we recommend checking BigCommerce’s official documentation here: https://support.bigcommerce.com/s/article/Managing-Reviews?language=en_US

Related Products

This can be enabled/disabled on each product individually in the product admin, BC will automatically pull in related products for you.

Blog Settings

General blog settings are located in your Storefront > Blog settings, where you can edit blog title, description, URL, add/edit posts, choose visibility of your blog and modify social sharing and comments.

Content Page Settings

For detailed step-by-step instructions, we recommend checking BigCommerce’s official documentation here: https://support.bigcommerce.com/s/article/Web-Pages?language=en_US#pagebuilder

Checkout Styling Settings

Checkout

To preview the checkout when customizing the theme styles, you will have to use the preview site link and open the checkout flow in a separate tab.

Extra Integrations (Third party apps)

The Bamboo theme works with many third party integrations. If you’d like recommendations and support on installation and setup, please reach out to our support team at [email protected].

Support

For additional support, please reach out to our team at [email protected].

Knowledge Base