Article Topics

  • Shopping Cart Set Up Overview
  • Setting Up Your Shopping Cart Pages
  • Check out Page Overview
  • How to Edit Your Check out Page

Shopping Cart Set Up Overview


This article provides an overview of how to set up the shopping cart pages which include: Product Details Page, Shop/Category Page, Cart Page, and Checkout Page.


For the sake of this demonstration, we will be starting off on the DIY-VB-Template. As you will notice, there are no store pages existing on this template.

Setting Up Your Shopping Cart Pages



Walkthrough


Step 1 - Access Pages


1. First, on the “Welcome Home” screen, select the “Content” module located to the left-hand side of your screen in the sidebar menu. 


2. Next, in the drop-down list select the “Pages” option.

 

Note: You will notice when you enter the “Pages” window, the following pre-built pages will be displayed, which are very important in regards to your shopping cart set up. 

 

Reserve Block (Expandable)

Cart

Checkout

Payment Success

Terms and Privacy 


Step 2 - Setting Up Default Pages


3. First, you will need to set up your default pages. To begin, select the “Default Pages” button located towards the top of the screen.

 

4. When you are first prompted with the “Set Default Detail Pages” pop up, you will notice there are two fields that read “Product Detail Page.” One of these fields will eventually need to be deleted (we will cover this later in this tutorial). For the sake of time, we will set up both fields with the same details.


5. When you select the Product Detail Page field, a drop-down menu will appear. Once visible, select the “Product Detail” option from the menu (remember to do so for both Product Detail Page fields).

 

6. Now, select the blue “Save” button towards the bottom of the pop-up window.


Step 3 - Adding New Page to Navigation Menu

 

7. First, look to the left-hand side of your screen and find the sidebar; then select the “Content” module. 


8. In the drop-down menu, select the "Navigation Menu" option.


9. Your Navigation menu will now be displayed on your screen.

 

10. In the items listed below, select the “Options” button located within the same row as the “Main Menu” title.


11. Next, select the “Menu Items” option in your drop-down menu to bring up the “Menu Items” screen. 


12. Once you are on the “Menu Items” screen, you will then find the “Pages” tab. Scroll down and select the box next to “Product Detail.” 


13. After the box is checked, select the “Add to Menu” button. 

 

14. You will then notice your “Product Detail” page appears in a grey box located on the right-hand side of your screen, as shown below.

 

Note
To reorder your menu items, you must hover over the menu item you wish to move (in grey), select the item by holding down the cursor, then dragging and dropping in whichever order you deem suitable.

 

15. Select the “Submit” button towards the top right-hand side of your screen to complete this process. 


Note 1 

If you return to the front end of your website and refresh the screen, you will notice that the “Pages Detail” tab is now displayed on your navigation menu.

 

Note 2

You will notice that once you select the “Pages Detail” menu item, you will then be directed to the pre-built template of that page.


Step 4 - Map New Page to E-Commerce

 

16. Now, look to the left-hand side of your screen and find the sidebar. Select the “Ecommerce” module.

 

17. Next, in the drop-down list, select the “Settings” option.

 

18. Another drop-down menu will appear; select the “Store Settings” option. Your store settings page will now appear.

 

19. Next, you will need to map the e-commerce module to your new page by doing the following steps.

 

20. Scroll down your settings list of items until you find the “Product Page” block. Select to expand.

 

21. Next, you will need to set your URL. To do so, find and select the “Product Base URL” field, and a drop-down menu will appear.

 

22. Within the drop-down menu that appears, you will need to find and select the name of the page you wish to link. In this tutorial, we will find and select the “Product Detail” option.


Step 5 - Verify Payment Type

 

23. You will need to verify which payment type you will be allowing via your new product detail page.

 

24. In order to verify your payment type, be sure to scroll up to the “Payment Settings” block, then select to expand.

 

25. Once your payment type options appear, select the “Credit Card” option or the option which best fits you.


Step 6 - Category Page Settings


26. First, scroll up to the “Category Page” block, then select to expand.

 

27. Next, you will need to set your Category Base URL. To do so, find and select the “Category Base URL” field, and a drop-down menu will appear.

 

28. Within the drop-down menu that appears, you will need to find and select the category you wish to link. In this tutorial, we will find and select the “Shop” option.

 
29. Once the steps above have been completed, scroll down towards the bottom of your screen and select the “Save” button to complete the process.


