This article looks at the most common procedures involved in creating a new theme.

When you start developing a new theme, make sure to do the following:

  1. In the file directory, create your theme's root folder in the folder themes/shop and enter as its name your theme's name.

    The theme folder location should have the following form: themes/store/theme.

    The name of the folder is displayed in MyCashflow's admin panel in theme menu in version settings. If there is more than one theme in your store, you should give them illustrative names.

  2. Valinnainen: Install and activate the mycashflow-sync tool in your theme.

    The tool synchronizes the theme files between your computer and the online store's file directory automatically or manually. This will speed up and facilitate your work significantly.

    Using the mycashflow-sync tool is especially useful when you want to use the SASS language for the development of your theme.

  3. Create all the required files and folders.

    For this step, see the list of compulsory templates.

  4. Define theme settings in the /theme.xml file.

    The theme settings define the general features of the theme, such as the types of checkout in use and image size classes.

    If the configuration file is missing from a store theme, the theme cannot be used in an online store.

  5. Place the {Content} tag in the chosen location of the general content page template (/template.html).

    The general content page is used as a template for all pages that do not have their own template (see template help page for more information).

    The {Content} tag prints the full content of the page on all such pages. Read the tag's instructions for more information.

  6. Add all other mandatory tags to the theme.

    If the theme does not include the mandatory tags, online store's maintenance may be significantly hampered.

    For example, if the {Extensions} is missing, many extensions cannot be used at all in the online store.

  7. Valinnainen: Place all theme CSS and JavaScript file references in helper files.

    It is easy to manage styles and scripts when all references are located in the same place. You can include the files in your theme by using the {MinifyCSS} and {MinifyJS} tags.

    If necessary, you can create multiple reference files, for example, to include different scripts in the <head> and <body> parts of the page.

Having gone through these instructions, you should have a working base for further development of your store theme.