Beacon was built following BigCommerce best practices with a design that is both simple and flexible, but also feature-rich and production-ready. The theme is easily customized using the Page Builder.
Configuration Options
To change your active Theme or to configure your current Theme: Go to Storefront › My Themes in my store. Clicking the "Customize" button will take you to the Page Builder, where you can customize the selected theme without having to write any code.
Within the Page Builder, selecting the "Theme Styles" option from the left-hand menu will present you with the following options for customization.
Support
Need assistance with our theme? Contact us for support at bigcommerce_support@brillianceweb.com
Recommended Image Sizes
We've put together general recommendations for creating and uploading imagery to your theme. The numbers below indicate width by height in pixels (px).
Store Logo
250x150
Homepage Carousel
1045x530
Featured Category Banners
Row of 3 banners under homepage carousel = 350x160 per banner.
Brand Logos
500x500px.
Blog Images
1060x360
Product Images
BigCommerce recommends product images at least 1028x1028px.
Styles
Theme Styles are preset combinations of colors, fonts, and settings which allow you to quickly change the overall look and feel of the site. Beacon comes with 3 unique Styles: Light, Bold, and Modern.
Global
| Background and lines | |
| Banner background | Changes the background color that appears behind text on a banner |
| Page background | Changes the background color of the overall site. It does not change the color of the header or footer backgrounds |
| Primary line | Changes the color of lines that divide header, footer and product description |
| Common dark background | The color of the overlay when using quick view |
| Modal overlay background | Changes the color of dark backgrounds such as the block that appears when a shopper adds a product to the cart |
| Alert popup box background color | Changes the color of popup messages and alerts |
| Horizontal lines | Color of lines that divide header, footer and product description |
| Text & links | |
| Body text font family | Font face to use for body text |
| Body text font size | Font size to use for body text |
| Body text color | Color of the filled portion of the spinner |
| Body text hover color | Affects the color of text, such as Logo Text, when you hover a cursor over it |
| Secondary text color | Changes the color of text used as subtitles, such as the links in the footer, the price of the product on the home page, and category breadcrumbs |
| Secondary text hover color | Affects the color of text such as the text in the footer when a cursor hovers over it |
| Link color | Hyperlinks created on webpages will have this color |
| Link hover color | The color displayed when a cursor hovers over a link |
| Link active color | The color that displays when a user clicks a link. This may display quickly and may not appear at all on some browsers. |
| Headings | |
| Heading font family | Select the font face to use for all headings |
| Heading 1 | Changes the size of large titles, such as the title of a Category or the Featured Product section on the home page |
| Heading 2 | Changes the size of h2 headings, such as the price on a product’s page |
| Heading 3 | Changes the size of h3 headings, such as heading text within a web page or product description |
| Heading 4 | Changes the size of h4 text, such as heading text within a web page or product description |
| Heading 5 | Changes the size of h5 text, such as product names, top navigation, Carousel button text, and Related Products tab |
| Heading 6 | Changes the size of h6 text, such as the titles of options |
| Heading text color | Affects the size and style of text found on the body of pages, including product descriptions, product prices on the storefront page and the account links in the upper right corner of the page |
| Loading Indicators | |
| Page loading bar | Color of the loading bar |
| Spinner light half | Color of the empty portion of the spinner |
| Spinner dark half | Color of the filled portion of the spinner |
| Modal loading background | Color of the loading overlay |
| Product thumbnail loading background | Color that appears while a thumbnail image loads |
| Image Loading | |
| Lazyloading Mode | Changes the "lazyloading" strategy for images across the site. Options are:
|
| Pages | |
| Hide breadcrumbs | Toggle showing/hiding the navigation "breadcrumbs" on pages across the site |
| Hide page heading | Toggle showing/hiding page headings across the site |
| Hide category page heading | Toggle showing/hiding Category page headings |
| Hide blog page heading | Toggle showing/hiding Blog page headings |
| Hide contact us page heading | Toggle showing/hiding the page heading on the Contact Us page |
| Products | |
| Display style | Select to display in a grid or a list |
| Blog | |
| Size of images | Set it to either optimize for the theme or with user-specified dimensions |
| Pricing | |
| Price Ranges | Show the range of prices (lowest and highest) for products with variants |
| Purchase options | Hide prices and add to cart buttons unless shoppers are logged in |
| Form input fields | |
| Label text color | Changes the color of the form labels that appear above text boxes or product option selections |
| Field text color | The color of text that appears inside a text box or drop-down menu |
| Field background | Color that appears behind the text in a drop-down menu or text box |
| Field background disabled | Color of a choice when it’s not selectable |
| Field border | Color of the border around drop down menus, text boxes and rectangle multiple-choice buttons |
| Field border active | Color of the border around drop down-menus, text boxes and rectangle multiple-choice buttons when you click to enter text or make a choice |
Header & Footer
| Header | |
| Header background | Color that appears behind the logo |
| Phone Number | |
| Show Phone Number | Toggle showing/hiding company phone number in the header |
| Phone Number Label | Label that appears next to the company phone number in the header |
| Phone Number | The company phone number displayed in the header |
| Logo | |
| Logo position | Aligns the logo left, center or right along the header. Affects both image and text logos. |
| Logo image size | Adjust the size of the logo to be the Original (as uploaded), Optimized for the theme, or Specify Dimensions. If Specify Dimensions is selected, two boxes for max height and width will appear, allowing you to enter dimensions. When you enter either dimension, it will automatically adjust the opposite dimension to maintain the image’s original aspect ratio. The Optimized option’s size is 200 x 100 pixels. |
| Logo font size | Size of the font used for text logo |
| Logo text color | Color of the font used for text logo |
| Utility navigation | |
| Text color | Color of the top-right links including Search, Login and Cart |
| Text hover color | Color of the top right links when a cursor hovers over them |
| Cart dropdown background | Color of the drop-down when Cart is clicked |
| Cart dropdown border | Color of border around the drop-down when Cart is clicked |
| Cart counter background | Color of the icon that appears next to the Cart link when an item is added |
| Main navigation | |
| Hide links to web pages | Toggles the visibility of web page links from the category navigation menu |
| Text color | Color of the top navigation text |
| Text hover color | Color of the top navigation text when a cursor is put over them |
| Dropdown menu background | Color of the drop-down when a category has subcategories |
| Dropdown menu border | Color of border around the drop-down when a category has subcategories |
| Dropdown menu display mode | Sets the display Simple (display depth of 3) or Alternate (display depth of 8) |
| Quick search background | Color of the background of the quick search area (appears when you click search in the header) |
| Social media icons | |
| Show social media icons | Display social media icons in the header |
| Footer placement | Display on the left or right of the footer or remove them all together |
| Footer | |
| Footer background | Color of the background in the footer |
| Display settings | |
| Show “Powered by BigCommerce” | Toggle the link back to BigCommerce.com |
| Show brands in footer | Show links to brands in the footer |
| Show ©, current year and store name | Toggle the copyright details in the footer |
| Payment icons | |
| American Express, Discover, Mastercard, PayPal, Visa | Enable or disable card and/or PayPal icons |
| Apple Pay button color | This allows you to set the color style for Apple Pay button. The Apple Pay button only displays on certain browsers. |
| GeoTrust SSL | |
| SSL common name | Enter your SSL Common Name for a GeoTrust SSL seal that appears in the footer. The common name is the domain name you entered when purchasing the SSL certificate. If you purchased through BigCommerce see Account Dashboard for more information. |
| Seal size | Change the size of the seal displayed in the footer to Medium or Small |
Home Page
| Carousel | |
| Show carousel | Toggle the carousel on or off |
| Show carousel arrows | Toggle the carousel arrows on or off |
| Allow image to stretch on large screens | Prevents cropping of large carousel images if the viewing screen is wider than 1261 pixels |
| Content background | Color of the box overlay on the Carousel |
| Header text | Color of the large text on the Carousel |
| Description text | Color of the smaller text on the Carousel |
| Indicator | Color of the empty dot below the Carousel if there is more than one slide |
| Indicator active | Color of the full dot below the Carousel if there is more than one slide |
| Indicator background | Color of the box behind the dots below the carousel if there is more than one slide |
| Arrow | Color of the left and right arrows if there is more than one slide |
| Arrow background | Color of the box behind the arrows if there is more than one slide |
| Arrow border | Color of the border of the box behind the arrows if there is more than one slide |
| Featured Categories | |
| Category ID's | Input your category IDs separated by a comma. Categories will display in order listed automatically. Example: 3,1,2. How to find a category ID. |
| Products | |
| Number of Featured Products | How many featured products to display on the home page, or disable this feature |
| Number of Most Popular Products | How many most popular products to display on the home page, or disable this feature |
| Number of New Products | How many new products to display on the home page, or disable this feature |
Products
| Product sale badges | |
| Show product sale badges | Display style of the sale badge |
| Display settings | |
| Show quickview button on product cards | Toggle the quickview feature |
| Show quantity selection on product pages | Toggle the quantity selector |
| Show product description tabs | Show Product descriptions under a tabbed area or directly on the page |
| Product custom fields in tabs | Show Product custom fields under a tabbed area or directly on the page |
| Product custom fields tab label | Tab label for product custom fields |
| Show product weight | Display the product's entered shipping weight |
| Show product dimensions | Display the shipping dimensions for the product |
| Show “Shop by price” in filters | Show the shop by price feature |
| Show product reviews | Show the product reviews on product pages and cards |
| Number of reviews on product page | Number of reviews displayed below the product description |
| Wishlist dropdown background | Color of the dropdown menu background when Add to Wish List is clicked |
| Number of products displayed | |
| Category page | Number of products that appear on one page in a category |
| Brand page | Number of products that appear on one page on a brand page |
| Search result page | Number of products that appear on one page of search results |
| Product page (related products) | Number of related products displayed below the product description |
| Product page (customers also viewed products) | Number of Customers Also Viewed products displayed below the product description |
| Category Page | |
| Show Category Image | Show category image on category pages |
| Product cards | |
| Product header text color | Color of the product’s title when viewed on the home page, category page, or search result |
| Product header text hover color | Color of the product's title when you hover a cursor over it |
| Button text color | Text color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image |
| Button background | Background color of the buttons, such as Add to Cart or Quick View, that appear when you hover over the product image |
| Product cards (quick search) | |
| Background color | Color behind the text with the product’s title and price |
| Border color | Color of the border around the product |
| Text hover color | Color of the text when the cursor hovers over the product card |
| Image sizes | |
| Main product images | This is the size of the main product image on a product’s page. See our article on Adjusting Store Image Sizes for more information on adjusting product image sizes. |
| Thumbnail image in product page | Size of the thumbnail images that appear on the product page |
| Thumbnail image in cart and other pages | Size of the thumbnail images that appear in the cart |
| Zoomed image | Size of the zoomed images throughout the site |
| Image in gallery view | Size of product images when they appear on the category page, brand page, or search results |
| Brand image in gallery view | Size of the brand image when viewed on the brands page |
| Product swatch images | Size for swatch options images |
Buttons & Icons
| Primary action button | |
| Button text color | Color of the text inside the button |
| Button text hover color | Color of the text in the button when you hover a cursor over it |
| Button text active color | Color of the text in the button when you click on it |
| Button background | Color of the button behind the text |
| Button background hover | Color of the button behind the text when you hover a cursor over it |
| Button background active | Color of the button behind the text when you click on it |
| Secondary action button | |
| Button text color | Color of the text inside the button |
| Button text hover color | Color of the button behind the text |
| Button text active color | Color of the text in the button when you click on it |
| Button border | Color of the line around the button |
| Button border hover | Color of the line around the button when you hover a cursor over it |
| Button border active | Color of the line around the button when you click on it |
| Tertiary action button | |
| Button background | Color of the “sort by” filter selector/drop-down |
| Button arrow icon | Color of the arrow in the “sort by” filter selector/drop-down |
| Disabled button | |
| Button text color | Color of the text inside the disabled button |
| Button background | Color of the button behind the text |
| Button border | Color of the border around the button |
| Icons | |
| Social media icon | Color of social media icons in the footer |
| Social media icon hover | Color displayed when the cursor hovers over a social media icon |
| Star review icon (full) | Color of the star icons that are empty in a star rating display |
| Star review icon (empty) | Color of the star icon rating that gets counted |
| Increase/decrease button | Color of the quantity change buttons |
| Checkboxes and radio buttons | |
| Checkbox and radio icon | Color of the checkmark on checkboxes, or the dot on radio buttons |
| Button background | Color of the box behind the check mark or radio dot |
| Button border | Color of the border around the checkbox/radio button |
Checkout
| Header | |
| Use background image | Check this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels. |
| Background color | Color that appears behind the logo |
| Header text color | Color of header text if using a text logo |
| Header border | Color of the border around the header |
| Logo | |
| Logo type | Add an image for your logo. By default, it will inherit the settings from the Logo tab. |
| Logo position | Moves the logo to the left, center or right side of the header. |
| Discount banner | |
| Banner background | Color of Automatic Promotion notifications (set up in Marketing) |
| Banner text color | Color of the text in Automatic Promotion notifications |
| Banner icon | Color of the icon that appears in Automatic Promotion notifications |
| Order summary box | |
| Box background | Color of the order summary box background |
| Box border | Color of the border around the order summary box |
| Checkout steps | |
| Icon background | Color of the circle behind the icon/number |
| Icon border | Color of the border of the circle around the icon/number |
| Icon text color | Color of the icon/number in the step |
| Headings | |
| Heading 1 font family | Font face for h1 text |
| Heading 1 text color | Color of h1 text |
| Heading 2 font family | Font face for h2 text |
| Heading 2 text color | Color of h2 text |
| Body | |
| Page background | Color of the page background |
| Focus color | Color of the focused/selected field on the checkout form |
| Body text and links | |
| Body text font family | Font face for the text that appears on the checkout page |
| Body text color | Color of the text that appears on the checkout page |
| Secondary text font family | Font face of text that is not a title, label or informational text |
| Secondary text color | Color of text that is not a title, label or informational text |
| Link font family | Font face for text links that appear on the checkout page |
| Link color | Color for text links that appear on the checkout page |
| Link hover color | Color of text links when you hover a cursor over it |
| Primary action button | |
| Button text font family | Font face for buttons |
| Button text color | Color of the text inside these buttons |
| Button text hover color | Color of the text in the button when you hover a cursor over it |
| Button text active color | Color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
| Button text disabled color | Color of the text when the button is disabled |
| Button background | Color of the button behind the text |
| Button background hover | Color of the button behind the text when you hover a cursor over it |
| Button background active | Color of the button behind the text when you click on it |
| Button background disabled | Color of the button behind the text when disabled |
| Button border | Color of the line around the button |
| Button border hover | Color of the line around the button when you hover a cursor over it |
| Button border active | Color of the line around the button when you click on it |
| Button border disabled | Color of the line around the button when disabled |
| Secondary action button | |
| Button text font family | Font face for buttons |
| Button text color | Color of the text inside these buttons |
| Button text hover color | Color of the text in the button when you hover a cursor over it |
| Button text active color | Color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
| Button background | Color of the button behind the text |
| Button background hover | Color of the button behind the text when you hover a cursor over it |
| Button background active | Color of the button behind the text when you click on it |
| Button border | Color of the line around the button |
| Button border hover | Color of the line around the button when you hover a cursor over it |
| Button border active | Color of the line around the button when you click on it |
| Form input fields | |
| Label text color | Color of the form labels that appear above text boxes or product option selections |
| Field text color | Color of text that appears inside a text box or drop-down menu |
| Field placeholder text color | Color of example text that appears inside a text box or drop-down menu before the user starts typing |
| Field error text color | Color of the error label text when a user attempt to submit the form without completing all required fields |
| Field background | Color that appears behind the text in a drop-down menu or text box |
| Field inner shadow | Color of the shadow next to the field border |
| Field border | Color of the border around drop down menus, text boxes and rectangle multiple-choice buttons |
| Checkbox button background | Color of checkboxes and payment method indicator |
| Form checklist | |
| Background color | Color of the background for payment methods |
| Form background | Color of the active/selected payment method |
| Form header text color | Color of payment method name text (if not a logo) |
| Form border color | Color of the borders around payment methods |
| Loading toaster | |
| Toaster background | Color of behind the text on the loading notification |
| Toaster text color | Color of the text on the loading notification |
Image(s) used under license from Shutterstock.com.
Release Notes
2.0.0 (4/3/2024)
Features
- Shopping List Improvements
- Allow for more than 3 featured categories to show on homepage
- Show drop-down menu on hover
- Added Search within Category
- Allow admin to choose grid vs list view for search and category page in Page Builder
- Typing exact Sku into Search takes user to Product Page
- Allow for more options on how many products are loaded on PLP & Search Pages
- Replaced tabs on product page with accordion layout
- Improved list view search/category design
- Replaced Pagination with Load More on Search and Category Pages
- Added link to phone number in header
Bugs Fixes
- Header & Footer Theme Stylings
1.0.1-rc1 (06-02-2023)
- Adjusted add to cart button styling on product pages.