You are viewing the legacy dashboard. To explore the new dashboard click here * Please note that the new dashboard will not display your existing sites until they are migrated.

Ecommerce: Shipping Options

Ecommerce: One Page Online Checkout

Ecommerce: Sell Services

Ecommerce: Related Products

Ecommerce: Product Variations

Ecommerce: Product Options

Ecommerce: Online Ordering for a Restaurant

Ecommerce: Add and Edit Products

Ecommerce: Multilingual Stores

Flex: Add and Edit Sections

Use shipping options to set an origin address for items to be sent from. To set this up:

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Shipping & Pickup.”
  3. Select “+Add Shipping Method.”
  4. Choose how you will ship (e.g., FedEx)
  5. Select from the following options (NOTE: not all options are available on all carriers)
  • Automatically calculated: This option will calculate rates based on the order and are automatically retrieved from your chosen carrier. No additional steps required.
  • Free shipping: If you want to include the cost of shipping in product prices, you can select this option.
  • Flat rate: If you wish to charge one consistent rate regardless of how many items were ordered, you can select the flat rate option.
  • Custom rates: This option allows you to set your own rate calculation rules based on order price, number of items ordered, or total weight.

 

Set up an Origin Address

  1. Select the Ecommerce tab from the left menu and open your store. Click on “Shipping & Pickup.”
  2. Select “Set up Origin Address.”
  3. Select from the following options:
  • Ship orders from my company’s address: If your company’s address and the location you will ship orders from match.
  • Ship orders from a warehouse or another location: If you are shipping orders from a different location from your company’s address, select this option. This option allows you to keep your company address unchanged.
  1. Enter the address.
  2. Click “Save.”

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.

 

Checkout Steps

Add Products

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.

 

Enter Email Address

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.

Select Delivery Option

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.”

 

Select Payment Option

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:

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Settings,” “General” and select “Cart & Checkout.”
  3. Enable “Ask for billing address during checkout.”

 

Place Order

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).

 

Checkout Form Options

You can edit your checkout page to include any follow up information: announcements, a place for customers to leave notes, etc.

 

Request Details

You can request additional information from customers after they checkout. This includes asking where they heard about the company, any custom requests, etc.

  1. Enable order comments: if you need information about the order, select the Ecommerce tab to open the store, then click “Settings” – “General” – “Cart & Checkout” – “Order comments.” Under “Order notes field caption,” enter a description of the information you want customers to leave. You can make this optional or required.
  2. Add the company name field: you can request the customer’s company name here or you can change the name of the field to request different information. Simply enable this option and edit the name.

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.

 

Terms and Conditions Checkbox

You can ask customers to agree with your company’s Terms and Conditions before proceeding with checkout.

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Settings,” then select “General” and scroll down to the customer consent area.
  3. Enable “Show “I agree with Terms & Conditions” Checkbox at checkout.”

Customers will now be required to agree with Terms and Conditions to proceed. Read more about adding legal pages to your store.

 

Consent to Receive Marketing Emails

You can ask customers to consent to receiving marketing emails.

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Settings,” then select “General” and click “Cart & Checkout.”
  3. Locate the Newsletters section and enable “Request customers’ approval for your marketing emails at checkout.”

 

Remove Zip/Postal Code Field

If you don’t use the zip/postal code to provide delivery cost estimates, you can remove this request.

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Settings,” then select “General” and click “Cart & Checkout.”
  3. Disable “Ask for a Zip/Postal code option.”

 

FAQs

Why are customers seeing pre-populated values in the checkout fields?

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.

 

Why am I or customers seeing that “no payment methods are available at this time”?

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.

 

How long to added products remain in a customer’s cart?

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.

Add Services

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Select “+Add New Product.”
  4. Enter the service name, description and image.
  5. Select “Shipping & Pickup” and disable “This Product Requires Shipping or Pickup.”
  6. Click Save (top of page).

Accept Bookings

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:

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Select “Edit Product” and click “Options.
  4. Select “+Add New Option.”
  5. Under “Option Name” type ‘Date’ and under the input type drop down, select “Date Picker.”
  6. Select “Required Option.”
  7. Optional: If you need to set a time in addition to the date, click “+Add New Option.” Enter ‘Time’ and select “Text Field” from the drop down. Make this a “Required Option.”
  8. Select “General” and under “Description” add your online calendar. E.g. if you have a Google Calendar, get the code, click the HTML button <>and paste this code into the product description.
  9. Under your description of service, explain how to make a reservation and select a date/time.
  10. Optional: If you have a limited number of spaces available (e.g. for a class), set a stock level. Once you have reached a stock of zero, your product/service will show as having no spaces available.

Service Descriptions

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:

  • What: what exactly are you providing?
  • Timeline: when will customers receive the service?
  • Conditions and limitations: are there any terms and conditions?

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.

 

