Direct Selling Page For Shopify


With Direct-Selling page for Shopify you can arrange on-line sessions with customers for selling products from your Shopify store. The Direct-Selling page is a collection of multiple views that focus on engagement with buyers. It is not a website but a landing-page. It is focus on engagement with customers and not on presenting content. It does not replace your web-store but come in addition to your web-store. It does not manage any aspect of orders, billing and fulfillment. The payments and order procedures occur on your actual-store. It is simply a tool for web store owners to interact with customer directly, and to maintain private sessions where customers can later return and complete a purchase.

When user arrive to Direct-Selling page the default view user see is  "Welcome Page". Users can then start a session or visit other views also without session. For example users can visit "Gallery" view of products and select products also without session. Users can also visit the "Sharing Board" view and leave some widget to share with you. When user start a session a special hidden Content-Glass widget is created that keep session's data for as long as the session is not deleted. It means that session persist and does not disappear if user leave the page. Users can return later and get into session, with you or alone.

When users start session with you, you get notification and a sound (door-bell ring). If you are available you accept the session and this put you and the remote user in a live-session. By default, live-session starts with "Counter View". The idea of live-session is to simulate a situation that resemble the interaction between seller and buyer in real store. During live session you present to user the products of your store 'over the counter'. This involve textual chat and optionally video chat. In the 'Counter View' you select items to show to user, and the user see these items. When you change the item and show other item, this is also change on the user side. This way, you can explain to buyer about items of your store and help buyer to choose product from the collection of your store. The buyer can add items to cart, and the shopping-cart will be carry by internal session-widget, so in case user did not completed the purchase on first session he or she can complete the purchase later. To complete the purchase user go to 'Shopping Cart'  view and click 'Complete Purchase' button. This action redirect the user to your Shopify web-store where cart on Shopify is automatically filled with selected items. See more details below. 

 The procedure for using Direct-Selling page is very easy as will be covered by this article:

1. Create Direct-Selling page.

2. Connect with the store. 

3. Loading store data.

4. You are basically ready!

5. You may also consider some optional additions. 

Important note: CG-Direct app is free during the beta testing period. During this period you can create pages for free. If you see a button "Pay Now" on your page, it is there for the purpose of testing payment flow. 


Create Direct Selling Page

'Direct Selling' is a page type on CG-Direct app that provide web store owners (and/or their affiliates) a functionality of arranging live-sessions for selling their products online. Ream more information about direct selling page.

Creating new page is very easy. You can do that by viting the Pages view or by clicking the 'Create Page For Shopify' button below.  When you create new page a form is presented with some basic fields you neew to set:

  • Title: this is the title that will be used by pages report and global pages index, to show your your page. Keep it simple and relevant.
  • Short description: will be used for pages index. Present your store page in few words.
  • Full Description: This is the description users will see when visiting the welcome page of your page.
  • URL Path: this is an important field that determine the path for your page. Use not too long term that reflect the name of your store. Do not use spaces. Use hyphens instead.  
  • Page Domain: this field allows you to mask the URL of your page with your own url. (not yet supported)
  • Owner Name: wrtie your real name so that in a live session visitors will be able to see your name.
  • Website: A link to your website. The URL is used on welcome page to create link to your website. 
  • Social Accounts: Can by used to specify links that refer t your social accounts. 
  • Layout: currenlty Direct-Selling page has one single layout so no need to change.
  • Code: This field is for advanced users that knows how to set CSS rules. The code you set here is autoamtically append to the bottom of the HTML that create your page, and it is used for fine-tuning and general customization of default style.
  • Store Platform: Select Shopify 
  • Store Domain: set the Shopify domain of your web store  (not the alias domain) - example
  • Store Permissions: there is currently no need to set any value in this field. Keep it empty.
  • Store mode: for now keep it on Open. In the future this field will be used to control the store presence and activity when you are not available but this is not yet supported.

After saving the form, and given that all required fields are set and path is not used by someone else, a new page is created and open. The first view you see is "Owner Dashboard" that you will use to perform some management tasks and also to listen to new sessions. Follow to next step of connecting with the store. 



* User should be Logged-in before user can create page. If you do not have an account, Sign-Up first.


Connect with store 

When Direct-Selling page is first created, it does not yet connected with actual web-store, so no products can be presented and products gallery is empty. In order for page to show some products you should first connect with your store. This is the step in which you will authenticate the Direct-Selling app. On the "Owner Dashboard" view of your page you see a button say "Connect to store". 

  • Click the 'Connect to store' button. 
  • Shopify app authentication dialog appears (as with any other app).
  • Approve the app to continue.

In the background, an access_token to access data from your web-store is assigned to the page, and will be used from no on to read products and collections from the store. After few seconds the control is returned back to "Owner Dashboard" page. Follow to next step of loading data.


Loading store data

