Use shipping options to set an origin address for items to be sent from. To set this up:
Note: You can only add an origin address after you have added the shipping option. Otherwise, the shipping origin is automatically pulled from your company address (set under Settings).
The built-in store has a secure one-page checkout. Customers can enter shipping and payment information and leave any necessary comments before they click to place the order.
Note: This feature is enabled for new stores. If you created your store a long time ago and don’t see this feature, click “Settings” and then click “What’s New” to switch to the newer storefront.
Once customers add their desired products to the shopping cart, customers can proceed to the checkout to complete their purchase. If you have enabled inventory tracking, customers will only be able to add in-stock products; once customers open their cart to checkout, the store will check your product inventory again to ensure you don’t oversell. If the products in the card are still in stock when they checkout, customers can proceed.
The first step on the checkout page is for customers to enter their email address. The store automatically creates a customer account when the email is entered, and customers can use this email to login into their account to check order status.
Email is captured at the very beginning to ensure you have contact information if the customer drops out before purchase. This will allow you to keep a list of “track abandoned carts” email and send emails to these customers asking if they still want to purchase.
This email is also where your store will send order notifications; customers receive order notifications to track the order.
After entering their email, the customer proceeds to the delivery options where they can provide their shipping address and select the best method.
The customer must select one shipping method for all products in one order. Based on the address they enter, the store will show the relevant shipping options based on order weight, dimensions, location, etc.
If you sell a digital good or a service, you can disable “This Product Requires Shipping or Pickup” on the product page; this will allow customers to skip to the next step. If you sell physical products, enable this option.
The store will automatically detect customer location using the MaxMind GeoIP service and will display the estimated shipping cost and tax. As a result, the country and city will likely be pre-filled for the customer.
Note: This estimated cost will be based on the first shipping method available in your list of methods you’ve enabled in the “Shipping & Pickup” section. You can sort these methods as desired, including sorting by price – lowest to highest so customers view the cheapest option.
You can also require that customers enter their phone number at this step; this is critical if your primary method of communication is by phone. To set this up, visit “Settings,” click “General,” and select “Cart & Checkout” to enable “Require phone number at checkout.”
The next step is for the customer to decide how they would like to pay. After selecting their delivery option, customers will see all the payment options that you have enabled.
The various payment gateways for credit card processing are integrated differently with the store; this affects the payment flow. For some gateways, the credit card form is securely embedded in the store checkout so that customers stay on your site for the entire checkout process. With other gateways, customers will leave the site to enter credit card details, then return to your store for a “Thank you for your order” page.
You can add instructions for any method, which can help describe the process to a customer. For example, if a customer is paying offline, you can include instructions on how they will pay. When the customer selects this method, the instructions will appear below the list of methods.
You can collect customer billing addresses in this step as well. Requesting a billing address can limit the number of chargebacks or fraudulent charges you see, as some payment gateways can compare the entered billing address to the address attached to the credit card.
To add the billing address section:
Once customers enter their payment details, customers are promoted to “Place Order” (this can say ‘Pay’ or ‘Pay with PayPal’). After they click, customers will see their order details on the “Thank you for your order page,” as well as in the Order Confirmation email they’ll receive in their inbox (read more about email notifications).
You can edit your checkout page to include any follow up information: announcements, a place for customers to leave notes, etc.
You can request additional information from customers after they checkout. This includes asking where they heard about the company, any custom requests, etc.
Note: during the checkout process you can change the order of fields, hide, or add new sections, and generally customize this for your company by using CSS or API.
You can ask customers to agree with your company’s Terms and Conditions before proceeding with checkout.
Customers will now be required to agree with Terms and Conditions to proceed. Read more about adding legal pages to your store.
You can ask customers to consent to receiving marketing emails.
If you don’t use the zip/postal code to provide delivery cost estimates, you can remove this request.
The store will pre-populate several fields – country, city, zip/postal code – based on the customer’s IP address (this is done using MaxMind’s GeoIP solution). This allows customers to check out quicker and make it easier for you to get sales. This also allows the store to show shipping calculations immediately, which many customers will want to see.
Occasionally, the incorrect values will show. This is because the MaxMind databases don’t have the correct IP address. You can check your own IP by visiting MaxMind to oconfirm your location. If this is correct, the problem should be fixed soon (our databases are updated monthly) and if it isn’t correct, you can send an email to MaxMind’s support team and they will fix this.
If you see this message, it means you have not enabled any payment methods in your store. Find out how to set up your payment methods.
Indefinitely. The products never expire, but the cart is tied to the customer’s browser so if they clear their cache/cookies the cart will be cleared. This feature is in place to help secure abandoned cart sales.
These products remaining in customer carts do not affect the store’s inventory. The inventory will only adjust when a customer places an order.
The built-in store is for more than physical and digital sales; you can also sell services. This could include any service: classes, consultant appointments, repair offerings, etc.
To showcase that you are selling services and not products, you simply need to uncheck the shipping checkbox. As well, ensure that your product page includes detailed information about the service and how they will receive it.
If you are offering appointments – such as a bike repair shop, physiotherapy sessions, or babysitting bookings – you can automate this process. Simply integrate your synced online calendar to your product page.
To accept bookings with an integrated calendar:
It’s essential that you include detail for customers to know what the service is, how they can book/purchase, and how they will receive it.
These descriptions should include:
If you have products in your store that complement each other and are good options to buy together or you may want to promote certain products and encourage customers to buy more. To do this, you can use related products.
Related products can be displayed on the product details and the shopping bag pages. Adding these to both pages ensures that if customers missed the items while shopping, they get a second chance to see them before they check out.
To add related items to your product page:
These related items will now appear under the “You May Also Like” section.
To add related items to the bag page:
The related items will now appear on the shopping bag page under “You May Also Like.”
This feature allows you to set a unique image, price, SKU, quantity, and low stock notification for each set of product options (read more about product options here). When this set of options is selected by a customer, they will see the relevant details – an image, for example – for that variation.
Note: this feature is only available on the Ecommerce Pro or Ecommerce Unlimited plans.
You can use the same SKU for your product and its variations unless the stock of the variations differs from the original product. The reason for this is that if you have a different inventory total for the variation, it should be treated as a separate product and should have a unique SKU.
No. You can have more SKUs from the product variations than your plan limit allows. Only the number of base products goes towards the limit.
If you’re selling products with multiple options – e.g., color, size, etc. – you can add product options. This will show one product with multiple options and allow customers to select the specific product they want. You can also:
To create product options:
Note: product options allow you to increase/decrease the price, but the options aren’t tracked as separate products because they don’t have their own SKU number. To track the inventory of these options, use Product Variations.
– Dropdown List: Select from a long list of choices.
– Radio Buttons: Select one from various choices, such as colors.
– Size: Select one from multiple sizes.
– Checkboxes: Select multiple options.
– Text Field /Text Area: Customers can type requests (useful for custom work).
– Date Picker: Select a date.
– Upload Files: Customer can upload file.
After creating your product options, you need to enable this within the main store widget.
Adding the ability to order food online is identical to how you set up a traditional ecommerce store, but this will allow you to fill out orders in real time.
Note: in order to set up an online store you may need to select an ecommerce hosting plan. Find out what features each plan offers here.
Follow the following steps to begin accepting food orders through your website.
First you need to add a store to your site. You can do this on any page; for example, create an Online Orders page and add the store here.
You can add menu items as if they are products. To read more about adding products, read our Add and Edit Products doc.
When adding menu items, you can use Product Options to set the different options for a product (e.g., regular or gluten free bread). If these options affect the price, you can use Product Variations to update the price in real time. This will allow customers to see the relevant prices/product.
You can also use Inventory Tracking to keep track of the stock of your menu items. This prevents customers from ordering an item that you can’t provide.
You can offer local delivery and/or a pickup option for customers. This can be done within the “Shipping and Pickup” section of the store.
Once you’ve completed the above steps your online ordering will be set up. You may want to add some information on your website regarding online ordering: how it works, the dates and times available, what protective measures you take to keep customers safe, etc.
You can add and edit products in your store by visiting the catalog. You can also use a CSV to import your products.
To add a product:
Note: To add a YouTube or Vimeo video, click “Insert Video” within the description and paste the embed code.
Saved products will appear in the product menu.
To edit a product:
Once you have saved your edits, changes will appear in the product menu.
To permanently delete a product:
Note: This feature is only available on the Ecommerce Pro plan or higher.
Enabling multiple languages for your store it easier to reach a wider range of customers. The store will automatically connect to the same language as the site is being viewed in.
If you already have a multi-language site, go to step three.
Now when site visitors switch languages on your site, they will automatically see that language when they visit the store.
In addition to translated store products and categories, site visitors will also see default store elements, including Add to Cart and Go to Checkout. Store notifications will also be translated.
You can add a Flex section in the same manner as any other section. Hover between two rows and click “+Section.”
Or you can right click between rows and select “+ Add” a section.
The Sections panel will open on the left-hand side and you can select “Flex Sections” to pick your desired design.
Click “Save” in the top bar and your new section will be added to your site.
Flex Mode will be open and you can edit the design.
Once you’ve added the section, you can pick your grid layout and add containers and/or flexboxes, which will contain widgets.
To pick your grid, select a preset layout in the “Layout” section in the right-hand options. You can also choose to customize the layout by entering the desired columns and rows.
To add containers or flexboxes, click on the grid and select “+.”
In the “Add Widget” picker you can select a container, vertical flexbox or horizontal flexbox. To learn which option is best for your content read more about containers and flexboxes.
Select the element and drag it to the proper location. As you drag the element, blue dots will appear to help you pin it to areas of the grid.
You can see where the element is pinned by scrolling down the design panel on the right to view “Pin.” You can also view the location within the grid here under “Grid location.”
You can resize the element by grabbing the edges and dragging to the desired size.
Once you’ve added a section, set the grid, and added either a container or flexbox, you can then insert widgets. To add, click on the container or flexbox and select the “+” button.
Select a widget from the “Add Widget” picker.
The widget will appear within the container or flexbox and you can drag/resize this as desired. As you drag the widget, blue dots will appear to help you pin it to areas of the grid.
You can see where the widget is pinned by scrolling down the design panel on the right to view “Pin.”
Once the widget is added you can customize as you would any other widget in Without Code. The content and design editors will be available by clicking on the widget and selecting the edit icon.