> For the complete documentation index, see [llms.txt](https://api-docs.devhub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api-docs.devhub.com/getting-started-guides/location-pages-and-store-locator-with-custom-theme.md).

# Location pages and store locator with custom theme

## Overview

The goal of this guide is to illustrate how you would create

* [A business](/getting-started-guides/location-pages-and-store-locator-with-custom-theme.md#business) for a theoretical customer "ABC Brand" which all locations and sites will be published under
* [A custom theme](/getting-started-guides/location-pages-and-store-locator-with-custom-theme.md#custom-theme) that will be used to customize the header, footer, and style used on the Store Locator page and each Location Page
* [Locations and their associated location pages](/getting-started-guides/location-pages-and-store-locator-with-custom-theme.md#locations-and-location-pages) for each location which will be set to `locations.abcbrand.com/location-slug/`
* [A Store Locator](/getting-started-guides/location-pages-and-store-locator-with-custom-theme.md#store-locator) site that will be setup to be hosted under `locations.abcbrand.com/`

Note: Each instance of our platform is configured with a "directory depth" that is used to specify what the URLs will look like for each of the Sites. In the below example, it is set to `1` which would allow you to publish sites under `/example-location-slug/`

## Business

### 1. Create a Business

Using the [Businesses resource](/core-resources/businesses.md)

`POST /api/v2/businesses/`

```javascript
{
  "business_name": "ABC Brand"
}
```

The returned `business.id` will be used in later requests

## Custom theme

### 1. Create the custom theme

A [Theme](/content-resources/themes.md) with header and footer and location page content is added here

See [Example request to create a custom theme](/content-resources/themes.md#example-request-to-create-a-custom-theme)

You will use the returned `theme.id` in later requests

### 2. Create a Site that will be used as the "master template" content

Assign the `theme_id` from above to that [new Site](/core-resources/sites.md#create-a-site). We will leave this Site as unpublished as it is only used as a template.

`POST /api/v2/sites/`

```javascript
{
  "business_id": BUSINESS_ID,
  "base_directory": "/master-template/",
  "formatted_domain": "locations.customerbrand.com",
  "title": "Location Page Master Template",
  "theme_id": THEME_ID
}
```

### 3. Enable theme as master template pointing to the site\_id from above 

`PUT /api/v2/themes/:theme_id/`

```javascript
{
  "site_overrides": {
    "en": SITE_ID
  },
  "site_override_objects": [
    "linklists",
    "pages",
    "plugins"
  ]
}
```

For more details on site override view [here](/content-resources/themes.md#site-override-options)

## Locations and location pages

For each location, we will be creating a location and a location page (site)

### 1. Create a location

[Create a location](/core-resources/locations.md#create-a-location) and also pass the `location_url` which is used to link to the location page from the store locator.

`POST /api/v2/locations/`

```javascript
{
  "business_id": BUSINESS_ID,
  "street": "555 Main St",
  "city": "Seattle",
  "state": "WA",
  "postal_code": "98121",
  "country": "US",
  "phones": [
    {
      "type": "phone",
      "number": "(206) 555-5555"
    }
  ],
  "location_url": "http://locations.abcbrand.com/seattle/"
}
```

You will use the returned `location.id` in the next request

### 2. Create a location page (site)

[Create a location page (site)](/core-resources/sites.md#create-a-site) under the same location\_url from above and using the `business_id`, `location_id`, and `theme_id` from previous requests.

`POST /api/v2/sites/`

```javascript
{
  "base_directory": "/seattle/",
  "business_id": BUSINESS_ID,
  "formatted_domain": "locations.abcbrand.com",
  "locations": [LOCATION_ID],
  "published": true,
  "theme_id": THEME_ID,
  "title": "Seattle Location Page"
}
```

## Store locator

### 1. Create the store locator site

We will then publish a Store Locator [site](/core-resources/sites.md#create-a-site) under `locations.abcbrand.com` and we will pass `/lp/` as the `base_directory` which is a special method to support rendering the store locator under the root domain.

`POST /api/v2/sites/`

```javascript
{
  "base_directory": "/lp/",
  "business_id": BUSINESS_ID,
  "formatted_domain": "locations.abcbrand.com",
  "published": true,
  "theme_id": THEME_ID,
  "title": "Store Locator"
}
```

The returned `site.id` will be used in later requests

### 2. Update the home page to add the default Store Locator module

In step 1, the site that was created has a blank home page. So we will now update the home page to add the store locator. This will also override the default location page (site) content that would normally show for that `theme_id`

#### 1. Find the current home page

We will [grab all the pages under the Site](/content-resources/pages.md#list-pages) (there should only be one) and use it's `page.id` to update the content in the next step. The home page will be the one with the `path` set to `/` (slash)

`GET /api/v2/pages/?site_id=:site_id`

```javascript
{
  "objects": [
    {
      "id": 123,
      "path": "/",
      "name": "Home"
    }
  ]
}
```

#### 2. Update the home page

[Update the Page detail](/content-resources/pages.md#update-a-page)

`PUT /api/v2/pages/:page_id/`

```javascript
{
  "column_widths": [[100]],
  "modules": [
    {
      "column": 1,
      "module": "multilocation",
      "order": 1,
      "props": {
        "is_location_finder": true,
        "location_finder_version": "v2",
        "within_business": true
      },
      "row": 1
    }
  ]
}
```