BigCommerce

Harvest Media uses BigCommerce for common ecommerce needs and has applied to be a part of their partner program. (https://partners.bigcommerce.com (opens new window))

Understanding Stencil (the theme framework to build BigCommerce websites) is critical to meet our clients design and development needs. Fortunately, BigCommerce has done a great job on their documentation:

Resources

Check out the following:

• Official Training in BigCommerce Partner Portal - https://partners.bigcommerce.com/English/Solutions/training/training_and_enablement.aspx (opens new window)
• Stencil Documentation - https://developer.bigcommerce.com/stencil-docs (opens new window)

Step 1: The Stencil CLI

To start developing and working with Stencil on a Mac you must install the CLI.

See here: https://developer.bigcommerce.com/stencil-docs/installing-stencil-cli/installing-stencil (opens new window)

Download a Theme

BigCommerce offers several free Stencil themes. We recommend:

• Cornerstone (by BigCommerce) - https://github.com/bigcommerce/cornerstone (opens new window)

• Lifestyle - https://themes.psdcenter.com/theme-documentation/lifestyle-bigcommerce-theme-manual/ (opens new window)

Use NVM

Note that Stencil requires a specific (not the latest) version of NodeJs. NVM is pretty easy to use (and a good idea) on the mac. Here are the docs for nvm: https://github.com/nvm-sh/nvm (opens new window)

To use it for Stencil development, open your terminal to the folder of you stencil theme are run:

"nvm use 10.16"

Getting Started with Theme Development

After downloading a theme, you will:

1. Run "stencil init" and connect to your store via the BigCommerce API
2. Run "npm install" in the theme folder
3. Run "stencil start"

This should start a server at localhost:3000 with a live preview of your store's content on the theme you are developing.

Tweak Settings First - Don't Develop Unless You Have To

Most of the changes you will want already have config settings in the themes config.json file (the main configuration file for BigCommerce themes). Use these settings first, and set the defaults to what you want.

Read the docs and see the training videos for more: https://developer.bigcommerce.com/stencil-docs/reference-docs/new-subpage (opens new window)

When there is no config setting for what you want to accomplish, use handlebars comments to keep the original code intact. (Stencil uses handlebars syntax https://handlebarsjs.com/guide/#template-comments)

Sharing the Theme Preview with a Client (Remotely over the Web)

Although it's not really possible to set up a staging server per-se, you can share your local browser sync server over the web using a handy free tool called "ngrok."

It's as simple as:

1. Starting your stencil theme browser sync server from the theme folder with "stencil start"
2. Navigating to your user folder and running "./ngrok http 3000"

See ngrok docs for more information: https://ngrok.com/docs (opens new window)

Things to Note

Optimized Single page checkout cannot be customized

Original Logo file should be small (it is also used on the invoice)

Debugging

You can output json by....@todo