Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions.

This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do.

Introducing MyCMS

Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting.

Shop Configuration

You must prepare below settings Before using MyCMS:

Setting	Description	Example
Store name	Your store name will be displayed in the online shop. But it depends on your theme design	Simon’s Fruit Store
Store currency	The currency used in the online store	USD
Locale	Tells Paypal what language to be displayed in the payment page	English US
Your store URL	Specify the URL of your online store.	https://www.myshop.com
Shipping Provider	Input your shipper/carrier	UPS
Paypal order success page	The webpage file name when Paypal order payment successful	/order-success.html
Paypal order cancel page	Similar to above setting, this is to specify the webpage file name when Paypal order payment canceled by the user	/order-cancel.html
Paypal mode	For Paypal sandbox mode, you can make fake payment for testing. When everything alright, set to Live to receive real payment	Sandbox
Paypal Client ID	Input the Paypal client ID (live or sandbox mode). The client ID can be found in Paypal Developer Portal	XXXXXX
Paypal Client Secret	Live above client ID, input the Paypal client secret (live or sandbox mode). The client secret can also be found in Paypal Developer Portal	XXXXXX
Paypal order handling fee	Optional and additional charge per Paypal order	0

Input Products

Below steps are to input three sample products in MyCMS:

1. Goto MyCMS and login with your Google or Facebook account (no worry that the password is not stored in MyCMS database)

2. Goto products screen:

3. Click Add Product to add the first product:

4. Input the product details as below:

Field	Value
Product ID	sku-apple-1
Name	Apple
Description	Per unit: Calories: 95 Fat: 0g Carbohydrates: 25g Sugars: 19g Fiber: 4g Protein: 0g
Regular Price	1.99
Tax	0
Is active	Y
Image 1	Download & upload this image
Image 2	Download & upload this image

Then click Save and close when finished.

5. Click Add Product to add the second product and input below details:

Field	Value
Product ID	sku-orange-1
Name	Orange
Description	Per unit: Calories: 62 Fat: 0.16g Sodium: 0mg Carbohydrates: 15.4g Fiber: 3.1g Sugars: 12.2g Protein: 1.2g Vitamin C: 69.7mg Potassium: 237mg Calcium: 52.4mg
Regular Price	1.99
Sell Price	1.79
Tax	0
Is active	Y
Image 1	Download & upload this image
Image 2	Download & upload this image

Then click Save and close when finished.

6. Click Add Product to add the second product and input below details:

Field	Value
Product ID	sku-banana-1
Name	Banana
Description	Per unit: Calories: 105 Fat: 0.4g Sodium: 1.2mg Carbohydrates: 27g Fiber: 3.1g Sugars: 14.4g Protein: 1.3g
Regular Price	1.29
Sell Price	0.99
Tax	0
Is active	Y
Image 1	Download & upload this image
Image 2	Download & upload this image

Then click Save and close when finished.

Making The Theme

MyCMS Theme Requirements

Basically, MyCMS requires below files in EJS format:

File	Purpose(s)	Generated file
index.ejs	Home page of the online shop	index.html
product.ejs	Product page to view full product details. The file name will be named by the product ID and defined in MyCMS. (in this tutorial, it would be “sku-orange-1.html” & “sku-banna-1.html”)	One or more [item_id].html file(s)
checkout.ejs	Shopping cart checkout page for the user to input shipping info. And it redirects to PayPal payment page	checkout.html
order-success.ejs	Paypal callback page when the payment is successfully placed.	order-success.html
order-cancel.ejs	Paypal callback page when the payment is canceled by the user.	order-cancel.html

Together with other asset files (such as logo.png, site.css, index.js… etc). All together zip into a single ZIP file. Finally, upload to MyCMS to generate the static website. The upload webpage is shown as below:

Reference Implementation

The example theme that meets the above requirements (but without beauty design 😛) is covered in this Github repo. You can clone it, read the comments, and modify it with your design. If you have any questions, please submit an issue.