Style Tab
Once you have added a store to the Store list, you can start designing the storefront. You can change the overall look and feel of a storefront at any time, however, it is recommended to do this while the store is off-line.
Prerequisites
Products and other resources such as shipping, taxes, languages, etc. must also be set up before you can continue with the following procedures.
Set-up
Style
You have four options to set the basic style of the pages.
•Autumna 22: Provides a modern look to storefronts by using flat tints, rounded corners, bigger buttons with more padding and larger text, minimized shadows, more white space, along with making stores more mobile-friendly.
•Show Colored Bars: Displays colored bars at the top and bottom of the pages in the primary color.
•Show Custom Background: Activates the Background panel with options to work creatively with a background image that’s displayed on all pages.
•Show Swirl: Displays a swirl in the color of your choice on all pages.
NOTE: Some of the parameters listed below may not be available depending on the style chosen.
Primary Color
Used for top level design elements such as main buttons, link text, boxes
Secondary Color
Used for lower level design elements such as the border of the contact box
Swirl Color
The color of the swirl image
Logo
Puts a logo on the left side of the banner on each page.
NOTE: This logo also appears in e-mails sent to users.
Store FavIcon
A favicon is a small image which appears in the address bar, tabs and favorites bar of the browser. Special tools are available on the internet to create a favicon file (ICO).
Homepage Options
Defines the place of the content for the homepage:
•Place content at the bottom
•Hide content
•Place content to the left
•Place content on top
NOTE: Homepage Options will replace Pages parameter only when the Style Autumna 22 is selected.
Pages
Makes your storefront responsive to ensure optimum viewing on a variety of screen sizes. See “Responsive Design”. If you do not select this option, your storefront website will have a fixed width (960 px) and shoppers will have difficulties reading, navigating and ordering products on small devices.
NOTE: This parameter is only available for the Style options Show Colored Bars and Show Custom Background.
Category and Product
Image Scaling
Select the Automated Scaling check-box to enable the hovering behavior option: Show zoom effect in category and product rollovers.
Hovering Behavior
This option lets you control what happens when a shopper hovers over Product Categories and Products:
•Show short description in category and product rollovers: hides the image and shows the short description
•Show thumbnails in category and product rollovers: only changes the background color to the primary color
•Show zoom effect in category and product rollovers: the thumbnail images will cover the entire area of the box. Select the Image Scaling - Automated Scaling check-box to enable this option. You need to upload thumbnail images which are large enough: 720 px wide x 430 px high.
Title Font
You can select a different web font for the categories and products.
Title Font Size
You can select a different web font size for the categories and products.
Store
Main Font
You can select a different web font for the store.
Button Font
You can select a different web font for the buttons.
Body Text Size
You can select a different web font size.
Background
The background of your pages is the bottom most layer where you can use an image or color to fill the entire window. The overlay is the layer above the background that contains the actual content of the pages. If the page is long, the overlay scrolls over the background.
Text Color
If you choose a dark overlay color you should set a light color for the text to override the default black color for text.
Color
Sets the background color of the pages.
Overlay Color
Sets the background color for the content section and cart area of the pages.
Overlay Opacity
Enter a value lower than 100 to make the overlay area of the page transparent.
Language Bar Opacity
Sets the opacity of the language bar in the top right corner. You may want to change this if the language bar interferes with your page design. Set to 0% to make the bar invisible. See also “Languages Tab”. (Does not apply for responsive storefronts.)
Image
The image used as the background for all the pages.
Attach to
Lets you control scrolling of the background image on the storefront pages:
•Browser Window: The background image is fixed to the browser window and will never scroll.
•Web Page: The background image is fixed to the page content and the image and content scrolls up and down.
•Menu Bar: The background image starts from the menu bar and is fixed to the page content. The image and content scrolls up and down.
Position
Anchors the image in the specified Position: Center, Left, Right, Center, Top, Bottom.
Repeat
Options to repeat the background image vertically and/or horizontally.
 |
 |
 |
TIP: When designing your storefront, you can see your changes by logging onto the storefront and refreshing the pages (press F5 or click the Reload button).
 |
 |
 |
Create the look and feel in the Style tab
1 On the menu bar, choose Stores and select the store you want to style.
2 In the Style tab, you start by selecting the basic style from the Style drop-down list.
TIP: Don’t choose bright or light colors for text on the storefront because this can be difficult to read.
3 Click the color patches to edit the primary and secondary colors.
The color picker is displayed.
 |
4 Select a color with the hue slider (rainbow colors) and make the hue lighter or darker by moving the cursor in the mixer pane on the left. Alternatively, enter an RGB, HSB or a 6-digit hex value.
The new color is displayed in a patch adjacent to the current color.
5 Click outside the color picker to close the picker and confirm your new color.
6 If applicable, change the Swirl Color image on the storefront.
7 Click Browse to select a logo for display in the banner of the storefront.
The logo is previewed underneath the Browse box. You can delete the logo by clicking the Delete button or replace it with another.
8 Click Browse to select a store Favicon.
The favicon image is previewed underneath the Browse box. You can delete the favicon icon by clicking the Delete button or you can replace it with another.
9 If you selected the Show Custom Background style option, set the colors and images for the background of the pages.
10 Click Save to confirm your changes.
 |
doc. version 6.0.4