Follow

Setting up an online store

You can set up an online store on your Wild Apricot site to sell merchandise or services.

Only full account administrators can set up and manage an online store.

What can you do with the store?

Wild Apricot's store currently includes the following functionality:

  • Add multiple product catalog pages, and filter each using product tags
  • Display a shopping cart icon on every site page
  • Add products to your product catalog, with multiple images for each product
  • Offer multiple variations (e.g. sizes or colors) for each product
  • Set prices, including special member prices
  • Set stock limits
  • Send automatic email notifications
  • Customize automatic store emails
  • View and process orders
  • Cancel an existing order

What can't you do with the store?

The following functionality is not currently available:

  • Apply taxes to an order
  • Place an order on behalf of someone else
  • Modify an existing order
  • Process returns
  • Generate reports

Steps involved in setting up your store

The following steps are involved in setting up your Wild Apricot store:

  1. Add products to your product catalog.
  2. Create a page and add a catalog gadget.
  3. Add a cart gadget to your page template(s).

These steps are described in detail below.

Adding products to your product catalog

To add a product to your product catalog, hover over the Store menu and select the Products option. On the screen that appears, click the Add product button.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/hr_DwXAkkaCd_FC08CpzlS4Pge9MJ7fwqH9RtFE7UBc/add first product-BmU.png

On the Add product screen, you can:

  • control access to the product
  • provide a product name and description
  • add images
  • specify both regular and member pricing
  • add product variants (e.g. sizes, colors).
https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/e5dP3YKIJo0B621meR-i-VGTds1ncvrl3UNJbFFE1-o/add product-k00.png

When you are finished adjusting your product settings, scroll down and click the Save button.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/6d_gyVzQTlWditlz6qPii_dCLkWHN4cpKDzRHZVqRps/save product-cyw.png

Product settings

The following settings are available when adding a product.

Public/Admin only

Controls whether the product appears in the public product catalog. Set this to Admin only until you are ready to make this product public.

Product name

The name of the product to be displayed below the cover image on the public product catalog.

Regular price

The price for visitors to your site who are not logged as members.

Member price

The price for logged in members who have a membership status of Active, Pending Renewal, or Pending Level Change (not Pending New, Lapsed, or Suspended).

Tags

Used to organize products into categories. You can filter your product catalog by tags to display only certain kinds of products.

Images

You can add up to 6 images for your product. The images must be in PNG, JPG, or GIF format, and up to 2 Mb in size. The image in the first slot will be used as the cover photo in your product catalog.

To add your first image, click the Upload photo button within the image area, or drag and drop an image onto the image area. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/Ea0NDn1tpvO4bCTySb_dwkpyesjwDiYZU7s-RLZu0oA/add%20first%20photo-nhI.png

To add more images, click one of the empty image slots then click the Upload photo button or drag and drop an image.

To rearrange the order of your product images, drag and drop an image from one slot to another.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/yErkMsbAa6tudsjnxkd9WpqsOdyezquLd3YUF1J8BeE/drag and drop product images-KXM.png

Description

You can enter a description that appears on the product details page within your product catalog.

Inventory policy

Here, you choose whether you want to specify a stock quantity, so you can track inventory and cut off sales after the available stock has been sold.

To specify stock quantity and track inventory, select the Track inventory option. If you have no product variants (like size or color), you can enter the stock quantity for the product in the Stock field.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/IjhJBY5DND4HddLMaaGijqaIQVZepcSitdXjs2R9IBY/product stock-w3g.png

If you have product variants set up, you specify the stock quantity for each individual variant in the Variants section (below).

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/NXhvOcKd--aP5EFCjHvJxxm9T569T9erHbP-7nXRwk8/variant stock-78E.png

Your products list will display the stock quantity you have specified, or Unlimited if you haven't specified a stock quantity.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/E5sm1gNsJJtrg6fCSQVmtIMT4_PfiZL_-D-zegNKIKU/product quantities-xdc.png

As customers purchase your products, the stock quantity will be automatically adjusted to indicate the remaining quantity.

On your store, the available quantity left in stock is displayed on the product page. If there are product options, the quantity is displayed after the customer chooses their options.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/8OkfiuLEx5OOStcyIQP3-e_w1eEiQQlOWVEcPWmryqw/store stock-8f0.png

At checkout time, the customer will be prompted to update their cart if the quantity they requested is no longer available.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/qmtSZgS5sY4nLTXV8cHRJZO24n5s3U5Pm-l6icFwGbQ/Inventory issues copy 6b-5vU.png

Variants

You can add one or more product options – like different sizes or colors – to create multiple product variants (like Small, Red or Medium, Blue).

To add a product option, click the Add option button under Variants.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/x0Vp3kuzubepuMBzWpLdcoGtpGLRecJ5egyy62Rl7f8/add variant option-X9g.png

