Facebook

Last updated

Millions of users visit Facebook daily — what a great opportunity to get more customers to your store!

Win 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.

Сheck our demo store on Facebook!

    1. Add your store to Facebook
    2. FAQ
      1. Change the username for my Facebook page
      2. Rename "Products" tab and change the tab image
      3. Change my Facebook store settings or connect a different store to my Facebook page
      4. I'm getting "You must have permission to add apps to at least one Facebook Page" error
      5. I get the "This application is already installed for all applicable pages" error
      6. Do my customers need to allow any permissions to checkout in the Ecwid Facebook store?
      7. What info does Ecwid use from my Facebook account, when I set up your Facebook app?
      8. Why does your app need the "Manage my pages" permissions, when I'm setting up Facebook store?
      9. Link to a specific product or a category of my Facebook shop
      10. Assign an application Facebook tab to my personal profile
      11. Apply CSS changes only to my store on Facebook and keep another design on the site
      12. When I add my store to Facebook, it doesn’t look good and the text isn’t readable. How to fix?
      13. I want to apply Javascript modification to my Ecwid store on Facebook. Where should I put the modification code?
      14. Why my customers can't find my Facebook shop from mobiles? ​
      15. Why does the app settings page in Facebook display warning message?​

Add your store to Facebook

This video quickly shows you how to add your Ecwid store to your Facebook page.

1. Log into your Facebook account and open our application: http://apps.facebook.com/ecwid-shop/


      • If you do not have Ecwid store on Facebook yet, click "Instal App" button.
      • If you want to add one more Ecwid store proceed to the 4th step of these instructions.

2. Click OK button to allow Ecwid application to access basic information on your profile and manage your pages. We need this permission to get a list of Facebook pages that you admin and determine if you are allowed to manage settings of the Ecwid store assigned to the page.


and the next one:


If you receive error You do not admin any pages for which this application can be installed error instead of the page adding interface, please check the FAQ section of this article. If you don't have a Facebook page yet, you can create it here.

If you see warning This application is already installed for all applicable pages, refer to the FAQs below.

3.On this step you should select the pages to which Ecwid will be added. Choose a page from the dropdown and click Add Page Tab.


4. Ecwid application has been added to your page. The last step is to connect your Ecwid account to the app.


If you already have an Ecwid account, you'll find your Store ID as described here. If you haven't got an Ecwid account yet, you can create it for free at my.ecwid.com

Paste your Store ID to the Ecwid Store ID field (you will be able to change the other values later). Then press Save.


5. Your Ecwid store is ready. You can find it by direct "Your Facebook Store" link in the end of the "Settings" page. The link to your Facebook store is added to the page's tabs link with "Products" name.


FAQ

Change the username for my Facebook page

When a page has a unique username, the link to it looks more user-friendly. Besides, when customers see the name of the store in the web address, they trust it more than when they see a link that includes a combination of numbers.

To change the username of the page where you added your Ecwid store, you have to be an admin of this page. Please mind that according to Facebook rules, you can change the name of your page only once, so please be careful when choosing it.

To change your page's username:

      1. Go to facebook.com/username.
      2. Below Create your Facebook web address, select a page from the dropdown menu.
      3. Type a username and click Check Availability.
      4. If the username is available, click Confirm.

Read more about changing Facebook page's username here https://www.facebook.com/help/203523569682738

Rename "Products" tab and change the tab image

You can easily do this in your Facebook page settings:

      1. Open your page and click "Settings" link on the top.
      2. Click "APPS" link in the left column and click "Edit Settings" link near Ecwid logo
      3. Enter a new name in "Custom tab name" field. Click "Change" link next to "Custom Tab Image" field to upload your own tab image (Use 111 x 74 pixels image to avoid image resizing)
      4. Click OK

Change Facebook store settings or connect a different store to my Facebook page

Please, perform the following steps:

      1. Open your Facebook stores list: apps.facebook.com/ecwid-shop/
      2. Click "Settings" link on the opposite of the corresponding Facebook store.
      3. Change the settings as you need and click "Save".

I'm getting "You must have permission to add apps to at least one Facebook Page" error

This error means that you don't have any Facebook page, where Ecwid can be added yet. Unfortunately Facebook doesn't allow adding 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 you can create new page here:  www.facebook.com/pages/create.php or check the list of pages, where Ecwid was added:apps.facebook.com/ecwid-shop/, probably, store was already added to required page.

Change the look of my Facebook store

Use our app's settings to disable/enable widgets and change the number of products per page

Use Ecwid 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) it is still possible by creating your own Facebook application.

The main difference between our application and your own one is as follows:

      • 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 store products and links to your main FB app.
      • your own app may have less features and will not be able to create such tabs automatically.  However, you will 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. 

Do my customers need to allow any permissions to checkout in the Ecwid Facebook store?

No. Customers don't have to allow any Facebook permissions to check out in our app.  How it works:

      • Customers can freely browse your catalog and add products to the bag without asking for any permissions. They can even be logged out from Facebook. 
      • When a customer decides to place an order and presses the "Checkout" button, the Ecwid app will request for the permission to access the basic information, email and current location of a Facebook account of this customer. This step is completely optional. So if the customer presses "Don't allow" button and doesn't grant the b to our app, he/she will still be able to check out and complete the order. 

Ecwid asks for optional information to make the checkout process easier and smoother for customer. How the permissions are used (if a customer decides to give Ecwid this info):

      • Access my basic information: Ecwid gets the customer's Facebook ID and name to register a profile in your Ecwid store for this customer and logs customer in automatically. 
      • Send me email: Customer's e-mail address is also used for the profile creation. 
      • Current location: Ecwid also gets customer's country in order to correctly determine customer's country and show it as pre-filled in the shipping address during checkout on Facebook. 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 "Ads, 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 requesting for the permissions to user's data may adversely affect the conversion rates. 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 our Ecwid app the permissions are always optional. Customer can check out without granting any permissions to our Facebook app.

What information does Ecwid use from my Facebook account, when I set up your Facebook app?

If you want to add your Ecwid store to your Facebook page using our e-commerce Facebook application, you will be asked to grant the following permissions:

      • 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 customers profiles in your Ecwid store.  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 that you administer. This information is necessary for you could add a store to your Facebook pages later. Ecwid only gets the pages list, it doesn't modify any settings and it doesn't request for 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 "Ads, 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" permissions, when I'm setting up Facebook store?

Ecwid needs the "Manage my pages" permission to get a list of Facebook pages where you are the admin. This list will be used to determine if you're allowed to manage the settings of the store assigned to the Facebook page.  The only way to get this information is to request the "Manage my pages" permission from you. This is a Facebook requirement.

Ecwid uses this permission to get the list of the 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 the Facebook store, go to any category, copy a link from the browser's address bar and open it in a different window, the main store page will be opened instead of the necessary category page. It happens because of specific Facebook application platform: Applications in tab (linked with your page) are deployed in iFrames. The object inside the frame is not anyhow influenced by outside elements. This is a secure way of site structure, yet it has a limitation: the URL is not dynamically changed when you browse the pages. That's why on any store page you have one and the same URL in your browser address bar, opening your store home page.

There is a quick workaround, though. It is still necessary to get direct links to certain store pages (cart page, product, category pages, etc). For example, when customers like a product, the system needs to lead users to this very product page. We realized this possibility, that you can use yourself in order to obtain direct product or category pages.

You should use these special links:

http://LINK_TO_YOUR_FB_STORE?app_data=!/~/product/id%3dPRODUCT_ID - the link will open the product page

http://LINK_TO_YOUR_FB_STORE?app_data=!/~/category/id%3dCATEGORY_ID - this link will open the category page

where:

Examples:

Can I assign an application Facebook tab to my personal profile?

No. Unfortunately Facebook doesn't allow adding application tabs to user profiles anymore:developers.facebook.com/blog/post/415

How can I apply CSS changes only to my store on Facebook and keep another design on the site?

If you want some CSS rules in your custom CSS theme to be applied only to your Facebook application, but not other storefronts, you should specify it directly in your CSS code. For that 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 only in the Facebook app: 

div.ecwid_facebook_app div.ecwid-productBrowser {
  background-color: #fff;
} 

Such changes will be applied to 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 div.ecwid_facebook_app. For example, the following CSS code will change the font size for prices in the product browser in the Facebook tab only:

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. For that specify a necessary CSS rule with a selector like ecwid_facebook_page_<pageID>, where pageID is internal FB identificator of the page. Look through the HTML source of the FB page where your Ecwid store is installed. You will see there that Ecwid store elements are wrapped by div element which look like this:

<div class="ecwid_facebook_app_tab ecwid_facebook_page_333446166671723 ecwid_facebook_app" …>

The class starting with ecwid_facebook_page_ specifies the page. Use it to makeup your custom CSS rules for this page. For example, the following CSS code will change the color of the 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;
}

NOTE:

div.ecwid_facebook_app_tab selector is added to our official application. If you switched to "Custom HTML tab", our application is disabled, hence the selection isn't there and this method of adding CSS rules to the Facebook store will not work. The Facebook storefront will share the same CSS as your Ecwid store on website has.

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 CSS themes, will be applied to your Facebook app as well.

