Post on 11-Nov-2014
description
transcript
Eshopbox Wiki for Store Owners
How to customize Fonts of page elements on your Eshopbox site
Category: Design
What you will learn here
What does customization of Fonts mean
How to customize Fonts of different page elements
Welcome to Eshopbox Wiki
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
1What does Customization of
Fonts mean
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Fonts customization is the process of changing the color, size, style etc of the font selected by you
This can be applied on any page element according to your requirement
Font family consists of Font Font Size Font Color Font Weight Font Style
What does Customization of Fonts mean
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
2How to customize Fonts of
different page elements
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 1:
Log in to your eshopbox site admin panel with your login id and password
Click on ‘Design’ tab and select ‘Store Design’ from drop down menu
You will be directed to the ‘Store design’ page
How to customize Fonts of different page elements
Store Design link
Design Tab
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 2:
On your ‘Store Design’ page, select ‘Customize’ button to change the
Fonts of page elements
How to customize Fonts of different page elements
Store Design Page
Customize button
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 4:
Now, you are on the home page of your eshopbox site where you can see
the design tool bar
Click on ‘Appearance’ editor
How to customize Fonts of different page elements
Design Tool BarAppearance Editor
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 5:
On the Appearance editor, click on ‘Fonts, colors & sizes’ link
How to customize Fonts of different page elements
Appearance editor Fonts, colors & sizes
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 6:
Now by clicking on ‘Scroll bar’, ‘select element’ to customize its Fonts
How to customize Fonts of different page elements
Select element
Scroll bar
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 7:
On the Appearance editor, click on ‘Font’ and select the different Fonts
from the given options
How to customize Fonts of different page elements
Font
Arial
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 7.1:
The appropriate font of selected element has been set
Now click on ‘Save changes’ to save the font of the element
How to customize Fonts of different page elements
Save changesSelected Font
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 8: Next, click on ‘Font size’ from where you can drag the ‘slider’ to change
the font size of the element as per your need
On moving the slider, you can change the Font size in pixels and then
select the value which is shown as ‘Current Value’
You can select the value by clicking ‘Set’ tab
How to customize Fonts of different page elements
Font Size
Set TabSlider
Current Value
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 8.1: The ‘font size value’ has been set successfully
Click on ‘Save changes’ to save the font size of the element
How to customize Fonts of different page elements
Save changes
Font size value
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 9: To change the color of the font, click on ‘Font color’
Select the ‘color’ from ‘Color Palette' according to your choice and then
click on ‘Selector’ to set the color
How to customize Fonts of different page elements
Font Color
Selector
Color Palette
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 9.1: The font color value has been generated and assigned to the specific page
element
Now click on ‘Save changes’ to save the font color of the element
How to customize Fonts of different page elements
Save changes
Font color value
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 10: To change the ‘Font weight’ of the font, click on ‘Font Weight’
Select the appropriate ‘font weight’ according to your choice from the
given options
How to customize Fonts of different page elements
Font Weight
Bold
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 10.1: Now the font weight has been set successfully
Click on ‘Save changes’ to save the font weight of the element
How to customize Fonts of different page elements
Save changes
Selected Font Weight
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 11: To change the style of font, click on ‘Font Style’
Select the appropriate ‘Font Style’ from the given options
How to customize Fonts of different page elements
Font Style
Normal
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 11.1: The appropriate font style has been selected
Save the changes made by you by clicking ‘Save Changes’ button
How to customize Fonts of different page elements
Save changes
Selected Font style
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Step 12:
Now click on ‘Save & Exit’ button to save the changes
By clicking on ‘Save & Exit’ button, your Fonts will be changed as per the
selection made by you and you will be directed to the ‘Design’ page
Clicking on ‘X’ will undo all the changes you have made on Font
Click on ‘Save & Exit’ to successfully save your changes
You have successfully save all the changes
How to customize Fonts of different page elements
Save & Exit button
Design tool bar
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Select the appropriate Fonts for each element from the multiple options
given
You can change Font size of an element ranging from 0 to 25 pixel (px)
Use the Fonts which are clearly visible and suitable on your storefront
Always check, the changes made by you in the real time on your
storefront
You can modify the Fonts of elements whenever required
Good to know
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.
Wiki : A collection of illustrative presentations which will guide you in
a step by step manner to answer your store related queries.
Knowledgebase : A repository of detailed articles that provide you with in depth information about running your store and understanding the process involved.
Forum : An open community for Store owners to share and discuss everything about Eshopbox. Get real and practical solutions to most of your problems.
Blog : A rich source of Tips, Articles and Announcements that keep you
updated about the latest happening and techniques to enhance your art of selling online.
Ask a question : Find simple answers to complex questions through our experts. For any further assistance, mail us at support@eshopbox.com
For More Support
A Eshopbox Wiki production. © All Rights Reserved at BoxBeat Technologies Pvt. Ltd.