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 backgroundcolor

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 familydropdown (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 familydropdown (font choice)

This is the secondary text font for all text across your BC site.


Body text font sizedropdown (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 colorcolor

This controls the main text color across your BC site.


Main text hover colorcolor

This controls the main text color when the text is being hovered over by a pointer.


Secondary text colorcolor

This controls the secondary text color across your BC site.


Secondary text hover colorcolor

This controls the secondary text color when the text is being hovered over by a pointer.


Link colorcolor

This is the color of the links in your BC store.


Link hover colorcolor

This is the color of the links in your BC store while they are being hovered over by a pointer.


Link active colorcolor

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 colorcolor

Choose the color of your icons


Icon hover colorcolor

Choose the hover over color of your icons


Dropdown cart backgroundcolor

Select the color of the background on the Dropdown cart


Dropdown cart border colorcolor

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 menudropdown (numerical choice - 1-20/unlimited – 8 recommended)

Select the number of top level categories visible in the menu


Menu option colorcolor

Select the menu option color


Menu option hover colorcolor

Select the menu option hover over color


Dropdown background color color

Select the dropdown background color of the navigation menu


Dropdown border colorcolor

Select the dropdown border color of the navigation menu

Footer colors:

Footer background colorcolor

Select the background color of the footer


Footer link colorcolor

Select the color of links in the footer


Footer link hover colorcolor

Select the color of hovered over links in the footer


Footer text colorcolor

Select the text color of the footer


Footer Features:

Show pages in footertick box

Choose if you want to show pages in the footer


Show categories in footertick box

Choose if you want to show categories in the footer


Show brands in footertick 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 Expresstick box

Discover tick box

Paypal tick box

Apple Paytick box

Apple Pay color buttondropdown (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 nametick 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 Sizedropdown (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 arrowstick box

Select this option if you want to show the carousel navigation arrows


Carousel text backgroundcolor

Choose the text background in the carousel


Carousel heading colorcolor

Chose the heading color for the carousel


Carousel sub-heading colorcolor

Chose the sub-heading color for the carousel


Indicator colorcolor

Chose the indicator color for the carousel


Indicator active colorcolor

Chose the indicator active color for the carousel


Arrow colorcolor

Select the navigation arrow color


Arrow background colorcolor

Select the arrow background color


Arrow border colorcolor

Select the arrow border color


Allow image to stretch on large screenstick box

Select this option if you are happy to stretch your carousel images to full width


Homepage Headings:

Homepage heading texttext

Add or edit the heading text on your homepage


Homepage subheading texttext

Add or edit the subheading text on your homepage


Homepage product areas:

Display products in a scrolling carouseltick box

Select if you want to display products in a scrolling carousel


Featured products countdropdown (numerical choice, 1-12)

Select the number of 'featured' products you want to display


Most popular products countdropdown (numerical choice, 1-12)

Select the number of 'most popular' products you want to display


New products countdropdown (numerical choice, 1-18)

Select the number of 'new products' you want to display


Homepage blog posts:

Blog post countdropdown (numerical choice, 1-6)

Select how many blog posts will be displayed

Product cards:

Show quickviewtick box

This option will enable the product quickview


Display boarders around productsdropdown (yes or no)

Yes or no option to display borders around products


Product title colorcolor

Select the color of the product title


Product title hover colorcolor

Select the color of the product title while it's being hovered over


Product sale badges:

Display product sale badgestick 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 colorcolor

Select the text color of the sale badge


Badge colorcolor

Select the badge color of the sale badge


Hover badge colorcolor

Select the color of the sale badge while it's being hovered over


Product page features:

Default price labeltext

Add or edit the default price label text 


Sale price labeltext

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 labeltext

Add or edit the Retail price label text


Product swatch image sizesmulti choice (standard or specify dimensions)

For texture swatches, max dimensions are 150x150


Show quantity selection on product pagestick box

Allow buyers to select quantity from product page


Product description tabstick box

Display product description tabs


Product reviews in tabstick box

Display product reviews in tabs


Show product weighttick box

Display product weight


Show product dimensionstick 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 countdropdown (numerical choice, 1-12 or disable)

Choose how many related products to display, or disable


Also viewed product countdropdown (numerical choice, 1-12 or disable)

Choose how many also viewed products to display, or disable


Product review countdropdown (numerical choice, 1-12 or disable)

Choose how many product reviews to display


Number of products per page:

Category pagesdropdown (6, 8, 9, 12, 15, 16, 18, 20)

Select the number of products to display on the category pages


Brand pagesdropdown (6, 8, 9, 12, 15, 16, 18, 20)

Select the number of products to display on the brand pages


Search result pagesdropdown (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 colorcolor

Choose the background color for the product cards in the quick search section


Border colorcolor

Choose the border color for the product cards in the quick search section


Text hover colorcolor

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 imagesdropdown (optimize for theme or specify dimensions)

Select the image size for main product image, optimize for theme is recommended


Thumbnail image in product pagedropdown (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 pagesdropdown (optimize for theme or specify dimensions)

Select the image size for thumbnail image in cart and other pages, optimize for theme is recommended


Zoomed imagedropdown (optimize for theme or specify dimensions)

Select the image size for zoomed product image, optimize for theme is recommended


Image in gallery viewdropdown (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 viewdropdown (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 colorcolor

Choose the border color on hover over of the buttons and icons


Disabled button:

Text colorcolor

Choose the color of the text on the disabled buttons


Background colorcolor

Choose the background color of the disabled buttons


Border colorcolor

Choose the border color of the disabled buttons

Icon colors:

Icon colorcolor

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 colorcolor

Choose the star rating color (Color of the filled in star)

Label text colorcolor

Choose the label text color for forms


Input fields:

Text color color

Choose the text color for all input fields


Background colorcolor

Choose the background color for all input fields


Border colorcolor

Choose the border color for all input fields


Border active colorcolor

Choose the border color for all active input fields


Disabled background colorcolor

Choose the background color for disabled input fields


Select boxes:

Background colorcolor

Choose the background color for select boxes (dropdown boxes)


Arrow icon colorcolor

Choose the arrow icon color for select boxes (dropdown boxes)


Checkboxes & radio buttons:

Icon colorcolor

Choose the icon color for checkboxes and radio buttons


Background colorcolor

Choose the background color for checkboxes and radio buttons


Border colorcolor

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 positiondropdown (Left or Right)

Choose if you want the side column positioned on the left or the right side


Account page columnsdropdown (1 or 2)

Login page columnsdropdown (1 or 2)

Blog columnsdropdown (1 or 2)

Blog post columnsdropdown (1 or 2)

Brand list columnsdropdown (1 or 2)

Brand page columnsdropdown (1 or 2)

Cart columnsdropdown (1 or 2)

Category page columnsdropdown (1 or 2)

Compare page columnsdropdown (1 or 2)

Contact page columnsdropdown (1 or 2)

Error page columnsdropdown (1 or 2)

Gift certificate columnsdropdown (1 or 2)

Homepage column layoutdropdown (1 or 2)

Web page columnsdropdown (1 or 2)

Product page columnsdropdown (1 or 2)

Search columnsdropdown (1 or 2)

RSS page columnsdropdown (1 or 2)