...

• NOP repository has been setup locally. See /wiki/spaces/CS/pages/2060812311 for more details

• Our axcommerce-theme-generator is installed globally. See its installation docs for more details.

Creating a new theme

In this guide we’ll be creating a theme for a hypothetical client called “Example Mountain”.

...

1. Rename the src/Themes/[your theme name]/Content/images directory to something like my-images

2. Replace all images inside with ones provided by in the Jira ticket requesting the theme’s creation

   • Some new images may need to be created using other assets that are Frankenstein’d together

3. If nothing was provided that would make a good favicon, make one manually and ensure it’s named favicon.png in the my-images directory

4. Execute axcommerce-theme-generator processimages from the src/Themes/[your theme name]/Content directory

5. You’ll be prompted for some information and answer them with information in the Jira ticket:

   1. Source images directory – This is the name of the directory containing images we’ll use in the theme. In our case, it’s the directory we renamed to my-images.

   2. Category hero height – This is the size selected by the resort and should be indicated in the Jira ticket.

   3. Level of compression – This indicates how much the images should be compressed. You can try the available options and see which ones get the files to meet the requirements listed in /wiki/spaces/AT/pages/768507988 .

   4. Generate logo-mark-spinner.png – Unless you’ve been given or manually created an image to use when loading, you’ll want to select Generate for me.

   5. Generate preview.jpg – Unless you’ve been given or manually created an image to use in the Admin section listing themes, you’ll want to select Generate for me.

6. Once done, a new directory should be created at src/Themes/[your theme name]/Content/images that contains the final images. We’ll leave the other my-images directory alone until we validate the theme.

7. Follow the steps under the Theme validation section to ensure the theme passes validation. You may need to repeat step 5 with a higher level of compression if the images are too large.

   • Note: It’s also possible to only run the image compression step. Find out more in the Running Compression Only section of the readme.

8. Once validation has passed, delete the my-images directory to ensure we don’t have unneeded file copies in the repository.

...

Learn more about this in the theme designer documentation.

Custom CSS

We try to avoid custom CSS rules in client themes to reduce the maintenance cost of theming but sometimes it’s unavoidable. If that’s the case:

...

For information on how to setup this functionality and create a theme zip, please refer to the Aspenware Theming Tools documentation.

Known Issues

• No automatic hot-reloading, you must manually click the refresh icon in the theme tools popup

• There seems to be some issues with port numbers on mac – if you encounter any issues please reach out to your onboarding buddy

...