It might cause troubles if your main site background isn't white and you changed the store's colors, text and other elements with help of your custom CSS codes.

Since the Facebook app background is white by default, your store will not look good in this case.

You can simply change the background of your FB app by applying this CSS code to your custom Ecwid theme(replace “black” with any color your want):

div.ecwid_facebook_app {
background-color:black;
}

You can use the same trick, if you want to add some CSS changes to your FB app only. Just add thediv#outer prefix before your CSS selectors, for example:

.ecwid_facebook_app <necessary CSS selectors> {
#somecode
}

I want to apply Javascript modification to my Ecwid store on Facebook. Where should I put the modification code?

      To add a Javascript modification (e.g.
custom translation
      or any other modification) to your store of Facebook, please, open 
https://apps.facebook.com/ecwid-shop/
       page and proceed to the "Settings" page. Add the code to the "Advanced settings" text field and click "Save".
       

Why my customers can't find my Facebook shop from mobiles? 

Ecwid is designed to work on any platform. Ecwid supports responsive layout that allows Ecwid shops to adapt to different screens. More details in this forum thread: http://www.ecwid.com/forums/showthread.php?p=81342#post81342

However, Facebook has certain restrictions hindering the work of applications on mobiles, and it impacts all Facebook apps, not only Ecwid.

1. When users open your Facebook page from mobiles, they do not see the 'Shop' link.
This is a limitation of Facebook: links to 3rd party applications (i.e., those developed not by Facebook) are not shown on the Pages from mobiles. It affects all applications, not just Ecwid.

So when you access Facebook page from a mobile (and Facebook considers iPhones, iPads and Android  tablets as mobile devices), you will not see a link to your Ecwid shop. Furthermore, if you try to open Ecwid store on Facebook in a mobile browser, it will display page not found error.

At present it is technically not possible to display standard Facebook tab applications on mobiles. We have to live with this restriction until Facebook changes it. Therefore, unfortunately we don't have a mobile version of the Ecwid Facebook app. Yet, we can offer you ways to work this around, see below.

2. One more restriction relates to relations between Facebook and Apple:
"Add to bag" button isn't shown on mobile catalogs if opened in mobile Facebook application for iOS.  This is a forced measure that we had to take due to the following Facebook restriction.

According to the Facebook policy:

If you’re using iOS to run your app, use an iOS approved payment method.

Facebook contacted us with this regard and requested to disable all payment methods in Ecwid application, otherwise our application would be closed.

In order to keep the Ecwid app running on thousands of Facebook pages, as a way to work this around we had to remove 'Add to Bag' button from the mobile catalog when it's viewed from mobile Facebook app on iOS.

Regrettably, it doesn't appear possible to sell anything in mobile Facebook iOS app unless items are sold within online Apple store.

Despite of these restrictions, from the very beginning we've been trying to locate and implement any solution that would help selling from mobiles, since mobile commerce is growing together with Facebook popularity.

For now we offer the following ways to provide a mobile store:

      1. To use your starter site available at link http://store[store id].ecwid.com/ as a mobile version of your store. Note that you can choose to show it under another domain. Check out this article for details: Starter Site
      2. To use your own website with Ecwid

In order to use the 1st and 2nd variants, you should  make sure to enable responsive layout for your Ecwid store in Ecwid control panel → Settings → General → Migrations

Ecwid supports responsive design meaning that your store pages can be adapted dynamically to any screen. So website and Starter Site (for those who don't have website yet) would be the best solutions.

You should put a link to either of these resources on your Facebook page and write down a warning that users, who're viewing the page from mobiles, need to follow this very link to buy. You can insert it on the page wall or in "About us" section. 

Otherwise you can use Facebook call-to-action "Shop Now" button as follows:
1) Get your Starter Site link by going in your Ecwid control panel to Settings > General > Starter Site and copy the link below "Your starter site". 
2) Go to your Facebook page and click on the "Call to Action" button, 
- click on "Edit call to action", 
- choose "Shop Now" Button,
- under "Website" add the Starter Site link and click on "Create". 

Why does the app settings page in Facebook display warning message?

      If you are logged in to Facebook as page and not as a person, the page with the app settings (
https://apps.facebook.com/ecwid-shop/
      ) shows this message:

Sorry, we got confused
    Please try refreshing the page or closing and re-opening your browser window.


The issue is caused by a bug on the side of Facebook and they claim to have no ETA on fixing it.

To be able to access the app settings page please make sure that you are logged in to Facebook as a person.

 
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7