Skip to main content

Builder screen, tabs, designs, and editor controls

Open Store Locator → Builder. This is the only screen used to create the eight Builder design types. The plugin does not have a separate Designs screen.

What the Builder list contains​

Each card in the Builder list is one saved design record. A card shows:

  • the design name;
  • its type, such as Store Card or Layout;
  • its numeric Design ID;
  • Inactive when the record is disabled;
  • actions to duplicate or delete it.

Use the tabs above the list to show All designs or filter by one Builder type. The number beside each tab is the number of saved designs of that type.

Create a design​

  1. Select New.
  2. In What do you want to build?, select one of the eight types.
  3. Enter a name in Untitled — name this design….
  4. Build the design on the canvas.
  5. Select Save.

The first save assigns a Design ID. Further saves update that same record; they do not create a new copy.

Open and duplicate a design​

Select a design card to open it. Select the duplicate icon on a list card to choose one of two operations:

  • Duplicate design only creates a new copy of the selected record but preserves its existing references. For example, a copied Layout continues to use the same Search Form, Store Card, infobox, marker, and Category Tile designs as the original.
  • Duplicate with included designs recursively copies every design referenced by the selected record and rewires the new copies to one another. The copied Layout therefore receives its own Search Form, Store Card, infobox, marker, Category Tile, and other included designs instead of sharing them with the original.

Every created record receives a new Design ID. The popup highlights the selected duplication mode, pre-fills Name suffix with Copy, and waits for you to select Duplicate. Change the suffix when the copied set needs a specific name; the same value is applied to the Layout and every included design. The popup also reports how many included designs it can resolve. If a referenced design cannot be copied, the operation is cancelled and any partial copies are removed.

Use design only when two Layouts should deliberately share their component designs. Use with included designs before restyling, rebranding, or restructuring a complete locator without changing the original. See Duplicate a design or an entire locator for worked examples and verification steps.

Delete a design​

The delete icon permanently removes the design after confirmation. Before deleting, check:

  • Layout widgets that select it;
  • Settings → Defaults;
  • Settings → Features for the Store detail design;
  • Store or Category HTML marker assignments;
  • Elementor, Gutenberg, WPBakery, or shortcode embeds when deleting a Layout.

Deleting a referenced design does not automatically choose a visually equivalent replacement.

Editor toolbar​

While editing, the toolbar contains:

  • back arrow to return to the Builder list;
  • design-type badge;
  • Design ID after the first save;
  • editable design name;
  • Copy shortcode for Layout designs;
  • preview-record selector for record-based designs;
  • Desktop, Tablet, and Mobile preview buttons;
  • import/export actions for the current design;
  • Preview / Structure toggle;
  • Save.

Preview widths come from Store Locator → Settings → Builder. The selected width changes the preview canvas and lets you inspect mobile width overrides; it does not change the visitor's actual device width.

Edit directly from Preview​

Select Preview, then click the visible widget, field, row, or column you want to change. The clicked part receives the blue selection outline and its normal settings open in the inspector without leaving Preview. This is useful for visual work such as changing a Store List's grid columns, a Map's height, a card field's spacing, or a Search field's appearance while seeing the rendered composition.

Click the empty canvas area to select the top-level container. When elements overlap, click the most specific visible element first; use Structure when you need drag-and-drop ordering, duplication, or deletion controls. Switching between Preview and Structure keeps the current selection.

Replace a Layout's color scheme​

Open Structure and select Color scheme beside Container. The popup finds explicit hex, RGB/RGBA, and HSL/HSLA colors stored in:

  • the current Layout's container, rows, columns, and widget settings;
  • referenced Search Forms;
  • referenced Store Cards and infoboxes;
  • referenced marker or Category-tile designs;
  • nested referenced designs resolved from those children.

Each unique original color appears once, including semantic control colors such as slider tracks/handles and toggle parts. A named Google Map theme contributes its complete preset palette too. Select a Replace with swatch, choose the new color, and repeat for the colors being rebranded. Nothing changes while the popup is merely open; select Confirm color changes to replace every matching occurrence.

Confirming persists both the open saved Layout and its included designs as one operation, so the Result Count, Search Form, Map controls, clusters, Store Cards, and infoboxes do not require separate Save operations. When a named Map preset color is replaced, that Map is converted to Custom JSON containing the recolored version of the preset; its roads, water, land, and labels therefore retain the preset's structure with the new palette.

The popup names the linked designs included in the operation. A linked Store Card, Search Form, infobox, or other child is a reusable design record: changing it also changes any other Layout that references the same Design ID. Duplicate shared child designs and relink the Layout first when the new scheme must be exclusive to one locator.

Inherited Settings → Theme tokens are not stored as explicit colors in a design and therefore do not appear in this list. Change those under Settings → Theme.

Current-design export versus Tools export​

The editor export creates a bundle for the design being edited and includes linked child designs it can resolve. Store Locator → Tools → Builder templates can export several selected root designs together. Both formats remap linked Design IDs during import.