There are more than 800 million active users on Facebook — such a great opportunity to get more customers to your store!
Win over more buyers by adding Ecwid to the Facebook ecosystem. It will take you 5-6 minutes at that. No PHP knowledge is required, no code changes or hosting expenses. For example, check our demo store on Facebook: apps.facebook.com/ecwid-shop/store/1110510495
How to add your store to Facebook
1. First please log in to your FB accout and open our application: apps.facebook.com/ecwid-shop/ Facebook will show a request for permission, click the "Allow" button.
2. You will see a page with your store settings (screenshot) If you have already got an Ecwid account, get your Store ID as described here. If you haven't got one yet, you can create it for free at my.ecwid.com
Get your Store ID and paste it to the "Ecwid Store ID" field (you will be able to change other values later). Then press "Save".
3. The settings will be saved and the page will be refreshed. Your store is ready! Press the "Open Your Store" button.
And your store will be opened.
You can manage the look of your store in the app settings (number of products per row, categories disabling/enabling, etc) and in the Ecwid theme settings (color of elements, their size, etc). You can add your products, change payment and shipping settings, process your orders in Ecwid Control Panel.
4. The next step is to link your Facebook store with your Facebook page. Click the "Add Ecwid to your Facebook page" link.
A new page will be opened in your browser. This page allows you to add our application to your page in a single click. Press the "Add Ecwid Shopping Cart" button and Ecwid will be added to your page.
If you don't have a Facebook page yet, please create it there. Pages manual: http://www.box.net/shared/9e5jiyl843
If you get the "You do not admin any pages for which this application can be installed" error instead of the page adding interface, then please refer to the solution. If you get "This application is already installed for all applicable pages", refer to this answer.
After you add our app, your page will be opened and the "Products" tab will appear there. This tab will show some random products from your store and a link to your main full-featured Facebook store. If you want to rename this tab, please refer to this instruction. If you want to customize it, refer to "Can I create a custom tab with a link to my FB store?"
FAQ
Can I rename the "Products" tab/link?
Yes, it is possible to rename the "Products" link. So you can rename it to "Store" or "Shop" for example. How to change it:
1. First you need to upgrade your Facebook page to new design. How to do this:
2. Then open your page and press the "Edit page" button to open the page settings.
3. Click the "Apps" link.
4. Find the Ecwid application in the list.
5. Then click the "Edit settings" link near our app.
6. Change the tab name in the popup and save the changes.
How can I change my Facebook store settings or update my store ID?
Please perform the following steps:
- open your Facebook page and go to the Products tab. Press the "Open our store" button.
- Click the icon in the top right corner of your store and a page with your store settings will be opened. Change the necessary options and press "Save".
This icon is shown to the page admins only. So your customers don't see it. If you want to change your FB store's look, please refer to the next answer.
I get the "You do not admin any pages for which this application can be installed" error
This error means, that you don't have any FaceBook page, where Ecwid can be added yet. Unfortunately Facebook doesn't allow to add applications to personal profiles anymore. So if you want to have an application tab with your products, which are linked to your FB store, it is necessary to create a new official FB page (they are also called "fan pages"). You can create it here: www.facebook.com/pages/create.php Then open our app and try to add it to the page again. Pages manual: http://www.box.net/shared/9e5jiyl843 You can view and manage your FB pages here: www.facebook.com/pages/manage/
More about pages: www.facebook.com/help/?topic=pages
I get the "This application is already installed for all applicable pages" error
This error means that you've already added Ecwid app to all your Facebook pages. In this case just open your FB page and click the "Products" link underneath your Page profile picture to see your Ecwid store.
If you don't see the "Products" link there, it means that this application tab has been disabled. How to enable it:
-
Press the "Edit page" button to open your page settings
-
Go to the Apps page
-
Find the Ecwid application and press its "Edit settings" link.
-
Press the "Add" link in the "Tab: Available" line.
Can I create a custom tab with a link to my FB store?
Yes, it is possible. You can replace a tab with random products with a custom tab, which is linked to your FB store and displays almost any information you want. For example: you products' ads and promotions, featured products, information about your store, etc.
You can create this tab manually: http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/ or use a ready FB application: http://www.marismith.com/resources/#apps
Can I change the look of my Facebook store?
Yes, you can. Use our app`s settings to disable/enable widgets and change the number of products per page.
Use Ecwid's custom CSS themes to change the look of your store elements.
If you want to customize the look of your store completely but the tools described above are not enough (for example, to add an HTML header, some links, etc) then it is still possible by creating your own Facebook application.
The main difference between our application and your own one you can create:
- our app has deeper integration with Facebook. For example, your customers log in using their FB accounts automatically. Also it allows adding the "Products" tab to FB pages with random store products and links to your main FB app.
- your own app doesn't have such deep integration and doesn't create such tabs automatically. However, you have full control over your app and its statistics. Also, you will be able to create a custom tab to link your profile to a store.
How to create your own FB app: Custom Facebook store
Do my customers need to allow any permissions to checkout in the Ecwid Facebook store?
No. Customers don't need to allow any Facebook permissions to check out in our app. How it works:
- Customers can freely browse your catalog and add products to bag without asking for any permissions. They can even be logged out from Facebook.
- When a customer decide to place an order and presses the "Checkout" button, the Ecwid app will request for permission to access basic information, email and current location of a Facebook account of this customer. This step is completely optional. So if the customer presses the "Don't allow" button and doesn't give our app the permission, he/she will still be able to check out and place an order.
Ecwid asks for optional information to make the checkout process easier and smoother for a customer. How the permissions are used (if a customer decides to give Ecwid this info):
- Access my basic information: Ecwid gets a customer's Facebook ID and name so that it could create a profile in an Ecwid store for this customer and logs him in automatically.
- Send me email: A customer's e-mail address is also used to create a customer profile.
- Current location: Ecwid also gets a customer's country, so when he/she checks out on Facebook, he/she sees the correct country pre-defined. Pretty useful.
Ecwid doesn't use, get or store any other information. How to check this:
- Log in to your FB account and open the "Privacy Settings" page.
- Click the "Edit Settings" link in the "Apps and Websites" section
- Click the name of our app and you will see what permissions you have granted to it and what information our app has asked for from Facebook.
From our experience required permissions harm the conversion rates badly. Some Facebook users just don't entrust their information to 3d-party apps. We don't want you to lose your customers and sales, so in Ecwid permissions are always optional and a customer can check out without granting them to our Facebook app.
What information does Ecwid use from my Facebook account, when I set your Facebook app up?
If you're a store owner and want to add a store to your Facebook page using our e-commerce Facebook application, then you will be asked to grant the following permissions to it:
- "Access my basic information": Ecwid needs access to your public info, which is used to retrieve your Facebook user ID, so that it could be associated with your Ecwid store.
- "Send me email" and "Current location": these permissions are necessary to create a customer profile in a store, if you try to check out there. Your usual customers are not required to grant these permissions to checkout in your store. They're optional for them.
- "Manage my pages": Ecwid uses these permissions to get a list of Facebook pages you admin. This information is necessary, so you could add a store to them later, if you decided to do this. Ecwid only gets the list of pages, it doesn't modify any settings and it doesn't get any other info.
Ecwid doesn't use, get or store any other information. How to check this:
- Log in to your FB account and open the "Privacy Settings" page.
- Click the "Edit Settings" link in the "Apps and Websites" section
- Click the name of our app and you will see what permissions you have granted to it and what information our app has asked for from Facebook.
Why does your app need the "Manage my pages" permssions, when your set up a Facebook store?
Ecwid needs the "Manage my pages" permission to get a list of Facebook pages you admin. This list will be used to determine if you're allowed to manage settings of a store assigned to a Facebook page or not. The only way to get this information requires the "Manage my pages" permission from you. Unfortunately it's a Facebook requirement.
Ecwid uses this permission to get the list of pages only. We will not change any settings of your page or post anything there.
How can I link to a specific product or a category of my Facebook shop?
If you open a Facebook store, go to any category, then copy a link from the browser's address bar and open it in a different window, then the main store page will be opened instead of the necessary category page. This is caused by the peculiarities of Facebook application platform.
However it is possible to link to the specific products and categories in your FB store. You should use these special links:
http://LINK_TO_YOUR_FB_STORE?ecwid:mode=category&ecwid:category=CATEGORY_ID
will open a category page.
http://LINK_TO_YOUR_FB_STORE?ecwid:mode=product&ecwid:product=PRODUCT_ID
will open a product page
where:
Examples:
Can I assign an application Facebook tab to my personal profile?
No. Unfortunately Facebook doesn't allow to add application tabs to user profiles anymore: developers.facebook.com/blog/post/415
Can my Ecwid AJAX store work and appear inside a Facebook tab?
Your Facebook store works as the Facebook application. Example: apps.facebook.com/ecwid-shop/store/1110510495
It is also possible to add a new tab to your profile or fan page. This tab is called "Products" and shows random products from your store. Each product is linked to your main store(FB app) .
Why did we choose this way? Five main reasons for it:
- Easy mirroring of your stores. Actually, you can have two stores, one on your site and the other one in your FB profile.
- Power of AJAX. The current way allows you to use all the AJAX power Ecwid has. Drag-n-drop, etc.
- Speed. High performance is important in e-commerce. When a store is shown as a profile tab, it is rather slow just because of peculiarities of the Facebook architecture. When it works as a FB app, it is as fast as a common Ecwid shop.
- Security. All sensitive information is always sent via secure HTTPS protocol.
- The last, but the main one. The width of all the app tabs is 520px wide only. Tabs are too small to show all the information about products. So FB apps that show all the information about products and checkout process in tabs don't look good. Ecwid doesn't have this problem, so it still looks great.
So, when your customers visit your profile, they still can see your products. If they click any product, they will still stay in Facebook and be able to shop in the full-featured and fast shopping cart.
The current behaviour will be greatly improved in the future: www.ecwid.com/forums/showthread.php?t=4314
How can I apply CSS changes to Facebook app / to Facebook tab / to a particular Facebook page only?
If you want some CSS rules in your custom CSS theme to be applied only to your Facebook application, but not another storefronts, you should specify it directly in your CSS code. In order to do it just add the 'div.ecwid_facebook_app' prefix to the necessary CSS rules. For example, the following code will change the store's background color to white (and this will affect only FB app):
div.ecwid_facebook_app div.ecwid-productBrowser {
background-color: #fff;
}
Such changes will be applied to the both your tab and your main Ecwid app canvas in Facebook. If you want to apply them only to the tab, but not the main canvas, you should use the 'div.ecwid_facebook_app_tab' selector instead of the 'div.ecwid_facebook_app'. For example, the following CSS code will change the font size for prices in the product browser (and this will affect only FB tab):
div.ecwid_facebook_app_tab div.ecwid-productBrowser-price {
font-size: 18px;
}
Since you can install your Ecwid store on several FB pages, you may be interested in making a different look for different pages. In order to do it specify a necessary CSS rule with a selector like 'ecwid_facebook_page_<pageID>' , where pageID is internal FB identificator of a page. Look at the HTML source of the FB page where you store is installed. You will see there that Ecwid store elements are wrapped by the div element which looks like this:
<div class="ecwid_facebook_app_tab ecwid_facebook_page_333446166671723 ecwid_facebook_app" …>
The class which starts with 'ecwid_facebook_page_' specifies the page. Use it for composing your custom CSS rules for the page. For example, the following CSS code will change the color of product names in the product browser to green (this will affect only Ecwid elements on the Facebook page 333446166671723):
div.ecwid_facebook_page_333446166671723 div.ecwid-productBrowser-productNameLink {
color: green;
}
When I add my store to Facebook, it doesn’t look good and the text isn’t readable. How to fix?
At the moment your Facebook application and the main Ecwid store use the same CSS styles, i.e. the same colors, images, etc. All the changes you apply to your store using Ecwid custom themes, will be applied to your Facebook app as well.
It will cause troubles, if your main site`s background isn't white and you use some custom CSS code to change colors of your store`s texts and other elements.
Since the background of FB app is white by default, your store will not look good in this case.
In order to fix this problem, you need to change the background of your FB app. Apply this CSS code to your Ecwid theme:
div.ecwid_facebook_app {
background-color:black;
}
(replace “black” with any color your want)
You can use the same trick, if you want to apply some CSS changes to your FB app only. Just add the “div#outer” prefix before your CSS selectors, for example:
.ecwid_facebook_app <necessary CSS selectors> {
#somecode
}
My categories are very long, so some category names are not visible and minicart overlaps them. How to fix?
If your category names are too long or you have many root categories, here are possible solutions:
