Zebra is basically a Magento extension that brings your products right to the Facebook platform. And you don't even have to go a long way round by making use of an external service provider. Zebra is Ajax driven and includes a bundle of pretty cool themes that are designed to perfectly work within your Facebook page.
"Easy to use" - that's the philosophy of Zebra. The extension is all about presenting your established store on Facebook. Get in touch with the Facebook community, increase your fanbase and reveal what products you have to offer. Generate even more sales by encouraging your fans to visit your online shop.
Wanna see Zebra in action? We have set up some various demos to show the power of this Magento extension. These demos display the different themes and individual configuration settings as well. Keep in mind that you have full control of your Facebook themes' look. Give your creativity free rein. Go ahead and check out our demos
This demo shows up the Zebra default theme. The base colors of this theme are zebra-o-tastic, black and white. This demo has both, the category menu and the search field enabled by default. Take a look at the Demo
This demo shows the Snow theme within the Zebra collection. Hereby you can see how a static block can be used to display an overview of the selected categories on the landing page. Zebra is flexible and cool, isn't it? Demo
This demo shows the Lava theme. Lava is perfect if you want to display many products on one page. It provides a 3 column layout. The product description and the search field are disabled by default in this theme. Demo
Zebra already includes 4 different themes that get shipped with the extension. The themes differ in the way the product information is being displayed. Time by time new themes will be added in the future.
It's all about generating fans. Zebra includes the possibility to enable a so called fangate which will be shown to users who don’t like your Facebook page yet. You individually decide what you want to show within your fangate.
Zebra is ready to use and super easy customizable. It let's you present your products in the iframe of your Facebook page and keeps stuff like the shopping cart or check-out process separated at your regular webshop.
You don't have to export your products to external servers, so your products are always up-to-date within Facebook. Since Zebra is a direct Magento extension, it gives you full control to the things that happen on Facebook. No need to keep your data in sync.
Zebra makes use of the Magento built-in CMS. So you can extend the Facebook store with any additional information. Simply add new static blocks and link them from within the footer menu or make use of them as landing page. It’s pretty easy, you will like it.
You have the choice. Pick one of 3 plans, just the one that perfectly fits your needs. You don't have to pay monthly bills like various pricing models of some service providers demand it. Zebra means: Pay once and get up to 12 months of free updates inclusive.
 |
 |
 |
