Themes

The Themes & Content section of the Admin Console is used to set scripts, styles, and views for the websites.

In 4.2 and prior versions of Optimizely Configured Commerce, themes were designed in Visual Studio and stored in theme folders. If a change was needed, it was entered in Visual Studio, compiled, and then the build was pushed. With 4.3 and later versions of Configured Commerce, this capability exists in the database itself, and can be modified in the Admin Console.

The Theme Library section of the Themes & Content menu has two options: Themes and Theme Resources.

Configured Commerce Themes permit sites to use custom views and CSS while still allowing the site to be upgraded.

Go to Admin Console >Themes > Themes & Content > Themes.

The System column displays the System Resource icon if a theme is a system theme. If a theme is a system theme, it also displays View Only in the Edit column, noting that the theme is View Only and cannot be edited. This screen also displays the Theme Name, Version Number, and Theme Description. Use the Search Bar at the top of the page to search for specific Themes.

Clone a theme

To create a new theme, clone an existing system theme and modify the clone.

📘

Note

Cloning a cloned theme is not recommended, as the version history will be inaccurate. Clone from System themes only.

1. In the Admin Console, go to Themes & Content > Themes.

2. Click View All next to the System Theme you wish to clone.

3. Click More Options in the upper right corner, and select Clone Theme.

4. Title the theme, and click Clone.

   

📘

Note

Theme titles cannot be duplicated.

Upon clicking Clone, Version 1 of the theme publishes automatically. Any subsequent changes switch the theme to Draft mode.

Edit a theme

Editable themes show Edit in the Edit column. Cloned themes can be edited, while System themes cannot.

1. In the Admin Console, go to Themes & Content > Themes.
2. Click Edit next to the theme you wish to edit.

Editing Buttons

Editing buttons vary depending on the current theme and current state (Draft or Published). A theme's editing buttons appear at the top of the screen, or within the More Options menu.

Click Preview to view any resources in Draft mode assigned to the current theme.

• If resources that already have been published are assigned to the theme, they cannot be previewed.
• Any widgets in Draft mode automatically appear on the list regardless of the selected theme.

The Preview window shows the currently selected Theme, Theme Version, and Website on the left. The drop-downs default to the current theme and version; click a drop-down to change the respective options. Preview mode bundles resources by default. Click the Yes toggle to unbundle resources.

On the right side of the screen, resources are sorted by type (Styles, Scripts, Views, and Widgets). All resources in Draft mode are selected automatically; uncheck the checkbox next to a resource to exclude it from the preview. Click Preview to preview selected drafts in a new window.

A black bar displays at the top of the preview screen, and displays the theme name, if bundling is on or off, and the number of draft resources currently being previewed. Click Cancel Preview to view the website as normal.

Publish theme

The Publish Theme button appears when the theme is in Draft mode.

Click Publish Theme to view all changes made to the current draft. The Resource type is noted on the left, the File/Template name is in the center column, and the Change is described on the right. Add optional revision notes at the bottom of the screen, and click Publish.

Publish theme resources

1. Click the Publish Theme Resources button to publish any/all associated theme resources and widgets currently in Draft mode.
2. Select the applicable theme resources under the Styles, Scripts, Views, or Widgets tabs; add optional revision notes.
3. Click Publish.

Clone theme

Click Clone Theme to clone the current theme.

📘

Note

Cloning a cloned theme is not recommended, as the version history will be inaccurate. Clone from System themes only.

Delete

Click Delete at the top of the screen to delete a theme. Remember, System themes cannot be deleted.

If the theme is assigned to a website, the delete button does not appear. Instead, the theme displays a message at the top of the screen:

📘

Note

Deleting a theme does not delete any of the associated front-end resources.

Settings tab

On the Settings tab, modify the Theme Name or Theme Description by clicking in the respective fields. The Cloned From field is assigned when the theme is cloned, and cannot be modified.

Styles tab

Use the Styles tab to assign CSS or SCSS resources to the theme.

1. Click Arrange Columns to drag and drop a resource to a new position in the list. Changing the order of the resource files is important to ensure styles and java script are loaded in the appropriate order.

