We are currently working on a complete store designer that will allow you to change how your store looks everywhere and anywhere. We hope to release this soon. 

For now we have the following options ready for you to use. We will be adding more, so stay tuned.

 

Please note:

• This is still in beta (testing mode), if you find any issues please inform support@wazala.com.
• These options only work on your own website. Meaning the store as overlay or embed to your own website. 
• These options are not yet available for yourstorename.wazala.com.
• These codes must be added to your Wazala widget code on your own site to take effect. 
• You can add any of them, no need to add all of them if you want to change a few things only.
• You can place a color name like "orange" or you can use the HEX color code.
• Instead of words like orange you can use #ff6633.
• If you are not familiar with the color codes of the HEX chart you can checkout these sites that have done a great job in showcasing them:

http://html-color-codes.info/
http://www.colorschemer.com/online.html
http://www.allprofitallfree.com/color-wheel2.html
http://www.webmonkey.com/2010/02/color_charts/

 

 

Changing color and layouts of the store on your own website

This picture gives you an idea on what you can do and where. You may wish to use it as a reference.

 

 OK let's get down to business... here is what you can do... 

Widget Border/Background Color
To change the background color of the outer store area as well as the thin outer border you can use these codes:

Thin border around the entire store:
store_widget_options.widget_border_color = 'green';

Background of the store: (does not include the product area)
store_widget_options.widget_background_color = 'orange';

Here is a picture of how it would look like if they were green and orange. 

 Notes:
1. Making them the same color will remove the border and allow for a cleaner look. 
2. You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Content Border/Background Color
To change the background color of the content/product area border you can use these codes:

Border edges: (thin line around all the products)
store_widget_options.content_border_color = 'green';

Product border: (lines separating the products)
store_widget_options.content_background_color = 'orange';

Here is a picture of how it would look like if they were green and orange. 

Notes:
1. Making them the same color will remove the border and allow for a cleaner look. 
2. You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Product Box Border/Background Color
To change the background color of the product area you can use these codes:

Border edges: (thin line around the border of the products boxes)
store_widget_options.product_box_border_color = 'green';

Product background: (background color of the product boxes)
store_widget_options.product_box_background_color = 'orange';

Here is a picture of how it would look like if they were green and orange. 

Notes: 
1. Making them the same color will remove the border and allow for a cleaner look. 
2. You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Product Picture Border Color
To change the thin border around the product pictures you can use this code.

Thin line around the product images
store_widget_options.product_picture_border_color = 'orange';

Here is a picture of how it would look like if it was orange. 

 Notes:
1. Making this the same color as the picture background will remove the border and allow for a different look. 
2. You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Product Price Color
To change the color of the product price and buy now button you can use these codes.

The color of the price number 
store_widget_options.product_price_color = 'green';

The color of the Buy Now wording
store_widget_options.buy_now_color = 'orange';

The background color of the Buy Now button
store_widget_options.buy_now_background_color = 'blue';

Here is a picture of how it would look like if they were green, orange and blue.

 

Note: You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

Product Name Color
To change the color of the product name you can use this code:

The color of the product name
store_widget_options.product_name_color = 'orange';

Here is a picture of how it would look like if it was orange.

Note: You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Category Name/Background Color
To change the color of the category name or background you can use these codes:

The category name color
store_widget_options.category_name_color = 'orange';

The category background color
store_widget_options.category_name_background_color = 'green';

 Here is a picture of how it would look like if they were orange and green.

Note: You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

Menu Color
To change the color of the menu links you can use these codes. You can also place different colors on mouse hover:

 Top menu

Color of the main menu links
store_widget_options.menu_color = 'green';

Color of main menu links with mouse hover:
store_widget_options.menu_hover_color = 'orange';

 Footer

Color of footer menu links:
store_widget_options.links_color = 'green';

Color of footer menu links with mouse hover:
store_widget_options.links_hover_color = 'orange';

Here is a picture of how it would look like if they were green and on hover (store) orange. 
 

 Notes:
1. Making them the same color will remove the hover effect
2. You can use basic color names like: red, green, grey, or you can use the Hex color code as well like: #c0c0c0.

 

Other customizations

Side or margin padding
Adding the following codes will allow you to align the main menu and the footer to the sides of your store.

With this you can increase or decrease the margins on each side to align your menu and footer to your liking. 

Top menu left and right margins
store_widget_options.menu_bar_margin_left = '20px';
store_widget_options.menu_bar_margin_right = '20px';

Footer menu left and right margins
store_widget_options.links_bar_margin_left = '20px';
store_widget_options.links_bar_margin_right = '20px';

Note: for better alignment and symmetry keep them equal. 

Changing product elements' positioning
You can change where to position the product price, product name, buy now button, social elements, or simply remove any of them.

In the below codes these letters mean:

T= Product Name
P= Product Price
B= Buy Now Button
S= Social Buttons

To get it done, you must think of your product box as a table with 2 columns, then you can decide which 2 elements from the 4 above you wish to place “right” or you wish to place “left”

Here is how Wazala store is now, 

On the left side you have the product title, then below it the social boxes.

store_widget_options.product_left_column = 'TS';

On the right side you have the product price, then below it the Buy Now button.

store_widget_options.product_right_column = 'PB';

Here is a picture to refresh your memory.

Feel free to change these around as you see fit. 
For example switching the price to be below the product title, and the social boxes below the buy now button:

store_widget_options.product_left_column = 'TP';
store_widget_options.product_right_column = 'BS';

Here is a picture showing how it would look like.
 

Or if you state the code without any of these 4 elements, then you are removing an element.
For example, removing the social elements the code would be:

store_widget_options.product_left_column = 'T';
store_widget_options.product_right_column = 'PB';

Here is a picture showing how it would look like.
 

 

Where to add these? How would the code look like with all of these options? 
Here is an example of the code with all of the above included. You can always just pick and choose which options you want to change and only state those in your widget code.

<!-- Begin Wazala Code -->
<script type="text/javascript" charset="utf-8"><!--
var is_ssl = ("https:" == document.location.protocol);
var setsHost = is_ssl ? "https://www.wazala.com/widget/" : "http://www.wazala.com/widget/";
document.write("<"+"script src='" + setsHost + "js/widget_over.js?v=1&amp;rnd="+new Date().getTime()+"' type='text/javascript'" + "><" + "/script" + ">");
//--></script>
<script type="text/javascript" charset="utf-8">
var store_widget_options = {};
store_widget_options.ver = 1;
store_widget_options.display = "overlay";
store_widget_options.nickname = "YOURSTORENAME";
store_widget_options.lang = "en";
store_widget_options.wazalaURL = setsHost;
store_widget_options.widget_border_color = 'white';
store_widget_options.widget_background_color = 'white';
store_widget_options.menu_color = '#c0c0c0';
store_widget_options.menu_hover_color = '#c0c0c0';
store_widget_options.links_color = '#c0c0c0';
store_widget_options.links_hover_color = '#cfcfcf';
store_widget_options.content_border_color = 'white';
store_widget_options.content_background_color = 'white';
store_widget_options.product_box_border_color = 'white';
store_widget_options.product_box_background_color = '#ffffff';
store_widget_options.product_picture_border_color = 'c0c0c0';
store_widget_options.product_price_color = '#a0a0a0';
store_widget_options.buy_now_color = 'white';
store_widget_options.buy_now_background_color = 'red';
store_widget_options.product_name_color = '#696969';
store_widget_options.category_name_color = 'white';
store_widget_options.category_name_background_color = '#c0c0c0';
var store_widget = new WazalaWidget.widget(store_widget_options);
</script>
<!-- End Wazala Code -->