Work with themes

In the introduction, we mentioned the three tools that AppDirect offers for working on themes. Each of these tools is used at a different stage of the process:

• Front-end developers Work with the Storefront Toolkit to create and develop the theme on a local machine.
  The developer starts the Storefront Toolkit, and works in a text editor to modify the pages, stylesheets, and other elements of the theme, to create new components, and to test the results by viewing them in a browser. The Storefront Toolkit is able to import real data from the marketplace to help provide a more accurate view of what the theme will look like in production.
  When the theme is ready, the developer uses the Toolkit command line to package it as a .zip file so it can be uploaded to the marketplace.
• After a theme has been packaged, the Marketplace Manager logs in to the marketplace and can Work with the Theme Manager to upload the package.
  The Theme Manager consists of a page in the marketplace where you can manage themes. Its primary purpose is for you to upload new themes, preview them, and ultimately publish them to the marketplace. It offers several theme management functions, including features to help you Manage theme versions and Manage theme translations.
  With the Theme Manager you can launch a component-based theme in the Storefront Builder visual editor.
• If the theme uses components, the Marketplace Manager can Work with the Storefront Builder to fine-tune the theme.
  With the Storefront Builder you view the theme and make some changes to it within the marketplace itself, without having to work with CSS or HTML. For example, you can use the Storefront Builder to change the fonts and font colors for titles, to upload new logos, and to specify which products will be displayed in a carousel.
  After you are satisfied with the final look of the theme, you can exit the Builder and publish the theme.

You can create multiple versions of a single theme; you can modify an existing theme to keep certain characteristics; and test customer reactions to other changes. You can also create and manage multiple themes at the same time.

note

The work you do in the Storefront Toolkit and Storefront Builder only affects the display of the storefront itself—that is, pages that are available to external marketplace users. It does not affect the display of administrative pages, such as the Marketplace Manager Dashboard or Products pages.

To affect these administrative pages, you must use the legacy Theme Customizer instead. Contact your AppDirect technical representative for more information.

The base themes

AppDirect offers two base themes that serve as starting points for your own themes. The two themes are:

• Classic theme—The legacy theme. This theme is based on HTML, CSS, and JavaScript files that are rendered using the Nunjucks templating engine.
  Modifications to this theme are performed by a front-end developer using the Storefront Toolkit. It cannot be modified in the Storefront Builder.
• Plaza theme —The current component-based theme. This theme is based on components: re-usable and configurable UI elements such as sidebars, sliders, and other distinct elements that appear on a page.
  Front-end developers can modify this theme and create new components for it in the Storefront Toolkit. After it is uploaded to the marketplace, the Marketplace Manager can also modify the components using the Storefront Builder.

Whenever you create a new theme in the Storefront Toolkit, you select one of these base themes to populate the theme folder. This provides a framework of files that you can modify for your own theme.