Follow

Facebook

There are 1 billion monthly active users on Facebook — such a great opportunity to get more customers to your store!

Win over more buyers by addingLibersy Webshop  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/   

  -  If you do not have Libersy Webshop store on Facebook yet, click "Add store to your page" button, 

 

- If you want to add one more Libersy Webshop store proceed to the 4th step of these instructions.

 

2. Click "OK" button to allow Libersy Webshop 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 Libersy Webshop store assigned to the page.

 

 

and the next one:

 

 

3. On this step you should select the pages to which Libersy Webshop will be added. Choose a page from the dropdown and click Ok.

 

 

4. This page allows you to manage all your Facebook stores from within one place and see a list of all pages where Libersy Webshop  is installed. 

Click "Add your store to the page" button (if this is your first store on Facebook) or "Add your store to one more page" button (if you already have at least one store). 

 

 

5. Choose a page where Libersy Webshop  store should be added. The drop-down menu lists all pages on which you are assigned as the administrator). If you have only one page, it will be selected automatically. Click "Add Libersy Webshop" button. 

 

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 refer to this article. If you don't have a Facebook page yet, you can create it here. Pages manual: http://www.box.net/shared/9e5jiyl843

If you get "This application is already installed for all applicable pages", refer to this answer.

 

6. After that the demo Libersy Webshop store will be added and you will be redirected to the page with the list of your Libersy Webshop stores. In order to change it to the settings of a particular store you should click "Settings" link next to the corresponding page name.

 

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

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

 

8. Your Libersy Webshop 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

 

How to change "Products" tab name and image?

You can easily do this in your Facebook page settings:

1. Open your page and small triangle icon on the right side of applications list of the page

 

2. Hover over the "Products" tab, click on the appeared icon with pencil and choose "Edit Settings" from the menu

 

 

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"

 

 

How can I change my Facebook store settings or update my store ID?

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 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 Libersy Webshop 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 Libersy Webshop 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 Libersy Webshop was added: apps.facebook.com/ecwid-shop/, probably, store was already added to required page.

 

Can I create a custom tab with a link to my FB store?

 

Yes, sure. You can choose what information will be shown in the tab. It can be products from one particular category or any other data including ads, promotion code, etc. 

NOTE: this way you will switch from using our official FB app, you will use a custom installation of Libersy Webshop. Therefore we can't guarantee that it will work flawlessly - we developed the app to make it meet all specific Facebook functions. So we would recommend keeping the application (i.e. switch to "Catalog" option in). 

 

Go to https://apps.facebook.com/ecwid-shop/  and open "Settings" page for the required Libersy Webshop store and choose:

"Catalog. Category by default" option, if you want to show products from a certain category

"Custom HTML code (advanced)" option, if you want to display any other information in the store tab. This information should inserted as an HTML code into the textarea:

 

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 Libersy Webshop'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) 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 Libersy Webshop 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 Libersy Webshop 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 permissions to our app, he/she will still be able to check out and complete the order. 

 

Libersy Webshop 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 Libersy Webshop this info): 

  • Access my basic information: Libersy Webshop gets the customer's Facebook ID and name to register a profile in your Libersy Webshop 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: Libersy Webshop 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. 

 

 Libersy Webshop 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 Libersy Webshop app the permissions are always optional. Customer can check out without granting any permissions to our Facebook app.

 

 

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

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

  • "Access my basic information": Libersy Webshop needs access to your public info, which is used to retrieve your Facebook user ID, so that it could be associated with your Libersy Webshop store.
  • "Send me email" and "Current location": these permissions are necessary to create customers profiles in your Libersy Webshop store.  Your usual customers are not required to grant these permissions to checkout in your store. They're optional for them.
  • "Manage my pages": Libersy Webshop 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. Libersy Webshop only gets the pages list, it doesn't modify any settings and it doesn't request for any other info.

 

 

Libersy Webshop 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?

Libersy Webshop 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. 

Libersy Webshop 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 through. 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 Libersy Webshop 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 Libersy Webshop 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 Libersy Webshop  store is installed. You will see there that Libersy Webshop 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 Libersy Webshop 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 Libersy Webshop 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 Libersy Webshop store use the same CSS styles, i.e. the same colors, images, etc. All the changes you apply to your store using Libersy Webshop 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 Libersy Webshop 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 the “div#outer” prefix before your CSS selectors, for example: 

.ecwid_facebook_app <necessary CSS selectors> {
#somecode
}

 

 

Categories menu width is too big, category names are not visible and minicart overlaps them. How to fix it?

If there are many categories they may not fit in the tab page width. In this case you can reduce the space occupied by the categories in the following ways: 

1) Decrease the number of the root categories 

 

2) Make the font size of the horizontal categories smaller by means of this CSS modification (how to use it):

/* root categories, first level category links */
div.ecwid_facebook_app span.ecwid-categories-category {
  font-size:16px !important;
}
/* subcategories, second level category links */
div.ecwid_facebook_app div.ecwid-categoriesMenuBar span.ecwid-categories-category {
  font-size:14px !important;
}
/* 3rd, 4th, etc level category links */
div.ecwid_facebook_app div.ecwid-categories-MenuBarPopup div.ecwid-categoriesMenuBar span.ecwid-categories-category { 
  font-size:13px !important; 

 

3) Disable the "Horizontal categories" widget completely in the FB store settings:

- go to the Libersy Webshop app settings on Facebook (http://apps.facebook.com/ecwid-shop/) and click the 'Settings' menu next to the Libersy Webshop app

- in "Categories menu widget:" select 'Hide'

- click 'Save'

 

 

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

 

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

 

Basically Libersy Webshop  application for Facebook is able to work on mobile devices. Your Facebook store is viewed normally and can be accessed from mobiles.

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

 

1. When users open your Facebook page from mobiles, they do not see '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 Libersy Webshop. 

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 Libersy Webshop shop. 

Furthermore, if you try to open Libersy Webshop 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 Libersy Webshop 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 (https://developers.facebook.com/policy p#I.9):

Mobile Web Apps that are running within the Facebook iOS app must not accept payments. In particular, these apps must not reference, use, or otherwise encourage the use of Facebook Payments or other non-iOS approved payment methods.

 

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

In order to keep the Libersy Webshop 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 three ways to provide a mobile store:

1. To use simple store which has layout. It will be fully-featured shop that will be adapted to mobile devices of your customers. What is simple store link.

 

2. To use website with Libersy Webshop.

 

3. To use mobile catalog: this catalog is designed for old phones that don't support Javascript and don't have good CPU, hence it's a light version with minimal design right for such phones. 

 

 

In order to use the 1st and 2nd variants, you should  make sure to enable responsive layout for your Libersy Webshop store: in Libersy Webshop control panel -> System Settings -> General -> Migrations. 

Libersy Webshop supports responsive design meaning that your store pages can be adapted dynamically to any screen. So website and simple store (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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk