Theme resources

Theme Resources (also known as Front End Resources) are used to create and manage various theme styles, scripts, and views in Optimizely Configured Commerce. This includes creating new resources and writing any applicable code within those resource or uploading existing code. Additionally, if a content delivery network (CDN) is used, the option to link externally lets you point the CDN paths.

This article is divided into the following three categories:

• Work with the Theme Page – this section describes various buttons and icons that are presented and how to search and sort files.
• Create a New Theme Resource – this section covers how to create a new resource, clone an existing one, or link to external theme resources (CDNs).
• Edit a Theme Resource – this section covers working with drafts, previewing changes, publishing a resource, comparing changes, uploading code, viewing assigned resources, and viewing past versions.

Work with the theme page

1. Go to Admin Console >Themes & Content > Theme Resources.

   

2. The System column displays System Resource if the resource is a system resource. If a resource is a system resource, it also displays View Only in the Edit column, noting that the resource is view only and cannot be edited. Editable theme resources show Edit in the Edit column.

3. This screen also displays the File Name, Group, Language, and Status (either Published or Draft).

4. Search for a resource using the Search Bar at the top of the page.

5. By default, theme resources are sorted by Language, then by Group within the Language. Click a column header to sort the list by that column.

6. Click Delete at the top of the screen to delete a theme resource. System resources cannot be deleted.

7. If the resource is assigned to a theme, the system displays a pop-up as a reminder the resource cannot be deleted. Unassign the resource from the theme first, then return to the delete screen to delete the resource.

   

Create a theme resource

Use the following steps to create a new theme resource by either cloning a system resource and modifying the code, or by creating a theme resource.

📘

Note

Cloning a cloned resource is not recommended, as the version history will be inaccurate. Clone from system resources only.

Clone a system resource

1. Go to Admin Console > Themes & Content > Theme Resources
2. Click View Only next to a theme.
3. Click Clone.
4. Assign the resource a File Name on the Details tab, and click Save.
5. Modify the other resource tabs as needed.

Create a new theme resource

1. Go to Admin Console > Themes & Content > Theme Resources
2. Click Add Theme Resource.
3. Select a Resource Type (Style, Script, or View) and the corresponding Resource Language.
4. Select Create to create a new blank resource, or select Upload to upload a file.
5. If creating a new blank resource, enter a File Name, and a group name. Optionally, paste code in the box at the bottom of the screen. Click Create.
6. If uploading a file, select Choose File to browse for the file, then enter a group name. Click Upload.

Link to a CDN

If your content resources are stored in a CDN, follow these steps to link to the CDN.

1. Go to Admin Console > Themes & Content > Theme.
2. Click Edit to edit an existing Theme.
3. Click the Styles or Scripts finger tab and click Add Styles or Add Scripts.
4. In the Add Style or Add Script pop-up, click Link External.
5. Paste the relevant URL into the field and click Add.

Edit a theme resource

Edit cloned or custom theme resources to update details, change code, or restore a previous version of the resource. Editable resources show the Edit button in the Edit column. Cloned or custom theme resources can be edited, while System resources cannot.

1. Go to Admin Console > Themes & Content > Theme Resources
2. Click Edit next to the resource you wish to edit.

Edit buttons

Editing buttons vary depending on the current resource and current state (Draft or Published).

Discard draft

If the select resource is in Draft mode, select Discard Draft to delete the current draft and return to the last published version of the resource. In the pop-up window, select Discard Draft.

Preview

The Preview button is available if the selected resource is in Draft mode and attached to a theme.

1. Click Preview to preview the current theme resource in conjunction with one of its assigned themes. The Preview window shows the currently selected Theme, Theme Version, and Website on the left.

2. Click a drop-down to change the respective options. Preview mode bundles resources by default.

3. Click the YES toggle to unbundle resources.

   

4. On the right side of the screen, resources are sorted by type (Styles, Scripts, Views, and Widgets). The current resource automatically is selected; uncheck the checkbox next to a resource to exclude it from the preview, or check the checkbox to include it.

5. Click Preview to preview selected drafts in a new window.

6. A black bar displays at the top of the preview screen, displaying the theme name, if bundling is on or off, and the number of draft resources currently being previewed.

7. Click Cancel Preview to view the website as normal.

Publish

The Publish button appears when the theme resource is in Draft mode. Add optional revision notes in the pop-up, and click Publish.

Clone

Click Clone to clone the current resource.

📘

Note

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

Compare

1. Click Compare to compare the current resource version with either a previous version of itself, or with a version of the resource it was cloned from (if applicable).

2. Select a version type using the radio buttons at the top of the pop-up, then select a resource version using the checkboxes.

   

   📘

   Note

   Compare code options are limited to a maximum of 50 versions.

3. Click Compare to open the code in a new window.

   

4. Any differences between the two selected versions appear in blue. In the above example, a line of code exists in the previous version that was deleted in the subsequent version.

5. Close the window to return to the Admin Console.

Details tab

On the Details tab of a cloned resource, Resource Type, Language, and Cloned From are set fields and cannot be changed. The cloned resource inherits these field values from the parent resource.

Assign the resource a unique File Name (required) and Group Name (optional). Group names are for internal reference only, and are helpful in organizing resources in a way that makes sense for your company.

Code editor tab

1. Click the Code tab to modify the resource's code in the ACE editor. A system resource's code cannot be modified.

2. Click into the ACE editor and begin typing your code. Possible code auto-suggestions appear as text is typed; press the Tab key to enter the suggested code.

   

3. In the upper right corner of the ACE editor, click Upload File. The uploaded code replaces all of the current lines of code; it does not append the existing code.

   📘

   Note

   The ACE editor supports Vim. To enable it, click More Options and check the box next to Vim Mode.

Assigned themes

Use the Assigned Themes tab to view all resource assigned to the current themes. Click View Resources to view the theme. This tab cannot be used to assign the resource to a theme.

Version history

1. Click the Version History tab to view the resource's current and previous versions.

2. Select View Only to view more information about a version.

   📘

   Note

   The version history is limited to a maximum of 30 versions.

3. The Version page lists the resource's title, type, version number, published by/on information, any comments added when the version was published, and the version's code. All of this information is Read Only, and may not be changed.

   

4. Click Information next to the version number at the top of the screen to view additional version details, like Created By, Created On, Modified By, Modified On, and Id.

5. Click Restore in the upper right corner of the screen to restore a previous version of the theme resource. If a Draft version currently exists, the Restore pop-up displays a warning.

6. Click Restore & Publish to restore the version and publish the resource, or click Restore to restore the version but leave the resource in Draft mode.

   

📘

Note

The Restore option appears only if the user selects a version other than the current Draft or Published version of the resource.