The page is now connected with your store, so that it is possible for page to read products info from your store. However nothing was loaded yet so products gallery is still empty. 

  • Click the 'Load store data' button. You will see progress-bar on the bottom of the page.
  • Wait few seconds for data to load. 
  • When done, refresh the page.

The page is now loaded. Store information loaded to cache of page (located on the server) is set with some general information about your store, information about collections you defined and some initial products data. Since a store may include many products, we read only the first 250 at first (the first page) and later if it is required to bring more products we do it on the fly. Note that information is stored in cache, to reduce API calls to Shopify, and to shorten response time of user requests. Accordingly if you add new products, it is possible these products will not be immediately available on your page. You can always reload the data by clicking 'Reload store data' button.


Ready for sessions

Your page is now ready to serve visitors. It means few things:

  • Visitors are able to initiate a session with you. 
  • Visitors are able to return into sessions as long as session was not deleted.
  • Visitors are able to visit the gallery of products either within a session or outside of session.
  • Visitors are able to add items into shopping-cart and to perform an actual checkout on your actual Shopify web-store.
  • Visitors are able to share widgets with regarding various requests, questions or feedback, either publicly or in the scope of private session.

You can read more details about receiving and managing session in the direct selling page article.


What Next

  • Let other people know about your page:  Your page is ready, but no one knows about it yet. In order for users to visit your page, and not only by finding you in the pages index, it is required to announce your page. You can do it on your actual store, or you can post messages on social-accounts you are using such as Google+, Facebook, Twitter etc'.  
  • Embed the page in your Shopify store with IFRAME. If you want the page to be appear  as part of your Shopify store, you can embed an IFRAME in your web-store with reference to page. This is explained in direct selling page article. 
  • Add menu link to the direct-selling page from your web-store. On Shopify store dashboard select 'Online Store' -> 'Navigation' -> Select a menu (e.g. Main Menu) -> Create new menu-item of type 'web-address'.
  • Extend your page with premium options. See more details below.


How Purchase is Completed

After some items were added to shopping cart, user can complete thew purchase by going to 'Shopping Cart'  view. In the case of 'Shopify' platform, user is required to register to 'Content Glass Cloud' so that we can associate the user with sharable Shopping-Cart, a special Content-Glass widget that allow shopping-cart to roam between application. The registration is extremely simple. There is no profile to fill, simply register with user/password and then login. Once user is registered, user can visit the 'Shopping Cart' view and click 'Complete Purchase' button. Doing this, will redirect the user to your actual web-store, and the items from the shopping-cart created on your Direct-Selling' page, will be filled into the Shopping cart of Shopify. To allow this automatic roaming of shopping-cart you should have Content-Glass app installed on your Shopify store, with or without the tab (e.e. in headless mode). See the chapter on Sharable Shopping-Cart below. Note that it is not required for Content Glass to be installed on your store for direct-selling page to work, but only for having the support for Sharable Shopping-Cart, that will be used also by future Content Glass apps (so it is good idea to have it supported). 


Sharable Shopping Cart

Direct-Selling page use special Content-Glass widget: Sharable Shopping-Cart. This widget act in the background and user does not have direct interface with it. The widget is created for registered-users and allow shopping-cart items to roam between applications. In this case it is used to transfer the shopping-cart content from Direct-Selling page to the shopping-cart of related Shopify web store. In order for this to occur, Shopify web-store should have the Content-Glass app and Shopping-Cart add-on to be installed. Content Glass app may be installed in "headless" mode, i.e. without showing the sharing tab. The important is that Content Glass API run on the store and operate the Shopping-Cart add-on. The add-on is an extension run on top of Content Glass API and is responsible to detect shopping-cart widget and transfer its content into Shopify's shopping-cart.

To allow Sharable Shopping-Cart support you should act as follow:

  • Visit Content Glass app page by clicking here.
  • Install Content Glass app  
  • If you do not want Content Glass tab to be presented on your store - go to app preferences and in 'Select Application' field set 'Headless Web Client'. This promises that CG API is loaded on your store but without the sharing tool tab.
  • On preference page view you will see 'Add On Extensions' section.
  • Click install nearby 'Shopping Cart' add-on label.
  • This will install the sharable shopping-cart add-on that handle migration of shopping-cart widget from/to your Shopify web store. There is no UI or settings to handle. For now, the entire work on sharable shopping-cart is handled in the background after CG app is loaded.  

Note that it is not required for Content Glass App to be installed on your store for Direct-Selling page to work. It is required only if you want content-glass to be able to migrate shopping-cart information from Direct-Selling page into Shopify store. The alternative is that after user select some products, user will go to Shopify store and fill again the shopping-cart with the selected products.

The Sharable Shopping-Cart is planned to be used with other Content Glass applications too, so it is a good idea to have it supported on your store.