This article will break down how to customize all the elements on your Frooition Minimal BigCommerce theme.
To get to the edit section you need to log on to your BC store and then navigate to 'StoreFront > My Themes' in the side bar, once on this page you will see a blue button that says 'Customize', click this and you'll be re-directed to the edit page.
Once you have made any changes you can click 'Save' or 'Publish' in the top right of the screen. Save will save all changes made but not push them to your live store, Publish will save and apply all changes to your live store.
Click the red headers and open them up to display the content.
This section will contain the styles that you can apply to your BC store. The current style will have a green tick to show what is selected.
Background and lines:
Page background – color
You can select the page background color in this section, this will take effect on all pages across your BC site.
Banner background - color
Banners are the special offer banners configured under Marketing > Banners.
You can select the banner background color in this section, this will take effect on all pages across your BC site.
Text & Links:
Body text font family – dropdown (font choice)
This controls the text font for all text across your BC site, unless it's overridden elsewhere (such as headers or banners)
Body text second font family – dropdown (font choice)
This is the secondary text font for all text across your BC site.
Body text font size – dropdown (Pixel size)
This allows your to control the main text size that you want to use, it can overridden elsewhere (such as headers or banners)
Main text color – color
This controls the main text color across your BC site.
Main text hover color – color
This controls the main text color when the text is being hovered over by a pointer.
Secondary text color – color
This controls the secondary text color across your BC site.
Secondary text hover color – color
This controls the secondary text color when the text is being hovered over by a pointer.
Link color – color
This is the color of the links in your BC store.
Link hover color – color
This is the color of the links in your BC store while they are being hovered over by a pointer.
Link active color – color
This will be the active color of the links on your BC site (when they are clicked).
Font family - Dropdown (Font choice)
This controls the text font used across all heading sections.
Heading level 1 - Dropdown (pixel size)
This controls the font size used across all heading level 1 sections.
Heading level 2 - Dropdown (pixel size)
This controls the font size used across all heading level 2 sections.
Heading level 3 - Dropdown (pixel size)
This controls the font size used across all heading level 3 sections.
Heading text color - color
This controls the font color used across all heading sections.
Loading indicators:
Page loading bar - color
This allows you to set the color of the page loading bar.
Spinner light half - color
This allows you to set the color of the light half of the loading spinner.
Spinner dark half - color
This allows you to set the color of the dark half of the loading spinner.
Blog image size - Dropdown (Multi choice)
Optimized for theme – This options lets the theme select the size for the blog image (recommended).
Specify dimensions – You can select a desktop size yourself (will auto-scale down for smaller devices).
Price ranges - tick box
Show price ranges for options that adjust pricing e.g. 0.99 - 4.99
Purchase options
Restrict purchase to login - tick box
Hide prices and add to cart buttons if customers aren't logged in.
Header background color - color
Controls the color of the header backgrounds site wide.
Mobile & Tablet menu position - dropdown (Left or Right)
choose where the mobile/tablet menu appears on your store.
Logo position (Mobile & Tablet) - dropdown (Left or Right)
Choose where the mobile/tablet logo appears on your store
Logo Text color - color
Choose the color of the text used in your logo.
Font family - dropdown (Font choice)
Assign the text font used in your logo.
Image logo size - dropdown (Multi choice)
Optimized for theme – This options lets the theme select the size for the blog image (recommended)
Original – as uploaded size
Specify dimensions – You can select a desktop size yourself (will auto-scale down for smaller devices)
Icons:
Icon color – color
Choose the color of your icons
Icon hover color – color
Choose the hover over color of your icons
Dropdown cart background – color
Select the color of the background on the Dropdown cart
Dropdown cart border color – color
Select the color of the border on the Dropdown cart
Main Navigation:
Hide web pages in Nav? – tickbox
Hides the shop pages in the navigation menu
Top level categories visible in menu – dropdown (numerical choice - 1-20/unlimited – 8 recommended)
Select the number of top level categories visible in the menu
Menu option color – color
Select the menu option color
Menu option hover color – color
Select the menu option hover over color
Dropdown background color – color
Select the dropdown background color of the navigation menu
Dropdown border color – color
Select the dropdown border color of the navigation menu
Footer colors:
Footer background color – color
Select the background color of the footer
Footer link color – color
Select the color of links in the footer
Footer link hover color – color
Select the color of hovered over links in the footer
Footer text color – color
Select the text color of the footer
Footer Features:
Show pages in footer – tick box
Choose if you want to show pages in the footer
Show categories in footer – tick box
Choose if you want to show categories in the footer
Show brands in footer – tick box
Choose if you want to show categories in the footer
Footer payment icons:
Select which payment platform icons you wish to display in the footer
Visa – tick box
Mastercard – tick box
American Express – tick box
Discover – tick box
Paypal – tick box
Apple Pay – tick box
Apple Pay color button – dropdown (color options)
Copyright Notice:
Show “Powered by BigCommerce” – tick box
This option will display the "Powered by BigCommerce" tagline in the footer
Show “©”, current year and store name – tick box
This option will display information in this format: example - © 2019 Frootestsite
GeoTrust SSL
If you’ve purchased a GeoTrust SSL from BigCommerce, check your BigCommerce account dashboard for the correct ‘Common Name’ to use here
Once you have the Common Name, you need to enter it in this 'SSL Common Name' text box.
SSL Common Name - Text box
Enter the SSL key here
Seal Size – dropdown (Small or Medium)
Homepage column layout - dropdown (numerical choice)
Homepage carousel:
Show carousel - tick box
Select this option if you want to show the homepage carousel
Show carousel arrows – tick box
Select this option if you want to show the carousel navigation arrows
Carousel text background – color
Choose the text background in the carousel
Carousel heading color – color
Chose the heading color for the carousel
Carousel sub-heading color – color
Chose the sub-heading color for the carousel
Indicator color – color
Chose the indicator color for the carousel
Indicator active color – color
Chose the indicator active color for the carousel
Arrow color – color
Select the navigation arrow color
Arrow background color – color
Select the arrow background color
Arrow border color – color
Select the arrow border color
Allow image to stretch on large screens – tick box
Select this option if you are happy to stretch your carousel images to full width
Homepage Headings:
Homepage heading text – text
Add or edit the heading text on your homepage
Homepage subheading text – text
Add or edit the subheading text on your homepage
Homepage product areas:
Display products in a scrolling carousel – tick box
Select if you want to display products in a scrolling carousel
Featured products count – dropdown (numerical choice, 1-12)
Select the number of 'featured' products you want to display
Most popular products count – dropdown (numerical choice, 1-12)
Select the number of 'most popular' products you want to display
New products count – dropdown (numerical choice, 1-18)
Select the number of 'new products' you want to display
Homepage blog posts:
Blog post count – dropdown (numerical choice, 1-6)
Select how many blog posts will be displayed
Product cards:
Show quickview – tick box
This option will enable the product quickview
Display boarders around products – dropdown (yes or no)
Yes or no option to display borders around products
Product title color – color
Select the color of the product title
Product title hover color – color
Select the color of the product title while it's being hovered over
Product sale badges:
Display product sale badges – tick box
Option to display the sale badge on products that have been reduced in price (Sale Price in the pricing section - under product edit page)
Sale badge font – dropdown (font choice)
Select the font of the sale badge
Text color – color
Select the text color of the sale badge
Badge color – color
Select the badge color of the sale badge
Hover badge color – color
Select the color of the sale badge while it's being hovered over
Product page features:
Default price label – text
Add or edit the default price label text
Sale price label – text
Add or edit the sale price label text
Pre-sale price label (was price) – text
Add or edit the pre-sale price label text
Retails price label – text
Add or edit the Retail price label text
Product swatch image sizes – multi choice (standard or specify dimensions)
For texture swatches, max dimensions are 150x150
Show quantity selection on product pages – tick box
Allow buyers to select quantity from product page
Product description tabs – tick box
Display product description tabs
Product reviews in tabs – tick box
Display product reviews in tabs
Show product weight – tick box
Display product weight
Show product dimensions – tick box
Display product dimensions
Show "Shop by Price" – tick box
Show the "shop by price" option to shoppers
Wishlist dropdown background color - color
Wishlist dropdown color selection
Related products count – dropdown (numerical choice, 1-12 or disable)
Choose how many related products to display, or disable
Also viewed product count – dropdown (numerical choice, 1-12 or disable)
Choose how many also viewed products to display, or disable
Product review count – dropdown (numerical choice, 1-12 or disable)
Choose how many product reviews to display
Number of products per page:
Category pages – dropdown (6, 8, 9, 12, 15, 16, 18, 20)
Select the number of products to display on the category pages
Brand pages – dropdown (6, 8, 9, 12, 15, 16, 18, 20)
Select the number of products to display on the brand pages
Search result pages – dropdown (6, 8, 9, 12, 15, 16, 18, 20)
Select the number of products to display on the search result pages
Product cards (quick search):
Background color – color
Choose the background color for the product cards in the quick search section
Border color – color
Choose the border color for the product cards in the quick search section
Text hover color – color
Choose the text hover over color for the product cards in the quick search section
Image sizes:
Image size will auto-scale for smaller devices
Main product images – dropdown (optimize for theme or specify dimensions)
Select the image size for main product image, optimize for theme is recommended
Thumbnail image in product page – dropdown (optimize for theme or specify dimensions)
Select the image size for thumbnail image in the product page, optimize for theme is recommended
Thumbnail image in cart and other pages – dropdown (optimize for theme or specify dimensions)
Select the image size for thumbnail image in cart and other pages, optimize for theme is recommended
Zoomed image – dropdown (optimize for theme or specify dimensions)
Select the image size for zoomed product image, optimize for theme is recommended
Image in gallery view – dropdown (optimize for theme or specify dimensions)
Select the image size for the image in gallery view, optimize for theme is recommended
Brand image in gallery view – dropdown (optimize for theme or specify dimensions)
Select the image size for brand image in gallery view, optimize for theme is recommended
Primary action button:
Text color - color
Choose the color of the text on the buttons and icons
Text hover color - color
Choose the color of the hover over text on the buttons and icons
Text active color - color
Choose the color of the active link text on the buttons and icons
Background color - color
Choose the background color of the buttons and icons
Background hover color - color
Choose the background color of the buttons and icons on hover over
Background active color - color
Choose the background color of the active buttons and icons
Border color - color
Choose the border color of the buttons and icons
Border hover color – color
Choose the border color on hover over of the buttons and icons
Disabled button:
Text color – color
Choose the color of the text on the disabled buttons
Background color – color
Choose the background color of the disabled buttons
Border color – color
Choose the border color of the disabled buttons
Icon colors:
Icon color – color
Choose the color of the icon
Icon hover color - color
Choose the hover over color of the icon
Star rating empty color - color
Choose the star rating color while empty (0 stars / no reviews)
Star rating full color – color
Choose the star rating color (Color of the filled in star)
Label text color – color
Choose the label text color for forms
Input fields:
Text color – color
Choose the text color for all input fields
Background color – color
Choose the background color for all input fields
Border color – color
Choose the border color for all input fields
Border active color – color
Choose the border color for all active input fields
Disabled background color – color
Choose the background color for disabled input fields
Select boxes:
Background color – color
Choose the background color for select boxes (dropdown boxes)
Arrow icon color – color
Choose the arrow icon color for select boxes (dropdown boxes)
Checkboxes & radio buttons:
Icon color – color
Choose the icon color for checkboxes and radio buttons
Background color – color
Choose the background color for checkboxes and radio buttons
Border color – color
Choose the border color for checkboxes and radio buttons
This section allows you to choose if you want a 1 or 2 column layout on the listed page
The column layout is simply how many columns you want your data to display in. The image below will give you an idea between a 1 column and 2 column layout.
Side column position – dropdown (Left or Right)
Choose if you want the side column positioned on the left or the right side
Account page columns – dropdown (1 or 2)
Login page columns – dropdown (1 or 2)
Blog columns – dropdown (1 or 2)
Blog post columns – dropdown (1 or 2)
Brand list columns – dropdown (1 or 2)
Brand page columns – dropdown (1 or 2)
Cart columns – dropdown (1 or 2)
Category page columns – dropdown (1 or 2)
Compare page columns – dropdown (1 or 2)
Contact page columns – dropdown (1 or 2)
Error page columns – dropdown (1 or 2)
Gift certificate columns – dropdown (1 or 2)
Homepage column layout – dropdown (1 or 2)
Web page columns – dropdown (1 or 2)
Product page columns – dropdown (1 or 2)
Search columns – dropdown (1 or 2)
RSS page columns – dropdown (1 or 2)
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article