The Theme Editor on WP Maps gives users complete control to customize each and every element on the store locator widget.
Users are no longer limited to simply changing color and text. With the Theme Editor, you can customize your product and store locator widget to make it look exactly as you want it by using HTML and CSS. This will allow you to create a store and product locator that fits perfectly with your brand image.
Let’s go over the Theme Editor step-by-step
Before we begin, we should mention that It is recommended that Theme Editor be used by users who at least have basic knowledge of HTML and CSS. Moreover, if you are not familiar with coding, it may be better to assign someone who is comfortable writing codes.
The Theme Editor gives users full control to edit and customize various sections of the store locator and product locator widget of a specific build. Each of your builds can be customized individually using the Theme Editor without affecting any other builds.
To access the Theme UI Editor for a certain build, please follow the below steps:
1. Login to your WP Maps account
2. Go to the “Widgets”
3. Click on the “Options” button on a build and click on “Customize”
4. On the “Template Customizer” page, select the “Theme Editor”
Note: The Theme Editor feature is only available in the Standard package and above. Users with the Entry subscription package or on a free trial will not be able to access the Theme UI Editor.
The Theme Editor Page
On the Theme Editor Page, you will find the following components:
- Files List
- The HTML/CSS Editor
- Top-Right Section
Let’s go over each of these sections individually.
1- The Files List
The Files list represents sections of the product or store locator you can customize.
The main “parent” files in this list are:
- locator.handlebars - To make changes to the store locator widget
- products.handlebars - To make changes to the product locator widget
The rest of the files are “child” files for these two parent files.
Click on a file to customize or modify a section of the store or product locator widget, this will open a tab on the code editor (you can open multiple tabs to customize many sections at the same time)
2- The HTML/CSS Editor
Once you click on a file, a tab will open on the code editor which you can use to customize your locator widget using HTML or CSS.
To customize or modify a section, simply add the appropriate code in the code editor and then press “Save”, you will get a notification that the file has been updated successfully.
The “Restore” button will return the file to its default form.
Note: When adding a “class” tag to Bootstrap 4 be sure to add the suffix “wpm” to the code line.
To apply the changes to your build, you will need to click on the “Compile” button in the top right corner of the screen. Upon clicking the “Compile” button, you will get a notification that the template has been successfully compiled.
Note: To make a successful modification, it is important to not “break” any lines of code. Doing so will result in an error message.
3- The Top-Right Section
The section in the top-right corner of the screen shows which build you are editing by displaying the build ID and build name.
Furthermore, the section also contains The “Compile” button which you will need to press, after adding code in the code editor, for any changes to be applied to your build.
The “Preview” button can be used to see what will be applied to your locator widget.
Making a Modification or Customization
Let’s now see a general summary of all the steps you should follow to customize a particular build:
- Go to the Theme Editor for a specific build
- Select a section you would like to customize by clicking on the appropriate file in the files list
- Add code to the code editor (making sure you don’t break any code line)
- Click on “Save” to update the file
- Click on “Compile” to apply the changes
Note: When you customize the store or product locator widget through the Theme Editor, you will need to copy and paste the updated HTML code for that build to your website. This is because the update code has [custom: “1”] element in it.
To view the HTML code for the build you modified go to the "Widgets" page and press on the code symbol (</>) on the build.
For any questions or concerns, please email us at firstname.lastname@example.org