In the Option name field that appears, you identify the option (e.g. Size), and in the Option values field, you enter the values for the option, separated by a comma (e.g. S,M,L).

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/eloS7Uj6FBNbFHvrJ9T0yEbYK17aMJMlkb5JssXp8Bo/size variants-p4Q.png

For each option, a dropdown will appear to your customers on the product details screen using the option name as its label and the option values as its contents.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/GiJMnpIZPE1IwTl_nFVcJwf9Qx_BE8cVK3zu0tUdqcw/size dropdown-eHY.png

Each variant your customers choose will appear as a separate item in their shopping cart and in your product order.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/O_xFLHu_6FtaYQRIEuNrfBeI8iLrbGRTVa-2l6gmiWA/order with different sizes-74w.png

If you've set the product's Inventory policy to Track inventory, you can specify the stock quantity for each variant.

Removing a product

You can remove a product from your product catalog without affecting any existing orders (or related invoices) for that product.

To remove a product from your product catalog, follow these steps:

  1. Click the product within the products list.
  2. Scroll down and click the Delete button. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/bgyYf89sbOWPHS3_pfjbqjMgxfBO3Xt8l_jCFd_F2bM/delete%20product-9CY.png
  3. When prompted to confirm your intention to delete the product, click Yes.

Adding a catalog gadget

So that visitors to your site can view and purchase your products, you need to add a catalog gadget to a page on your Wild Apricot site.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/1eT18ErWbkSzTEmSJ7uC5Q6jP5NB60SZgweOJyuJVmk/store catalog-GqQ.png

To add a catalog gadget to a page on your site, follow these steps:

  1. Begin editing the site page where you want the product catalog to appear.
  2. Click the Gadgets icon to display the list of available gadgets. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/JbBNg7WHAkAZiis5Bcq7KI-PCppRWa561APANxYgdxY/add%20gadget%20icon-ClQ.png
  3. Drag the catalog gadget from the Gadgets list, and drop it on the desired location within the page. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/FA2Lfsl912uYZZrVCYrGG-Qe_bhi3Uk_Bdb7fyTJLUs/add catalog gadget-c1I.png
  4. Hover over the catalog gadget and click the Settings icon.
  5. Within the gadget settings on the left, choose the order in which you want products to appear in your catalog. You can sort the product list by date added, price, or name, in ascending or descending order.
  6. Choose whether you want to show all products on your product catalog, or just those products with a particular product tag. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/B254PA3HIVpxsgdTQtAC0IETdVaZFGdJ5xDXwN7JnY8/catalog gadget settings-Hqw.png
  7. Click the Save button to save the changes to your page.
You might want to add a content gadget with welcoming text above your catalog gadget.

Adding a shopping cart gadget

So that visitors to your site can jump to their shopping cart from any page, you need to add a cart gadget to one or more page templates.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/iS8eX3s6RmqKlYtHuvGgQLo1uVF3iicirNe7cRpnUQU/shopping cart gadget-lvA.png

To add a cart gadget to a page template, follow these steps:

  1. Hover over the Website menu and select the Templates option.
  2. Within the list of templates on the left, click the template you want to modify.
  3. Click the green Edit button at the top of the screen.
  4. Click the Gadgets icon to display the list of available gadgets. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/JbBNg7WHAkAZiis5Bcq7KI-PCppRWa561APANxYgdxY/add%20gadget%20icon-ClQ.png
  5. Drag the cart gadget from the Gadgets list, and drop it on the desired location within the page. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/uhK5xW8zEY0rVvf2qI3U03JDSDQRWyiK1B1jpLPvdsM/add%20cart%20gadget-oTU.png
  6. Hover over the cart gadget and click the Settings icon.
  7. Within the gadget settings on the left, you can control the horizontal alignment of the cart.
  8. Click the Save button to save the changes to your page template.

Placing an order

Visitors to your catalog page will see the name, pricing, and cover image for your products. To view product details and place an order, they can click the image or the product title below it.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/trhpo4rUKMwqp-xeBMRpMr87Gww6Tn4v9FDUll_FQM4/store catalog-_s8.png
Currently, administrators cannot place an order on behalf of a contact.

On the product details screen, visitors can view other product images, read your product description, choose product options (like size or color), view the remaining stock quantity, adjust the order quantity, and add this order to their shopping cart.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/HTRDu3HA1CKUxvVYYx63uGtPAOZtkWPgPTsHfe1sfAg/order product-dog.png
You can add content (like instructions) above or below the product details by modifying the Online store product system page.

To add the order to their shopping cart, the visitor clicks the Add to cart button.

With the order added to their cart, the visitor can view their shopping cart by clicking the View cart link beside the Add to cart button, or by clicking the Cart option where you placed the cart gadget.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/qV1XgYJpzdzvDm1fVZfzFTBgkVZ58SryyInJ9wFKup0/view cart-gf8.png

From their shopping cart, visitors can adjust the quantity of their items and proceed to checkout.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/2BjnUueuWznyWMupDY3nD1UApKIEJvYTd19omXnRhrQ/proceed to checkout-Tag.png
You can add content (like instructions) above or below the cart by modifying the Online store cart system page.

