Est. reading time: 8 minutes
Site Builder Part 4: Adding a Cart
In Part 4 of our series on our Website Builder, we’ll be showing you how to add a cart and display your products so you can get your online business up and running.
To access the cart, you’ll need to have the Website Builder Pro package. Let’s get straight into putting your products on the virtual shelves of your webstore.
Setting up your shop page
To set up your shop, you’ll need to add a new page to your website. We recommend having your store on its own page, so nothing draws attention away from it. If you’re unsure how to add a new page, we’ll give you a quick recap.
On the menu tab of your website navigation (Home, about us, contact, etc.) simply click ‘New menu Item’. Choose which elements you’d like to keep from other pages and then click to apply it. It’s a good idea to keep headers and footers for the sake of continuity and navigation.
Adding your cart
Once you’ve got a page set up for your online store, it’s time to add the actual store. Start by dragging the ‘Commerce’ element to a space that suits you on the page.
Once it’s there, you’ll notice a bunch of default products showing. That’ll give you the general layout and format of the display.
Get straight into editing the contents to display your range of products. The default amount displayed is 12, but you can adjust that depending on what you have available.
Editing your products
We’ll start with the first image and do a makeover, so it represents one of our products.
Once you’re in the editing menu, the left side will show the products you currently have on display. Choose one to begin editing its product details. The product name is a good place to start, since it helps you keep track of what you’re editing.
After that, click the pen to add a couple of images that showcase your product. You can add a title and description of the image if it helps you navigate through your stock easier as well.
Following that, change the price in the box below the product name. The default setting will be in dollars, but we’ll change that a bit later. For now, it’s a good idea to set the numerical amount.
Item Types & Field Types
Below that, you’ll need to get to work in the ‘Item Type’ tab. The default shop will show Bowls, Candles, and Statuettes, but we don’t imagine you’ll be selling much of the same (however, if you are, less work for you to do!).
Instead of deleting the items, just edit them to match your own item types. You’ll notice in the image above that we made use of much of the settings already available to us.
The first set of columns is for the name of the Item Type. The second set of columns is for the Field Type. The item type denotes the specific details, make, or characteristics of the product. The field type lists or gives descriptions of those details, makes, or characteristics.
As an example, we kept the Item Type ‘List of Odours’. The corresponding Field Type (also named ‘List of Odours’) will show any shopper what odours are available for this product (if any). This pairing will work well with products that are scented.
Essentially, you’ll want to create the proper Item and Field Types for each of your products, so shoppers know what options are available to them. Of course, these are not necessary per se, but we recommend adding relevant options, so clients are able to customise their choices.
Categories
The categories section has to do with categorising specific products (obviously), which also helps with its search when people are perusing your store.
Depending on the range of items you sell, you could have a massive or small range of products. For our example, we added a new category: ‘Snail Toys/Food’ Anyone looking for products of that kind can simply access the category when searching for it and the relevant products will pop up.
Other fields
The rest of the fields are pretty straightforward. The field right at the bottom allows you to give a brief description of the product so visitors know what it’s about.
The fields on the right are for your personal stock keeping, such as the amount of stock you keep of that specific product, and the quantity you have left.
At the top of the window, you’ll see two tabs you can switch between, ‘Details’ and ‘SEO’. All the changes you’ve been making thus far were in the Details tab. The SEO tab relates to the search engine optimisation of your specific product. You can fill in the relevant fields according to the SEO for your specific product.
If you’d like to learn more about SEO check out our blog giving you a breakdown of why it matters and how it works.
Payment gateways
There’s a variety of payment gateways you can use to ensure you get paid for your products. Depending on the type of operation you’re running you can even accept cash on delivery.
When it comes to Bank transfers and Cash on Delivery methods, the clients will need to enter their details in your store contact form to receive proof of payment, receipts, and order confirmations.
You can edit the text that shows after an order is placed, as well as the prompt that allows them to download their invoice.
As for the payment gateways specifically, you’ll need your merchant key, private key, or API key to get it working. That depends on the payment gateway company you choose to use to receive your payments.
Invoices
This section relates directly to your choices in the Payment Gateways section. Assuming you opt for invoice-based payments instead of a paygate, you’ll need to fill out all the relevant details that go with invoices.
Fortunately, much of the process can be streamlined by adding text in the beginning and end of the invoice, essentially creating a template with ‘personalised’ messages.
You can also add your API Key details in this menu if you choose to go in that direction.
We prefer using a paygate, as it’s often less hassle to manage and secure.
Destination zones
As you can imagine, this denotes the countries you’ll be able to deliver your product to. The default setting is to ‘World’. If you’re just starting your online business, you may want to limit your sales to the local areas first.
Tax rules
Every country enjoys their share of taxes for products sold within their territories. Your online store will be no different. With this tab you can specify the rate added to the price of your product.
It’s important that you don’t neglect this part of your store as the tax will be paid regardless – it just depends on whether you’re the one paying it or your customer. You’ll be well aware that it generally falls on the shoulders of the customer, so check multiple times before your store goes live that the rates are accurate and in place.
Shipping methods
There’s a couple of ways you can approach how your shipping will be calculated. First, when you access the tab on the right you’ll be staring at a window with blank fields.
Add a name for this shipping method so you can easily identify it in future. From there, decide on whether you’d prefer a flat rate, weight, or subtotal shipping fee. You can also make shipping free if you’re feeling magnanimous.
Assuming it’s not free, add your prices along with the estimated time of delivery.
Settings
The next tab you can access and adjust is the Settings tab. The first set of fields you can change relates to your stock. You’ll be able to control sales using the stock information that can be found in the Edit Products section. All items will need to have SKU assigned for this to be viable.
This may also be a good way to prompt buyers to make a purchase before they miss out. You can also send a notification informing them that the stock of a certain item is low.
Price
This is where you can set the currency with which you’re trading. If your business is based in South Africa, you’ll probably want to change it to Rands. There are a few more details that you can adjust with regards to the numerical values and their settings.
An important feature to consider adding is the price with the tax amount included, as well as the minimum order price.
By default, customers will need to enter their shipping and billing information. You can require them to agree to terms and conditions as well if you deem it necessary for your product.
Style
This tab allows you to edit the text relating to your products. You can change the font, size, alignment, etc for the text on your products. It’s usually best to choose something readable that everyone can access without trouble, as identifying the products and prices will be the primary concern for consumers, and not how pretty a font is.
That said, some personality can also add to the user experience of browsing so do give it some thought.
Images
You can set some visual templates for your products within this tab, including a default image if no product images are available for a specific item. It’ll obviously look a lot better than a blank space where an image should be.
If you’re worried about image theft, a watermark can also help secure your images. If you capture all images of your products yourself, you’d do well to protect them in this way, especially if you have a competitor selling the same kind of products.
Alongside the no-product-photo image and watermark, you can also add some borders or thumbnails. We suggest keeping it simple with stylistic changes here as again, the purpose is to make the products as clear and accessible as possible.
Listing
The listing tab concerns how many products are shown when customers access the store. The default amount is 12, but if you have a wide variety of products you may want to bump up that number.
You can also affect how the products are viewed in this tab, as well as the search parameters. If you’ve added a cart section (added by checking the box in the Store tab), you can add a ‘Add to cart’ button as well.
Filter
The final section specific to the Commerce element is the Filter tab. Quite simply, this tab gives you the freedom to change the search parameters and filters. They’re all ticked by default to give the customers as much scope as they need to find what they’re looking for, but you can change this if it suits you.
The search filter works in tandem with the prices, text, and product filters set earlier when we were introducing items. So, if you haven’t named your items correctly, customers might have trouble finding them in the search box.
The same holds true for specific product filters. For example, if a customer wanted to buy a Snail Mucus Slime Ball from us, they could search the relevant product type and it’d show up.
Conclusion
That covers all the basics of adding your store to your website using the Website Builder. Don’t forget, the Commerce section is only available with Website Builder Pro.
In our final part of this series, we’ll take a look at adding a blog to your website.
