Loading...

Knowledge Base

Ecommerce Online Store - Design - Colors, Fonts, and General Style Settings

Overview

The Colors, Fonts, and General Style Settings page allows you to specify a whole range of fonts, colors, and other aspects of the way your storefront is displayed. While the selected theme determines the default settings for these options, you can change them, if desired, by selecting a new color, font, or size.

Colors

The Colors tab contains a list of all available colors on the storefront. To change a color, either enter the Hex code or click to select a color from the color chooser on the right. Once selected, click Save to apply to the storefront.


Note: The default colors depend entirely on the selected theme for your site design. If you choose a new theme, your default color selections will change.


Back to Top

 

Fonts

The Fonts tab is broken into several sections, each of which can be controlled by a single font setting. In addition, there are all-encompassing font settings for every category of font, as well as a setting that can change all fonts on the site at once.

Every customizable font is controlled by drop-down options. From these drop-downs, the following items can be changed.

Font: Arial, Arial Black. Courier New, Garamond, Georgia, Impact, Lucida Console, Palatino Linotype, Tahoma, Times New Roman, Trebuchet, Verdana.

Font Size: Enter a value and select from em, %, px, or pt. Additional options are bold, italic, normal, bold italic, underline, or strikethrough.

Font Color: The HTML code for the color can be entered or the color can be selected from a color chooser on the far right.

 

Site-Wide Fonts

The settings below are for the site-wide fonts.

 

Product Lists

The following image displays the options available for fonts used with the Product List.

 

Product Detail

The following image displays the options available for the fonts used on the Product Details page.

 

Cart Details

The following image displays the options available for the fonts used on the Cart Details page.

 

Checkout

The following image displays the options available for the fonts used on the Checkout page.

 

My Account

The following image displays the options available for the fonts used on the My Account page.

Back to Top

 

General Style Settings

There are four areas of the storefront which can contain custom images. Once an image is uploaded from a local machine, it can be positioned and tiled if desired.

The column widths can be set as a fixed pixel width or a percentage under the Width & Alignment section. Click the drop-down button to switch between pixels (px) and percentage (%). The image below depicts the default values for your site.

There are several ways in which you can specify how your site will be displayed. Choose between the percentage based width, a pixel width, an 'em' width, or a 'pt' width. While the pixel is a specific number, the percentage takes its number from the total space available.

For example, if the main table width is 100%, it is at its maximum size for the web page, which will size it as the browser gets bigger or smaller. However, a pixel width will keep the size at that specific width, no matter the size of the browser.

For more in-depth information about pixels, percentages, 'em', and 'pt', please visit the  W3schools website.

Back to Top

 

Did you find this article helpful?

 
* Your feedback is too short

Loading...