How to Build a Dedicated Locations Page on Your Website

There's a legendary saying in real estate: "location, location, location."

Brick-and-mortar retail stores now how true this is. Customers need to know where to find you, so they can buy your amazing products and services. And if you have multiple locations, they need to find the closest and most convenient place to make the sales magic happen – especially if different stores offer unique experiences or inventory. 

When it comes to websites, the story shifts to digital real estate – and how to use the location of your content to drive more conversions. If you have a smart strategy for managing your location details, you can improve the overall user experience while enhancing search performance. 

Obviously, if you're a business with a single physical store, you can list your address on a general "Contact Us" page (and include other pertinent details in a cool sidebar). 

But if you have multiple stores or outlets, having a dedicated "Locations" page makes a whole lot of sense. If you include it in your root navigation, it can help improve SEO while organizing your various storefronts into a single, attractive, scrollable experience. Further, it can serve as a springboard to individual store location pages, where you can add search-powered content about each location's unique profile, from operating hours to special events. 

Tips for Designing Your Locations page

Here are a few pointers for compiling your locations into a slick, SEO-powered page:

• Make sure the main location page is simple and easy to navigate. Include only the most relevant information, like each store's address, phone number, hours of operation, and maybe a single image for context. If needed, you can include specifics about each location that might inform the buying decision; for example, if you have a chain of restaurants, you might want to indicate which stores are available for carryout, delivery, or both. 
• Give each location its own link page. With a dedicated page for each store, outlet, or office, you can provide more detailed information about each spot. This is key if some stores are able to sell specific products like liquor – but others don't. Dedicated link pages can also bolster your SEO by creating more rich, crawlable links under your main website's domain. 
• Make the experience mobile responsive and ADA accessible: We'll show you how to handle the responsive piece with Bootstrap classes in the code below, but in today's digital world, accessibility should go without saying. Think about the text color, contrast, and size – which can be rendered as adjustable – and keep things free from excess clutter. You can also code the phone number as clickable, so it's easier to make a call (we'll show you how to do that too in the HTML section). 

That should do it! And now, it's time to code, code, code...

Getting Started

Since we're using Bootstrap to build our section, go ahead and copy and paste the links below in the head section of your project's HTML file:

HTML

In the HTML code below, we have three locations. Each location is in a row – so each location is inside a div container with a class of .row. Inside the row, we have an image of the location, the location name as the heading, the address, a clickable phone number link, location hours, and a select button link that takes the visitor to the location's own page. Copy and paste the HTML and change the text values inside.

We made the telephone numbers clickable and callable by adding the href attribute to the tel link. Href=tel creates the call link just like href=mailto: triggers the user's email program.

CSS

Since we utilized Bootstrap's built-in classes for layout and spacing, our CSS is minimal. For the location images, we set a certain width and height for visual consistency. We then applied the object-fit property and set its value to cover so that the location images uploaded will be scaled to retain their original aspect ratios.

We also created a classname .bg-light-gray to apply a light gray background to every other row. By using the :nth-child(even) pseudo-class, we selected all the rows with even numbers (2, 4, 6, 8 etc.) and a result, the location list has a light gray background for even rows and white for the odd ones. This is to improve the readability of the location lists. Feel free to customize the background color and text/link colors by modifying the hexadecimal colors.

And there it is! If you'd like to see how it looks before you invest the time in coding, check out the JSFiddle below: