Home

Download this help site
(PDF 80MB)

Download

Setting up an online store

Wild Apricot does not currently provide support for ecommerce or online stores. You can, however, add an online store to your Wild Apricot site using code provided by third parties such as Ecwid or Shopify.

Icon

Purchases made using third-party online stores will not be recorded in your Wild Apricot database.

Using Shopify

You can embed a product or collection from your Shopify store onto a page in your Wild Apricot site.

Shopify charges a monthly fee and a per transaction fee, and provides a 14-day free trial.

To embed a Shopify product or collection, follow these steps:

  1. Log into your Shopify account.
  2. Go to Shopify's App store and get the free Buy Button app.


     
  3. Within your Buy Button settings, choose the product or collection you want to sell on your Wild Apricot site then click the Select product or Select collection button.

  4. Adjust the settings that control how your product or collection appears on your Wild Apricot page.
  5. Click the Generate embed code button.



  6. Click the Copy embed code to clipboard button.

  7. Begin editing the page where you want the product or collection to appear.
  8. Add a custom HTML gadget where you want the product or collection to appear on your page.
  9. After you have inserted the gadget, hover over it and click the Settings icon.
  10. Within the gadget settings on the left, click the Edit code button. 

     
     
  11. In the window that appears, paste the embed code you copied then click the Save button.  
  12. Click the Save button to save the changes to your page.

Your product or collection will now appear on your Wild Apricot page.

Using Ecwid

Ecwid provides support for a free online store than can sell up to 10 different products. If you want to sell more products – or take advantage of premium features such as discount coupons, volume discounts, and multi-tier pricing – you can upgrade to a paid account. Ecwid does not charge setup fees or transaction fees.

Getting started with Ecwid

Icon

Instructions for third-party services like this are provided as a courtesy and may contain out of date information or screen clips. For the latest instructions, consult the third party's website.

To get started setting up an online store with Ecwid, go to www.ecwid.com and create an account. From the dashboard, you can add products and product categories, and track purchases. To get you started, Ecwid provides a number of sample products and categories.

Now that your account has been created, you can add a product browser widget to your Wild Apricot site.

Adding a product browser

The product browser displays your products and product categories.

To add the product browser widget to a Wild Apricot page, follow these steps:

  1. In the Getting Started section of your Ecwid dashboard, copy the code that appears under Product Browser Widget Code

  2. In your Wild Apricot site, go to Sites pages (under the Website menu) and begin editing the site page or page template where you want the online store to appear.
  3. Click the Gadgets icon to display the list of available gadgets.
  4. Drag the custom HTML gadget you want to insert from the Gadget list, and drop it on the desired location. 

     

    When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
     
  5. After you have inserted the gadget, hover over it and click the Settings icon. 

  6. Within the gadget settings on the left, click the Edit code button. 

  7. In the dialog that appears, paste the code you copied from the Ecwid site then click the Save button. 

  8. Click the Save button to save your changes.

The store should now appear on your site page. Switch to public view if the store does not immediately appear.

Icon

Instead of creating a custom HTML gadget to execute the code, you can use the Snippet feature to embed the code within a content gadget. For more information on using the Snippet feature, see Inserting and modifying HTML or JavaScript.

Adding a shopping bag

Within your online store, shoppers choose products by dragging and dropping them onto the shopping bag (aka shopping cart). The shopping bag also shows how many products have been selected so far.

To add a shopping bag to your online store, copy the code that appears under Bag Widget Code on your Ecwid dashboard.

Within the Wild Apricot page where your online store appears, use the S (Snippet) button to paste the code where you want the shopping bag to appear. For example, if you are using a 2-column layout on your page, you might want to paste the product browser code in the first column and the shopping bag code in the second column.

Adding category tabs

You can add tabs above the product browser that allow shoppers to quickly jump from one product category to another.

To add product category tabs to your online store, copy the code that appears under Categories Tabs Widget Code on your Ecwid dashboard.

Within the Wild Apricot page where your online store appears, paste the code into a custom HTML gadget just ahead of the custom HTML gadget containing the product browser code.

Adding a category menu

Instead of product category tabs, you can display a product category menu along the left side of the product browser.

To add a product category menu to your online store, copy the code that appears under Categories Menu Widget Code on your Ecwid dashboard.

Within the Wild Apricot page where your online store appears, paste the code into a custom HTML gadget just ahead of – or to the left of – the custom HTML gadget containing the product browser code.

Adding product search functionality

You can add product search functionality to your online store. Shoppers can search for products and jump to products within the search results.

To add a shopping bag to your online store, copy the code that appears under Search Box Widget Code on your Ecwid dashboard.

Within the Wild Apricot page where your online store appears, paste the code into a custom HTML gadget and position the gadget where you want the search box to appear.

Troubleshooting Ecwid integration

Ecwid uses unencrypted http URLs in its embed code. If your Wild Apricot site uses encryption, requiring access via https, your Ecwid store may not appear on your Wild Apricot site page. To correct this, edit the HTML code you embedded and replace all instances of:

with:

On this page: 

 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7