Wazala provides a designed red button that can be added to any website to open the store. You can opt to use our button or customize your own.
Using Your Own Button
STEP 1
First you need to make sure you have the Wazala code placed on your page. If you wish to not use the Wazala red button, then you need to select the “Hidden” option of the code and integrate it to your website first.
STEP 2
Create your button that you wish to open the store with, then use the following JavaScript call to link. Simply apply this to any button, image or item within your site and when pressed the Wazala overlay will appear.
Java Script Call: wazala_widget.show();
Example of a complete code: <a href="javascript:;" onclick="wazala_widget.show(); return false;">Open Store</a>
Editing The Wazala Red Button
This is a bit advanced for those not familiar with picture editing. It may be best to contact your web developer for this.
STEP 1
First you need to edit the button image to fit your needs. We are including below, both the png and the psd files. These are the right aligned version of the button, flipping the template horizontally will give you the left aligned version. Get creative, change colors, shape, shadows etc, but please pay attention to the location of the button in relation to the cart view panel.
STEP 2
Once you have edited your own version of the button template upload to your own web server. Note the urls of the location of the new png template in the css override code bellow. Once you have uploaded the image to your server, you can override the store button image using the CSS code below. Just include in your CSS template for your website or copy and paste in your head section of your HTML page. If you do not how to do that you may want to reach out to whom ever has designed your website. They will know what to do.
<style media="screen" type="text/css">
#wazala_tab_w { background-image: url(http://http://www.yourdomain.com/images/widget_btn-new.png) !important; }
</style>
Changing Wording Of Wazala Red Button
From your HOME page go to Builder > Widgets > Web Overlay Widget
In the Label drop down menu, select “Custom” and type in the word you wish to use in the field area provided.