Setting up a Shopping Cart to sell online

Aaron Aldrich Updated by Aaron Aldrich

Shopping Cart is a popular feature that comes with our e-commerce add-on. Think of the shopping cart as your "one" online store where anyone can purchase from your standard offerings. One of the main use case is for selling your standard company products to anyone who visits your stores website.

What's next?

The first step is to contact billing@shopvox.com and request to have e-Commerce add-on to be added to your account.

How to create a Shopping Cart ?

Check out some real shopping carts from a couple of customers at the end of this article.

All of the shopping cart information is hosted on our shopVOX servers. When you create a shopping cart a URL will be created that will be added to your website.

The URL will be auto generated using your shopVOX account name and the extension would be .shops.shopvox.com

Click on your store name in shopVOX and you will see "E-commerce Settings" as shown in below screenshot.

Step one: Check your store name!

In the below screen, Shop Slug is the string that give your account it's unique identity. It differentiates between the URL of each shopVOX account’s shopping cart URL. By default it is the subdomain of your account. So the highlighted string will be the URL. In this example the string will be: graphicsgraphix.shops.shopvox.com/

NOTE: Two things when entering a URL

  1. Do not add www in your URL
  2. Make sure you put a / at the end

Step two:  How about some color to match your Brand?

You can also make some basic changes to the color schemes if you do not want to code full html/css, simply by editing the color hex values to show your brand colors.  This is done by editing the three boxes for Header color, Button color (primary) and Button color (secondary)

Header Color - This is the header band color - see below how that band color changes depending upon what color you select.

Button color (primary) - This will be any of the top level buttons inside the cart. 

Button color (secondary) - This is any of the buttons colors which are secondary buttons.

By changing the colors for these three elements will be a quick/simple/easy way to match your brand colors.

Step three: Customize the top and bottom of the page.

The flag below the Hex color fields says “Allow Custom Elements” - this by default is turned off - meaning the page is auto generated with header and footer and it looks like this. The logo is copied from the account logo, there are no menu items on the header and there is no footer to speak of.

However if you enable that flag you will have 4 boxes, two for header and two for footer, one box is the html code and the other CSS and when those are properly coded like below it shows your own header and footer - you can use these to match the header and footer of your own website.

NOTE: The HTML and CSS coding will be something your web developer can assist you in building.

After the coding is added the shopping cart looks like this.

Step four:  How to point your own URL to this cart.

Most of the time, customers want to have their URL vs this auto-generated shopVOX url to make it look like their own web page.

Example Auto Generated URL -  https://graphicsgrafix.shops.shopvox.com

Example Custom URL - https://cart-new.shopvox.com 

You will need to add CNAME in your DNS hosting service and point that URL to shops.shopvox.com like below.

Once you have added your own shop domain and the first CNAME please contact our live chat support team or send an email to support@shopvox.com. Make sure to provide the custom URL you have chosen and indicate that the first CNAME has been added. There are some settings we would have to complete and we will provide a second CNAME for you to add in your DNS hosting service. Once you have completed this step as well please let us know. There is one final setting to be done on our end to complete the process and before the custom URL will work.

Note: Do not change the Domain Redirection url after we have done all the settings on our end. Please contact our support with the new custom url so that we can help you configure the setup for your new custom url.

Shopping Cart examples

Group Imaging uses a shopping cart to market to their community. They have a variety of Products they promote. Here is the URL for this page: https://store.groupimaging.com/store

NOTE: I zoomed way out to capture the Header and Footer of this page.

Flewwelling Press has also done a really good job of designing their Header and Footer of the eCommerce page. Here is the URL for their ordering page - https://flewwellingpressltd.shops.shopvox.com/#/cart/categories/fa04e6e6-b4a2-46c5-af6a-4afc40cdfddb

How helpful was this doc?

Steps to setup custom URL for paid cPortal

What will my customers see on their cPortal?

Contact