On the first checkout screen, customers enter their contact information.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/gxQJi23pBEqrFP2NFm654bEvtei-VSkGqpy74OTYZQ4/store billing details-uA4.png

Any required rules and terms fields that you have added to your common fields will appear at the bottom of the form.

You can add content (like instructions) above or below the checkout forms by modifying the Online store checkout system page. You cannot currently choose which fields appear on these forms.

On the second checkout screen, customers enter their delivery information.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/B-lQfbwDjYuT6Jjpjb5ji5bojVCIoMcys7O_8UyD_h4/store delivery-eeU.png

On the final checkout screen, customers confirm the billing and shipping details, and complete the order by choosing a payment option – Invoice me or Pay online.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/0egr6Banr_DyVMssUHNqNqy1JKezrmulluJcUO30H_k/order confirmation-Ixs.png

Once the customer completes the order, an email confirmation is sent to the customer and a copy is sent to your organization contact.

You can customize this message, and provide for it to be copied to other recipients using email routing.

Viewing orders

To view a list of the orders from your online store, hover over the Store menu and select the Orders option. By default, the list is sorted in chronological order.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/5LZfXu-tyuQYNc_yVIkY25GYDvPtvsJM699zOs14Ews/store orders-5AA.png

To change the sorting order, click the up or down triangles beside the appropriate column heading.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/TPXhXtBB7q_rfXe1GgCYHp5G-dEbkO0ocnERKy8Cl4g/sorting orders-BuU.png

To view the details of an order, click it within the list.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/RTQy4G5jz9Ld-eALk6sRXdQwAkpVSY610iWGeGbI_ws/order details-UYo.png

Within the order details, you can enter the text of the message to be displayed to the customer when you fulfill the order, and record internal notes that only appear within the order details in admin view.

For digital orders, you can insert the URL for the digital download in the Message to the customer field. You can't format the URL as a link here but most email clients will convert a full URL to a clickable link.

You can click the Invoice link to display the corresponding invoice for the order and record payment, or click the customer's name to jump to the contact details for that customer.

Invoices and payments for online store orders will have an origin of Online store order. You can filter the invoices and payments list to display only store-related entries by choosing the Online store order filter.

Fulfilling an order

For orders, there are three statuses: Unfulfilled, Fulfilled, and Cancelled. A status of Fulfilled means that the order has been delivered to the customer.

To change the status of an order from Unfulfilled to Fulfilled, display the order details then click the Fulfill order button.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/3tgRBdR7FWM9fmT8EPqo_UEFrxI62tgOClLE5LqIj_k/fulfill order-0Bg.png
If the order is unpaid, you will be asked if you want to proceed with fulfilling an unpaid order.

Once the order is fulfilled, a FULFILLED stamp will appear over the order details.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/v0dzScqo9YAFFmM8dtshRDwAZbx5nfRTbBIKjQWICxg/fulfilled order-XQM.png

The customer will receive the Order shipped/fulfilled email message, and a copy will be sent to your organization contact. You can customize this message, and provide for it to be copied to other recipients using email routing.

Cancelling an order

You can cancel a fulfilled or unfulfilled order. Cancelling an order will not automatically void the corresponding invoice or refund the order payment.

You cannot undo the cancelling of an order.

To cancel an order, display the order details then click the Cancel order button.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/iK-SU5eD60OXAXWSBSKDnwB0zEs5vADPA9hkBjYXbBw/cancel order button-9L0.png

Once the order is cancelled, a CANCELLED stamp will appear over the order details.

The customer will receive the Order cancelled email message, and a copy will be sent to your organization contact. You can customize this message, and provide for it to be copied to other recipients using email routing.

Customizing store emails

You can customize each of the emails that are automatically sent when the status of an order changes.

To customize a store email, hover over the Store menu and select the Store emails option. On the screen that appears, click the blue link for the message you want to customize.

You can customize the following automatic store emails:

  • Order successfully created
    Sent to the customer and organization contact once the customer finishing checking out.
  • Order shipped / fulfilled
    Sent to the customer and organization contact when the status of the order is set to fulfilled.
  • Order cancelled
    Sent to the customer and organization contact when the order is cancelled.
  • New order
    Sent to the organization contact once the customer completes checkout.

You can also provide for these messages to be forwarded to other recipients using email routing.

When customizing your store emails, the following macros are available:

  • {Order Number}
    The order number.
  • {Order PlacementDate}
    The date the order was placed.
  • {Order ShippingAddress}
    The customer's shipping address.
  • {Order Instructions}
    The instructions added to the order by the customer.
  • {Order Contact Phone}
    The customer's contact number
  • {Order Table}
    A table displaying the product, price, quantity, and total cost for each item.
  • {Order Message}
    The message to the client, normally added to the automatic email notification sent to the customer upon order fulfillment.

0 Comments

Please sign in to leave a comment.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.