Versions Compared

Old Version 11

changes.mady.by.user Danny Gibas

Saved on

compared with

New Version Current

changes.mady.by.user Danny Gibas

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Step-By-Step Theming Process

  1. Pull a copy of the theme designer branch with git clone git@bitbucket.org:aspenwareunity/commerce-theme-builder.git

  2. Run Theme Designer with the yarn dev command in terminal

  3. Create a duplicate of the Clean Theme directory and rename it to the current client.

  4. Update the _colors.scss file in the client theme directory with all of the client color options.

  5. Update the _variables.scss file in the client theme directory with the paths to the correct image files.

  6. Update the _typography.scss file in the client theme directory with the clients font information

...

  1. .

...

...

Run Theme Designer with the yarn dev command in terminal

  1. In the Theme Designer source files, open layouts/default.vue and checkout.vue. Locate the scss import statement that targets the client theme. Change the path in both files to point at the client theme directory you are working on. This will make Theme Designer load that clients SCSS into the Design window.

  2. Remove any CSS or Mixins if they exist in the _theme.scss file.

  3. In Theme Designer, in Presentation Mode, set all of the theme option controls to match the client choices.

  4. Enable Developer mode, and click the "Export All Mixins" button.

  5. Copy the mixins from the dialog box and paste them into the clients _theme.scss file. Make sure they are uncommented and save the file.

  6. In Theme Designer, enable Preview Mode. You should now see the mixins from the clients _theme.scss file being applied.

  7. While still in Preview Mode, make any additional configurations necessary to the mixins in the clients _theme.scss file and ensure they appear correct in the Theme Designer preview.

  8. Copy the clients entire theme directory from Theme Designer over to the Theme directory in commerce.

  9. Fire up a local instance of Commerce, set the environment to the client and QA the entire theme.

  10. If it looks good, commit the theme to Commerce source.

  11. IMPORTANT: DO NOT Commit any changes you made in the Theme Designer source.

Known Limitations and Bugs

  1. There is a limitation with the checkout page in demo mode in that it will not retain the settings configured on other pages. This should be resolved in the future.

  2. A code change is necessary to display anything other than the “Clean Theme”, so when developing a theme there is no UI method to view other themes.