Migrate marketplace themes to storefront themes

If you have custom marketplace themes that you created using legacy customization tools (for example, through the Customize Storefront button), you can migrate them to storefront themes in order to work on them with the storefront tool. Such a migration is subject to some limitations, however.

Migrate theme templates

You can migrate the header and footer HTML templates as well as some CSS styles.

To migrate theme templates

1. Log in to your marketplace as a Marketplace Manager.

2. Click Customize Storefront. The theme customization page opens.

3. Click Advanced Markup. The HTML an CSS editor opens. The left side of the page displays HTML templates, and the right displays CSS.

4. Select an HTML template from the Templates list, and copy the contents of the template to the corresponding file in the Storefront Toolkit theme:

   Template title	Storefront Toolkit file
   Logged In Header	/themeName/header-footer/logged-in.html
   Logged Out Header	/themeName/header-footer/logged-out.html
   Purchase Flow Header	/themeName/header-footer/checkout.html
   Footer	/themeName/header-footer/footer.html

5. Copy the CSS from the right side of the page and paste it into /themeName/assets/css/platform-global/global-index.scss.

Migrate styles

You can copy some basic marketplace color and button styles from your custom theme to the Storefront Toolkit. In the Storefront Toolkit, these styles are called design properties. See Design properties.

To migrate styles

1. Log in to your marketplace as a Marketplace Manager.

2. Click Customize Storefront. The theme customization page opens.

3. Click Styles. The style customization page opens.

4. Copy the values of any of the following customized colors to the Storefront Toolkit /themeName/design-properties.json file using the appropriate JSON property name:

   Style name	JSON property in design-properties.json
   Primary Color	"colorPrimary"
   Secondary Color	"colorSecondary"
   Emphasis Color	"colorEmphasis"
   Header Text Color	"headerFontColor"
   Body Text Font Color	"bodyFontColorPrimary"
   Links Color	"linkColor"