Customize the storefront

The look and feel of a marketplace is defined by the storefront, which consists of the pages that end users are likely to encounter when they browse for products and purchase them. These pages include:

• The marketplace home page
• Product listing and profile pages
• The exit page displayed after user logout

The storefront does not include administrative pages, such as anything accessible through the Manage menu.

To customize the storefront, you must modify elements of its associated theme—a container for the elements of the storefront display. These elements include pages, components, and settings. A web developer can modify and fine-tune these elements to change the storefront.

You can use a theme to:

• Add images and banners
• Modify the header and footer
• Specify which products should be displayed most prominently
• Select the fonts used for buttons and labels
• Provide translations for labels, buttons, and menus
• Adjust the page layout
• Add active components to a page
• Add custom pages with new content

Note that some of these items—such as logos, images, and translation text—must be prepared externally before you can add them to the theme.

Storefront tools

AppDirect offers various tools that you can use to create and manage your storefront themes and settings:

• Storefront Toolkit—A collection of resources that developers can install locally to edit CSS and HTML files.
• Theme Manager—A part of the marketplace user interface where Marketplace Managers can upload, manage, and publish themes.
• Storefront Builder—A visual editor in the marketplace itself, which Marketplace Managers can use to edit pages with drag-and-drop components and other visual tools.

Each of these tools is used at a different stage of theme development. Typically, a theme begins with front-end development in the Storefront Toolkit. Once the theme is ready, the Marketplace Manager uploads it to the marketplace via the Theme Manager, and fine-tunes it in the Storefront Builder before publishing it to the marketplace.

For an overview of this process, see the Work with themes topic.

Roles in working on the storefront

There are generally two roles for people involved in creating and deploying a storefront theme:

• Front-end developers create and customize themes, using the Storefront Toolkit. The Storefront Toolkit offers them complete control over the storefront theme, including control over which components Marketplace Managers can reposition or remove from pages through the Storefront Builder editor.

Front-end developers should be familiar with web page development, and be comfortable working with CSS, HTML, and particularly with JavaScript, which is the basis for the Nunjucks templating language used in the Toolkit. Front-end developers can also benefit from having prior knowledge of React and responsive Web design, and prior experience in developing front-end interfaces that interact with Restful APIs and GraphQL APIs.

• Marketplace Managers upload and publish themes in the marketplace using the Theme Manager page. They can also use the Storefront Builder visual editor to work with the components on a theme page: they can add and remove components, reposition components on the page, and modify component appearance and in some cases the component contents.

Other people may also work on items for your theme. For example, you may have a graphic designer create images for your pages, or a translator provide text for use on labels, buttons, and menus.

Legacy marketplace theme customization tools

Although the topics in this section are limited to storefront customization, it is also possible to customize the administrative pages of the marketplace, such as the pages on which Marketplace Managers, Company Administrators, and others manage products, companies, and so on. However, the tools required for this type of customization are only available as a legacy offering. If you want to customize the look and feel of the administrative pages of your marketplace and do not already have the legacy "Theme Customizer" feature, contact your AppDirect technical representative.

For more information on the legacy marketplace theme customization tools, see Brand your store. If you have already used those tools to customize your storefront, you can maintain your customizations. However, if you are using the Storefront Toolkit and Storefront Builder, we recommend that you use them for new themes.

To migrate marketplace themes to storefront themes, see Migrate marketplace themes to storefront themes.