2. Click Edit to edit a resource. This action leads to the resource's Code tab (accessible under Themes & Content > Theme Resources > select a Resource).

   📘

   Note

   Library resources cannot be edited.

3. Click Unassign to unassign a resource from the theme. In the confirmation pop-up, click Unassign.

   📘

   Note

   If an external link is unassigned, it cannot be reassigned.

4. As on all other theme screens, System resources are indicated with the System Resource icon.

5. Click Add Styles in the upper right corner to add additional styles to the theme.

6. Select Assign to assign a style from Theme Resources, or select Link External to link to an external URL.

   • The Assign option lists all theme resources unassigned to the current theme. Select the checkbox(es) next to the appropriate resources, and click Assign, then click Done.

   The Link External option provides a cell to enter an external URL. For example, you would use an external resource if you were using a CDN for javascript files, such as jQuery. Click Add to add the URL.

Scripts tab

Use the Scripts tab to assign JavaScript or TypeScript resources to the theme.

1. Click Arrange Rows next to a resource to drag and drop it to a new position in the list, or to a different grid. Move resources to the Head grid to load them into the <head> of the webpage, the Body Start grid to load them just after the <body> tag, and the Body End grid to load them just before the </body> tag.

2. Click Edit to edit a resource. This action leads to the resource's Code tab (accessible under Themes & Content > Theme Resources > select a Resource).

   📘

   Note

   Library resources cannot be edited.

3. Click Unassign to unassign a resource from the theme. In the confirmation pop-up, click Unassign.

   📘

   Note

   If an external link is unassigned, it cannot be reassigned.

4. As on all other theme screens, system resources are indicated with the System Resource icon.

5. Click Add Scripts in the upper right corner to add additional scripts to the theme.

6. Select Assign to assign a script from Theme Resources, or select Link External to link to an external URL.

   

   • Click the Assign option to view all theme resources unassigned to the current theme.
     • Select the checkboxes next to the appropriate resources.
     • Click Assign
     • Click Done.
   • The Link External option provides a cell to enter an external URL.
     • Paste or enter the URL in to the External URL field
     • Click Add.

   External links are automatically added to the Styles or Scripts tab depending on the link's extension (.js links are added to the Scripts tab, and .css links are added to the Styles tab).

   If adding scripts, remember to validate they are correctly ordered. This is done by clicking the Arrange Rows button and dragging the rows into the proper sequence.

Views tab

Click the Views tab to choose which Views are used with the theme. Views are an easy way to update pieces of widgets without updating the entire widget.

Click Edit to select which resource template is assigned to the theme. Since one of each View is necessary for the site to function correctly, Views cannot be unassigned. However, Views can be cloned in the Theme Resources section of the Admin Console, and the cloned version may be selected to replace the system default.

On the Select Template pop-up, select a template using the drop-down, then click Save. As on all other theme screens, System resources are indicated with the System Resource icon.

Click View Resources to view the resource's Code tab (accessible under Themes & Content > Theme Resources > select a Resource).

Widgets tab

Select the Widgets tab to select which versions of widget templates are used with the theme. Click Edit to select a widget template. Since one of each widget template is necessary for the site to function correctly, widget templates cannot be unassigned. However, widget templates can be cloned in the Widgets section of the Admin Console, and the cloned version may be selected to replace the system default.

Version history tab

Use the Version History tab to view a list of all current and previous versions of the theme (up to 25). Click View Only to view all changes made since the theme was published.

Click Discard Draft in the upper right corner of the screen to discard the current draft version of the theme. In the confirmation pop-up, click Discard Draft. Discarded drafts cannot be recovered, and do not appear in Version History.

📘

Note

If the current version of the theme is Published, the Discard Draft button does not appear.

Assign a theme to a website

In order for a theme to be active, it must be assigned to a website. While multiple themes may be created, only one theme may be assigned to a website at a time.

1. In the Admin Console, go to Websites.

2. Click Edit next to a website to edit it.

3. On the Details tab, select a theme from the Theme drop-down.

   

4. Click Save.