BigCommerce Minimal design - how to edit your theme - original - not live

ADMIN NOTE - Colour scheme is just for my reference

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.

Simply click on the header and it will unfold and display the required information.

Styles:

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. 

Global:

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).

Headings:

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:

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).

Pricing:

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:

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:

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)

Navigation:

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:

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:

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

Products:

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

Buttons & Icons:

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)

Forms:

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

Column Layout:

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)