Examples

  • A company selling phones and accessories would offer a phone case as a related product to a phone.
  • The company offers guides or extra services in addition to the primary service. These could be listed as related.
  • There are two categories that are closely related – for example, shoes and socks. You can use the “Random product from” option to show random related products from a specific category.

 

Product Details Page

To add related items to your product page:

  1. select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Locate the relevant product and click “Edit Product.”
  4. Click “Related Products.” You can choose from the following three options:
    1. “Assign Products” will show specific products
    2. “Display random products” will show random products from a category
    3. Or select both options

These related items will now appear under the “You May Also Like” section.

 

Shopping Bag Page

To add related items to the bag page:

  1. Select the Ecommerce tab from the left menu and open your store. Click “Settings.”
  2. Select “General” and click “Cart & Checkout.”
  3. Scroll down to “Related Products” and turn on “On Cart 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.

Examples:

  • The company sells clothes, and they want to be able to track inventory per option. For example, you might sell a T-shirt available in different sizes; you can set inventory for each individual size so if the large is sold out, but small is still available, customers will see this option.
  • The options look different, and you want to show different images for each one. For example, the company sells notebooks; when a customer clicks on individual options, they will be able to see what that individual notebook looks like.
  • The option selected changes the price and you want to show the correct price right on the product details page.
  • The options have different weights, and you want to assign these to each one. If you offer bundles, this feature can display more accurate shipping rates.

 

Adding Product Variations

  1. select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Locate the relevant product and click “Edit Product,” then click “Options.”
  4. Click “Variations.”
  5. Click “+New Variation.”

 

FAQs

Can I use the same SKU for the product and it’s variation?

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.

If I set an additional SKU, will they count towards my product number limit?

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:

  • Offer add-ons (e.g., gift wrapping)
  • Request that customers upload a file
  • Offer multiple options

Adding Options

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.

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Locate the relevant product and click “Options.”
  4. Click “+Add New Option.”
  5. Enter the Option name.
  6. Select the Input type*.
  7. Click “+Add New Value” and enter the price modifier.
  8. Select the “Default value” or, if the option requires a specific selection, click “Do not preselect the default value.”

*Input Types:

– 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.

Enable Options

After creating your product options, you need to enable this within the main store widget.

  1. Visit the page containing the store. Right click and select “Edit Design” to open the design panel.
  2. Select “Single Product Page” and click “More Design Options.”
  3. Enable “Product Options.”

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.

Add Store

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.

Add Menu Items

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.

Add Payment Method

You can select various payment options, which include online or offline payments. You can also enable tips and gift cards as an option.

Add Delivery and/or Pickup Options

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.

To Set Local Delivery

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click “Shipping & Pickup.”
  3. Within Local Delivery select “+Add Delivery.”
  4. Select the best delivery method for your company.
  5. Set the following:
    • Delivery zones
    • Availability by subtotal
    • Operating hours
    • Date and time picker (Note: this feature is only available on the Ecommerce Pro and Ecommerce Unlimited plans.)
    • Description of delivery
  6. Click “Save.”

To set up pickup

  1. Select the Ecommerce tab from the left menu and open your store.
  2. Click “Shipping & Pickup.”
  3. Within Self Pickup click “+Add Pickup.”
  4. Set the following:
    • Instructions
    • Charge
    • Date and time picker (Note: this feature is only available on the Ecommerce Pro and Ecommerce Unlimited plans.)
  5. Click “Save.”

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.

Add Products

To add a product:

  1. select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “+Add New Product.”
  3. Enter the product name, SKU (ID number), weight, image, price, and description.

Note: To add a YouTube or Vimeo video, click “Insert Video” within the description and paste the embed code.

  1. Click “Save.”
  2. Follow the above steps for all other products.

Saved products will appear in the product menu.

Edit Products

To edit a product:

  1. select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog.”
  3. Locate the relevant product and select “Edit Product.”
  4. Make desired changes to the details.
  5. Click “Save.”

Once you have saved your edits, changes will appear in the product menu.

Delete Products

To permanently delete a product:

  1. select the Ecommerce tab from the left menu and open your store.
  2. Click on “Catalog” and select “Products.”
  3. Locate the relevant product and select “Edit Product,” and then click “Delete 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.

Creating a Multilingual Store

If you already have a multi-language site, go to step three.

  1. Set up the desired additional languages on your site. View these steps here.
  2. Ensure you have upgraded your store to the Ecommerce Pro plan.
  3. In the site editor, open up the store and click “Manage Store.”
  4. Under “Settings,” click “General.”
  5. Select “Regional Settings.”
  6. Under the “Store Language” section, select “Language Settings” and pick the language you want to add.
  7. Add in translations for products, categories, and labels
  8. If the site is live, click “Publish” in your site editor to republish or if this is your first time publishing, return to the dashboard to publish.

Now when site visitors switch languages on your site, they will automatically see that language when they visit the store.

What Will Translate

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.

Add a Flex Section

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.

 

Add Containers and Flexboxes

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.

 

Add and Edit Widgets

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.

Join Now