Setting up your first online store
Updated on 20-October-2016 at 10:16 AM
In this tutorial, you will learn how to create an online store, with active products and catalogs using Business Catalyst. You'll also learn how to customize the look and feel of the entire online shop experience. From the layout of products and catalogs, to the shopping cart and checkout customer experience.
For the purpose of this tutorial, you'll be working with the Business Catalyst Develop mode within the admin of your site to manage all files and assets. If you haven't already worked with the Admin Console for a Business Catalyst site, be sure to read Introducing the Business Catalyst Admin Console to learn more.
Setting up your site and project files
You will need to trigger a new temporary site either through your partner portal or using the below link:
The tutorial will be using the free Oxo online store site template available in the site builder when triggering a new site.
Figure 1. Select the Oxo Online Store template.
Setting up Catalogs
When setting up an online store, you will already have an idea in mind of the type of catalogs and products you will want to set up. For the purpose of this tutorial, you will be be creating an Appliances catalog.
Let's go ahead and create our first catalog. From within the admin of your site, select E-Commerce > Catalogs.
Figure 5. Select E-Commerce > Catalogs
You'll notice that there are a number of existing catalogs on this page, these are added a part of the Appliance King template. You can ignore these catalogs as we will go ahead and create our own.
- Click the Add Catalog button above the existing catalog list. Figure 6. Add Catalog
- Enter a catalog name of Appliances, and select Home from the template menu.
This will wrap our catalog in the existing Home site template. For more details on templates, see Create and manage the site design.
- Click Save.
You can now see that the URL for the catalog has been created and looks something like this:
- Lets go ahead and preview our new catalog, click the Preview Catalog button.
You can see that our catalog does not yet have any products. In the next section, we will be adding products to our new catalog.
Adding the catalog to the site navigation menu
Now that we have successfully created our catalog, we want to add this new catalog to the navigation menu so that it can be easily accessible at any time.
- Select Site Manager > Menus, and then click the Main Navigation from the list.
You can see that the listed items here match the menu on the front end of the site.
- In the fields on the right hand side, enter a Item Label of "Appliances", and then click Select link to the right of the Item URL field.
- In the window that appears, click Catalogs, and then select the Appliances catalog we created.
- Click Update.
- Back on the menu item screen, select Shop from the Parent drop-down menu.
- Click Save Item. You can now see that our new Appliances catalog is now showing under the shop menu item (both the front-end of the website and the menu within the admin).
Let's go ahead and add our products:
- Back in the admin of your site, select E-Commerce > Products.
- As with our catalogs, you can see that we have some existing products. Click Add Product to add our first product.
- Enter the first product name of TV, then click Select to the right of the Small Image field.
- Browse to the /images/products folder we created earlier, and select the TV.gif image. Click Insert.
- Repeat this for the Large Image field. Figure 7. Product Image Manager.
- We need to save this product before we can move onto the other tabs such as pricing and catalogs. Click Save
Adding prices and catalogs
- Click the Prices tab.
- Ensure the correct country is selected in the menu. This is based on the country you selected when setting up your site. For the purpose of this tutorial, we will be using Australia.
- Enter a Sell Price: of $900, and then click Save Price.
- Lets move on to catalogs, click on the Catalogs tab.
- Move the Appliances catalog from the left panel to the right by clicking the arrow. Figure 8. Add product to catalog. Move products from left to right using the arrow.
Now let's go back to the product details page to add the product dimensions. Click the Details tab.
Adding product dimensions
These dimensions are used to calculate the relevant shipping options and prices in the shopping cart. We will touch on in the next section.
- On the product details screen for our TV product, click Product Dimensions to expand the section.
- Enter the following dimensions for the TV product:
- Product Weight in Grams: 15000
- Product Width in MM: 1200
- Product Height in MM: 630
Note: The units of measurement used in this tutorial is the Metric system. If your site is set to a country that uses imperial measurements, add the relevant converted weight in place of the above measurements.
- Click Save.
We have now created our first product and catalog. For practice, you can now go ahead and repeat these steps to add the remaining three products with the below details:
|Product Name||Small/Large image||Price||Catalog||Weight||Width||Height|
Setting up shipping options
Based on the product(s) we have created above, we can now go ahead and create various shippings options that will apply when an order meets a certain criteria. Business Catalyst allows you to use one of the integrated shipping services such as UPS, DHL and FedEx. However, for the purpose of this tutorial, we will be creating some custom shipping options to get a better understanding of how shipping options apply to your orders.
- All orders under 30kg, set shipping price of $20
- All orders over 30kg, set shipping price of $35
- Select E-Commerce > Shipping Options. Figure 9. Select E-Commerce > Shipping Options.
- By default, the value in the country drop-down is the country setting for the default domain name of your site. The type of shipping option we will
be working with is User Define as this allows us to create the custom shipping option, and we won't be applying any tax code at this stage.
Let's add a description of "Under 30kg" and set a price of $20. The description is what will be displayed for customers when selecting the shipping option on the shopping cart.
- Now we need to set the criteria for this shipping option to apply to an order. Click to expand the Show More Options section.
- In the Weight Limitation section, enter a minimum of "0" and a maximum of "30000" grams.
Note: Based on your site country setting, you may see different units of mesurement (example: pounds). Enter the relevant converted weight in this section.
- Leave the other criteria options blank as we will not be using these options for this tutorial. Click Save.
- Go ahead and create another shipping option "Over 30kg", with a price of $35 and a minimum of "31000". Do not add a maximum for this option as we want to this apply to all shipping options above 30kg. Save this shipping option.
You should now have two shipping options ("Under 30kg", and "Over 30kg"). That's all we need for shipping options for now. We will test these options at the end of this tutorial. The next step is to set up our tax codes.
Setting up tax codes
Depending on the country a site is selling products in, tax codes apply to different regions. If your site country is set to United States, you have the option pre-populate all US tax codes automatically.
In this tutorial, we will be creating Australian tax codes for each state to give you a better understanding of how to create tax codes on this system.
- Select E-Commerce > Tax Codes
- Enter the Tax Code of "GST", and a tax rate of "10%" then click Save.
Setting up payment methods
There are a number of payment methods available within Business Catalyst. This includes a number of integrated payment gateways and PayPal standard. For more details on payment gateways, see Collect real-time credit card payments .
Let's go ahead and set up PayPal Standard for our new site. The first step is to create a PayPal account, head over to the PayPal website and set yourself up with an account. Once you have done that, we will need to configure your new PayPal account to work with your new site.
Set up your PayPal account
- Log in to your PayPal account and select My Account > Profile.
- In the Seller Preferences column, click Website Payment Preferences.
- In the Auto Return for Website Payments section, select On.
- In the Return URL field, enter your site's secure address followed with /PaymentProcess.aspx.
- In the Payment Data Transfer section, select On and click Save.
- Click Website Payment Preferences.
- Scroll down to the Payment Data Transfer section and copy the identity token.
The identity token is used in the next stage of the setup.
Set up PayPal in the admin
- Log back in to the admin of your Business Catalyst site and select E-Commerce > Payment Gateways.
- In the PayPal Customer ID field, enter the primary email address associated with your PayPal account.
Note: If you have multiple email addresses associated with your PayPal account, only use the primary email address. You can check by logging into your PayPal account and selecting My Account > Profile and then clicking Add or Edit email.
- In the PDT Token field, paste the identity token you obtained in the previous procedure.
- Uncheck the Use PayPal Test Gateway option and then click Save.
As with our shipping options and tax codes, we will be testing this set up towards the end of the tutorial.
Customizing the product and catalog layout
Now that we have all our products, shipping, tax and payment methods set up, we can customize the way this is all displayed on the site. There are a number of ways in which you can customize various layouts on your site, these methods include FTP, the WYSIWYG editor in the admin and the Business Catalyst Develop mode.
As mentioned previously, in this tutorial we will be using the Business Catalyst Develop mode within the admin. To access the Develop mode, click Develop in
the ribbon found in the upper section of the admin.
The layouts we are working with can be found in the Layouts > Online Shop folder. Click the arrow next to these folder to expand the selection. In this section of the tutorial, we will be editing the small_product.html and large_product.html layouts.