|
ZEBRA Core |
ZEBRA Standard |
ZEBRA Plus |
|
| Best selection for advanced developers and agencies. |
Selection for everyone, the standard package. |
All-in-one package including support and design work. |
|
| ZEBRA Extension |  |
|
|
| ZEBRA Themes | |
|
|
| Custom Support 1 | |
|
|
| Custom Theme 2 | |
||
| Compatibility | Community Edition 1.5 + | Community Edition 1.5 + | Community Edition 1.5 + |
| Free Updates 3 | 6 Months | 6 Months | 12 Months |
| Installation Service | 149,00 EURO | 149,00 EURO | 149,00 EURO |
| Installation | Installation | Installation | |
| 199.00 EURO 4 | 299.00 EURO 4 | 499.00 EURO 4 |
1 Custom support is defined by a work time of 2 hours in total. The way the customer makes demands on this service is individually defined by the customer itself and its needs. The support is done via E-Mail. Any time beyond this value will be charged per hour. 2 Custom theme is defined as a visual adaption of a Zebra standard theme based on your corporate design. One layout is included, the design process and the stylesheet customization is limited to 3 hours work time. Any time beyond will be charged per hour. 3 Based on the plan you choose you will receive free product updates for the specific amount of months. After this time has elapsed you can extend this option for another 12 months. 4 Prices are inclusive VAT of 19% due to German law. Payment is possible via PayPal. If you don’t want to make use of PayPal you can send a direct request by E-Mail.
Please run a backup before starting the installation process. You have successfully purchased the Magento extension. At this point you should have received an E-Mail containing the extension package you will need for the installation. Login to your Magento backend and navigate to the Magento Connect Manager (System > Magento Connect > Magento Connect Manager). Head over to the paragraph which is named Direct package file upload and upload the extension package. If the upload process was successful, return to the Magento backend.
We strongly recommend creating a separate Category-Tree for your Facebook store if you have more than 15 categories (including subcategories). By doing so, you will have full control on the products that are listed in the Facebook store itself. Just navigate to Catalog > Manage Categories and click the Add Root Category button. Now create the specific subcategories which you want to be displayed in your Facebook store.
Now it's time to create a new Storeview for your Facebook store. Navigate to System > Manage Stores. To keep anything separated, regarding your Facebook product output, from your regular store, we further recommend adding a new Website and a new Store.
First add a new Website and name it something like Facebook. Afterwards add a new Store called Facebook Store to the website you have just added before. Reference the root category that you have created in the paragraph 1.2 from within the Root Category property or any existing root category. When you are done, create a new Storeview for this store. You can call it something like facebook_view.
Now go ahead and add some products to the store. Navigate to Catalog > Manage Products and edit the products you would like to show in the frontend. Make sure you have checked the facebook website from within the websites tab. Then goto the categories tab and add the product to the desired category of your Facebook store. Keep in mind, that you also have to add the sub-products to the new website, if you are dealing with bundled products.
When you have finished adding the products, navigate to System > Index Management and reindex everything in your Magento store.
The next step is to configurate the template itself. Open System > Configuration and choose facebook_view (or however you named that Storeview) as your current scope. Now click on the Zebra tab. Right there, you can choose a Default Category and set the attribute Enable to Yes. There are plenty of other options to play around. They are fairly well described, so these won't be covered at this point. Save your configuration. The Facebook store is now callable from within the frontend. You can access it like this:
http://www.yourshop.com/index.php/zebra/store/show/code/facebook_view
Again, we assume you named the Storeview facebook_view. If that's not the case, change the last parameter in the URL above to whatever your Storeview is called. Take a look at paragraph 3 to find out, how you can customize the look of the store.
By default the theme zebra is selected after installation. The extension gets shipped with three more themes: zebra_lava, zebra_desert and zebra_snow. Checkout the demo if you want to see how they look like.
You can select one of these other themes by navigating to General > Design > Themes within the Configuration Section (Make sure the Configuration Scope is set to your Facebook Store-View). If you want to set the theme to, let's say zebra-desert, type zebra-desert into the input field labeld with Skin (Images / CSS) and hit save.
Adding a new Facebook App requires you to get a Facebook Developer Account. That's not a big deal at all. Just open up http://developers.facebook.com/ and register yourself as a developer on the Facebook platform.
Now, that you are a registered open up https://developers.facebook.com/apps and click on the button Create New App. Set App Display Name to the name of your shop (e.g. My Pet Shop) and App Namespace to my-pet-shop for example. The namespace must be a unique value, which is not taken by another Facebook App yet.
By a successful creation of the Facebook App head over to the Basic settings tab. Copy the given App-ID and paste it to the field Facebook App ID within the Zebra configuration tab in your Magento backend. Do the same with App Secret, target field is Facebook App Secret. Return to Facebook and complete the given empty fields.
Navigate to the Zebra configuration section within your Magento backend. If you have filled out the field Facebook App ID as described in paragraph 2.2 you will see a link titled with Add your store to your Facebook page. Click it and you will get redirected to a page where you can add your shop to your Facebook page. Of course it's required that you are the admin of the Facebook page where you want to add the store tab. Now open up your Facebook page and you will see your shop tab enabled.
The best way to make theme customizations is to make a copy of one of our themes and apply you changes to that copy. This guarantuees that core updates of the Zebra extension won't overwrite your changes.
If you want to attach some changes, that effect the CSS navigate to the directory /skin/frontend/default/ and duplicate the directory of the skin which you want to modify. You can name your copy zebra-custom. Now open the file theme.css located in /zebra-custom/zebra/css/ within your editor and accomplish your customizations. When you are done, navigate to System > Configuration > Design in the Magento backend. Switch the current view to the storeview of your Facebook store and set Skin (Images / CSS) to the name of your theme (e.g. zebra-custom or one of the provided themes zebra-snow, zebra-desert, zebra-lava). That's it. You should see your CSS changes now in the frontend.
You can also apply changes to the template files. Create a new theme folder like /app/design/frontend/default/zebra-custom/template/zebra/. Now copy the template files, which you want to modify, from /app/design/frontend/base/default/template/zebra/ into the new created folder from above. Now accomplish the changes and navigate to System > Configuration > Design within the Magento backend. Make sure you are in the scope of your Facebook store and write zebra-custom into the field Templates. Save and you should see how the changes effect the frontend.
You can change the image that is shown on the fangate page easily by generating a custom skin as described in paragraph 3.1. Afterwards, all you have to do is to replace the default file fangate.jpg located in /skin/frontend/default/zebra-custom/zebra/img/ with your custom image, just named fangate.jpg too.
After a successful installation of your shop tab, it will be accessible through an URL like the following: http://www.facebook.com/sopedcom?sk=app_130099743733156. Let's say, you want to link directly to a category within your Facebook shop from external, for example your online shop blog. That's no big deal, just pass your arguments through the URL parameter &appdata. Here are some examples, how you can make use of this feature:
1. http://www.facebook.com/...&appdata=action|category;id|5
2. Load the category with the ID 5
1. &appdata=action|category;id|5;order|name;orderdir|desc;page|2 2. These arguments load the category with the ID 5 and order 3. the products from behind by name and jump to the 2nd page. 4. Possible sort criterias are name, position and price, while 5. position is the default value
1. http://www.facebook.com/... &appdata=action|product;id|10
2. Load the product with the ID 10
1. http://www.fa ... &appdata=action|block;id|facebook_imprint
2. Load the static block with the identifier facebook_imprint
Zebra is Ajax based. This means all requests are passed through an Ajax controller and the response gets displayed in a div, which has the ID #ajax-content-inner. Here are some examples, how you can create links within the template that get passed through the Ajax controller:
1. <a href="#" data-action="category" data-id="5">
2. Load Category with ID 5
3. </a>
1. <a href="#" data-action="category" data-id="5" 2. data-order="name" data-orderdir="desc" data-page="2"> 3. Load the category with the ID 5 and order the products 4. from behind by name and navigate to the second page 5. </a>
1. <a href="#" data-action="product" data-id="10">
2. Load the product with the ID 10
3. </a>
1. <a href="#" data-action="block" data-id="facebook_imprint">
2. Load the static block with the identifier "facebook_imprint"
3. </a>
Notice that this kind of linking only works from within the template files.
If you
want to create links from within the CMS in static blocks you have
to do it like this:
1. <a href="action|category;id|5" class="command">
2. Load Category with ID 5
3. </a>
1. <a href="action|category;id|5;order|name;orderdir|desc;page|2" 2. class="command"> 3. Load the category with the ID 5 and order the products 4. from behind by name and navigate to the second page 5. </a>
1. <a href="action|product;id|10" class="command">
2. Load the product with the ID 10
3. </a>
1. <a href="action|block;id|facebook_imprint" class="command">
2. Load the static block with the identifier "facebook_imprint"
3. </a>
Notice the css-class "command" which indicates that the link is an Ajax-based call. By default all non-ajax links will have target="_blank" so that they will get loaded in an new browser-tab.
You can also link to static blocks within the extension. To make that happen, you need to create static blocks which have an identifier prefixed with facebook_. By doing so, you can set up the Zebra configuration, that these static blocks get linked from the page footer (Take a look at the Footer Links section within the Magento configuration). You can also make a static block appear as Homepage by setting the Property Start Block in the configuration.
You have the possibility to influence the look of the fullscreen + flash button which appears on the product thumbnails, if enabled in the Magento backend. To customize the colors and its position, just copy the JavaScript file fullscreenstyles.js located under /skin/frontend/base/default/zebra/js/ into your custom skin directory. Now open the fullscreenstyles.js in an editor and change the settings to your needs. They are all well documented.
Please note that your Magento shop domain needs SSL, a so called Secure Sockets Layer, in order to get the Zebra extension work properly with Facebook.
Right after your successful payment via PayPal, you will get the extension and an invoice sent automatically to the E-Mail address connected to your PayPal account. If you decided to chose the Zebra Plus package, which also includes a customization service, you will receive further instructions via E-Mail.
Proceed Checkout via PayPal Change Version