---
title: "Custom layouts"
description: "Build your own store page or store locator layout with the drag-and-drop visual editor, then publish it on the Design tab."
product: "Shoppy Store Locator"
section: "Settings and design"
url: https://help.shoppyconnect.com/store-locator/settings-and-design/custom-layouts
markdown_url: https://help.shoppyconnect.com/store-locator/settings-and-design/custom-layouts.md
last_updated: 2026-11-05
tags: ["settings", "design", "custom layout", "visual editor", "drag and drop", "blocks", "store page layout"]
---

# Custom layouts

> Build your own store page or store locator layout with the drag-and-drop visual editor, then publish it on the Design tab.

If the pre-built layouts don't fit your brand, build your own with the visual editor. You drag blocks, such as the store name, trading hours, or a map, onto the page and arrange them how you like.

You can make two kinds of custom layout:

- **Store page layouts**: the page for each individual store.
- **Locator layouts**: the main store locator page.

## Create a layout

1. Go to **Settings** › **Design**.
2. Under **Store page layouts** or **Locator layouts**, click **Create layout**.
3. For a locator layout, choose a starting point:
   - **List with map**: a store list beside a map.
   - **Magazine grid**: photo cards that open each store's page. No map.
   - **Two column**: a title, a search box, and stores in two columns. No map.
   - **Two column, large image**: wide cards with a large store photo, next to a map.

The visual editor opens.

![The visual editor for a new store page layout, with blocks on the left, a preview of a store page in the middle, the layout name and description on the right, and the Preview store dropdown, Discard, and Save at the top](https://help.shoppyconnect.com/_astro/01-layout-editor.B2r8z1xE_2kpDSH.webp)

## Use the editor

- **Blocks** (left): drag a block onto the preview to add it. Blocks are grouped, for example:
  - **Layout**: **Row**, **Column**, **Split Pane**, **Flex Container**, **Grid Container**, **Empty Space**, **Show / Hide Section**, and **Custom HTML**.
  - **Store Information**: **Store Name**, **Store Label**, **Short Description**, **Store Description**, and **Store Tags**.
  - **Contact & Location**: **Store Address**, **Phone Number**, **Email Address**, **Get Directions**, and **Google Map**.
  - **Trading Hours**: **Trading Hours**, **Special Trading Hours**, and **Open / Closed Status**.
  - **Media & Social**: **Image Gallery** and **Social Media Links**.
  - **Navigation**: **Breadcrumbs**, **Back to All Stores**, and **Store Page Link**.
  - **Locator** (locator layouts only): **Store Search**, **Store Filters**, **Store List**, **Store Card**, **Store Map**, **Store Tabs**, **Sort Control**, **Result Count**, and **No Results Message**.
- **Outline** (left): see every block on the page as a list, and select one.
- **Settings** (right): click a block to change its settings, such as text, spacing, or which details it shows. With nothing selected, set the **Layout Name** and an optional **Description**.
- **Preview store** (top): choose which store fills the preview, so you can check a layout with real details.
- **Device buttons** (above the preview): check the layout on mobile, tablet, desktop, or full width. Use the zoom controls to see more or less.
- **Undo** and **Redo**: step back or forward through your changes.

Different blocks are available for store page layouts and locator layouts.

## Save the layout

Click **Save** to save the layout and go back to **Settings**. Click **Discard** to leave without saving.

Saving doesn't put the layout live. Your new layout appears in the list on the **Design** tab.

## Publish the layout

1. On **Settings** › **Design**, find your layout in the list.
2. Click **Publish**.
3. Click **Save** at the top of the page.

Your store locator or store pages now use the layout. Only one layout of each kind is active at a time.

## Edit or delete a layout

- Click **Edit** next to a layout to open it in the editor again. Changes to the active layout show on your online store when you save in the editor.
- To delete a layout, click **⋯** › **Delete**, then confirm. You can't delete the active layout: publish another one first. Deleting can't be undone.

## Tips

- Name layouts clearly, such as `Store page with gallery`, so you can tell them apart.
- Preview a few different stores, including one with no photos or no special hours, to check the layout still looks good.
- Check the mobile view before you publish.

## Related guides

- [Design and layouts](https://help.shoppyconnect.com/store-locator/settings-and-design/design-and-layouts.md)
- [Colours and fonts](https://help.shoppyconnect.com/store-locator/settings-and-design/colours-and-fonts.md)