Skip to content

Customize CSS & JavaScript

Warning

Review the following prerequisites to ensure a smoother installation & development experience:

Review Existing HTML & CSS Documentation

Setup Repo

Here are some command line depictions that shows the main steps involved in installing genesis.

Note

You may need to change the directories and paths depending on your store's setup. For example:

  • htdocs/, httpdocs/
  • mm5/, Merchant2/, or store/
  • some-store would correspond to your store or repo url
Terminal
# Setup your local Repo
mkdir some-store
cd some-store
git init
git checkout -b feature/genesis
Terminal
# Setup your local Repo
git clone # some-store repo url
cd some-store
git checkout -b feature/genesis

Install Genesis Locally for a Store

Terminal
mkdir genesis-quickstart-test && cd genesis-quickstart-test
genesis quickstart
# answer all the prompts
git init && git commit -am "ran genesis quickstart"
pnpm run init:theme
git commit -am "initialized theme"

Local Development Workflow

For our pseudo-local development process, we utilize a node package called browser-sync. Specifically, the "proxy" feature of browser-sync.

Once your have configured your themes/genesis/theme-settings.json file you can run the following pnpm commands to proxy your desired environment:

pnpm run start              # defaults to "dev" environment
pnpm run start [env]        # replace [env] with any environment defined within `theme-settings.json`

After the command as finished it will provide you a localhost address where the proxy is running. Open that localhost address in your browser to begin development. Any change made to files within the src directory will force a re-build of webpack and will trigger a refresh in your browser window.

For example:

Terminal
# edit genesis-quickstart-defaults/themes/genesis/theme-settings.json with valid info
cd genesis-quickstart-test/themes/genesis
pnpm run start
# open https://localhost:3000/
# open, modify, & save some of the following files:
#    src/scss/config/_variables.scss
#    src/scss/buttons.scss
#    src/scss/typography.scss
#    src/scss/config/_mixins.scss
#    src/pages/Global.js
#    src/pages/PROD.js

Publishing Changes with FTP

To upload CSS & JavaScript changes to your store:

  1. Run pnpm run build [env].
    1. [env] corresponds to the themes/genesis/theme-settings.json > environments that you would like to deploy to
  2. Upload the public folder into the genesis folder on your FTP server that corresponds with your env in themes-settings.json.
Example theme-settings.json
{
    "environments": {
        "live": {
            "moduleRoot": "mm5",
            "themePath": "themes/genesis/branches/production/",
            "proxyUrl": "https://jsmith.mivamerchantdev.com/"
        }
    }
}
Terminal
cd genesis-quickstart-test/themes/genesis
pnpm run build live
# upload themes/genesis/public/ to store's server: /httpdocs/mm5/themes/genesis/branches/production/public/