Step 7 - Content


30. First, look to the left-hand side of your screen and find the sidebar; then select the “Content” module. 


31. In the drop-down menu, select the "Navigation Menu" option.


32. Your Navigation menu will now be displayed on your screen.

 

33. In the items listed below, select the “Options” button located within the same row as the “Main Menu” title.


34. Next, select the “Menu Items” option in your drop-down menu to bring up the “Menu Items” screen.


35. Find your "Pages" section, scroll down and select the box next to the "Shop" option.


36. Then, select the "Add to Menu" option.


37. Once your menu item has been added, you will then notice your “Store” page appears in a grey box located on the right-hand side of your screen.


Note 1

To reorder your menu items, you must hover over the menu item you wish to move (in grey), select the item by holding down the cursor, then dragging and dropping in whichever order you deem suitable.


38. Once the steps above have been completed, scroll up towards the top of your screen and select the “Submit” button to complete the process.


By mapping the URL, you will have connected the product page to the category page.


Checkout Page Overview


This article will guide you on how to set up or edit the checkout page. This is a good video for you if you have ever wondered how to turn off required fields, add an email address for order notifications, or change a heading label.  

How to Edit Your Check out Page


Step 1 - Access Check Out Page Settings


1. First, on the “Welcome Home” screen, select the “E-COMMERCE” module located to the left-hand side of your screen in the sidebar menu. 


2. Next, in the drop-down list, select the “Settings” option.


Step 2 - Configuring Your Check Out Page Settings


In the first section of your page settings screen, you will notice the following options are available to make visible to any user visiting your store.


First & Last Name Required: When selected in your settings, this option will make it mandatory for the user to fill in their first and last name before being allowed to move on.


Address Required: When selected in your settings, this option will make it mandatory for the user to fill in their address before being allowed to move on.


Address 2 Required: When selected in your settings, this option will make it mandatory for the user to fill in their continued address before being allowed to move on.


Email Required: When selected in your settings, this option will make it mandatory for the user to fill in their email address before being allowed to move on.


Phone Required: When selected in your settings, this option will make it mandatory for the user to fill in their phone number before being allowed to move on.


Add Opt-in for Marketing and Promotional Emails: (Option In Progress)


Default Is Set to Opting Customer In: (Option In Progress)


Create Account is Default: As demonstrated in the video above, when selected in your settings, this option will create a checkbox (pre-selected) on the checkout screen that reads "Create New Account".


Hide Create Account Checkbox: This option will allow the account manager to hide the create account checkbox from the public on the checkout window.


Enable Order Confirmation: When selected in your settings, this option will send your customer a review of their order to ensure all information is correct.


Note: If these features are hidden, customers will be required to create an account to complete checkout.


Transaction Pre-Authentication: When selected in your settings, this option will allow the account manager to place a hold on billing a customer, but it will grant you the ability to pre-authorize the transaction based on a set amount (Set amount will be mentioned below under Pre-Authorization Amount).


Pre-Authentication Amount: This option will allow the account manager to set a minimum amount to be authorized on a customer's card.


Shipping Information Heading: This option allows you to alter the text in place of the title "Shipping Information". See example 1.


Product Table Column Heading: This option allows you to alter the text in place of the title "Shopping Cart". See example 2.


Update Cart Button Text: This field allows you to alter the text displayed in your carts button.


Billing Information Heading: 


Payment Information Heading: 


Shopping Cart Heading: This option allows you to alter the text in place of the title "Shipping Information". See example 2.


Send Order Notifications To: If your client has someone on staff that is handling fulfillment, or needs to be notified by an order that has been submitted, you will need to add their email address to this field.


Terms and Conditions Link URL: If you already have a terms and conditions template, you may insert that URL here.


Client Tag: If you have already created tags in the CRM (Example: Ecommerce or Store Purchase), anytime someone makes a purchase, a record will be created in the CRM, and that record is automatically tagged with "Store Purchase".

Altering Template Colors: In order to edit your template colors, you will need to find the "Store Design Settings" tab located towards the bottom of your screen.


Add Custom Message: This option allows you to leave a personal message to the user once their purchase has been submitted.


Countries: When you add a country to this field, that country will be the default shipping destination unless noted otherwise. You may also add more than one location if desired.