Header & the store selector

The first sections of the theme are the header & the announcement bar.

Header

While the announcement bar is pretty straightforward, with the ability to add multiple announcements, social icons or language selectors, the header has a few interesting ones that will take your store to the next level. 

Header options

It starts with the logo, the main menu and the option to show or hide the search bar. The cart button is always there, and the account button appears if you have customer accounts enabled in your admin.

Then, you have an option to show or hide the header info blocks (more on this below) on mobile devices, and also show/hide various parts from the mobile drawer navigation.

Header blocks

There are three types of header blocks.

Mega menus

These will transform a regular submenu (small drop down) into a meta menu (large drop down with the ability to add a promotion tile). For this to properly work you have to make sure that you write the handle of the menu you want to transform in the proper setting field. A handle means all lower case with dashes instead of spaces. For example, if you have a menu called Our Promotions and you want to turn it into a mega menu, the handle will be our-promotions. Please see this short screen record in case you have any issues implementing it.  

Inside a mega menu, all submenus will be layed out as a masonry grid of links, with the promotion tile as an optional part at the right side of the menu. On mobile, this will look like a regular menu, with the only difference being the promo block that will appear when you navigate to the specific submenu. 

NOTE: The menu handle is case sensitive - please insert lowercase text in the mega menu customiser settings. In case you have a 2 words menu item, these need to be united but "-", for example " arabic-books"

Here's a short video of the entire process: 

Info blocks

Info blocks are links or plain information that will appear at the right side of the menu. You can add a maximum of 2 info blocks.  These should be used for various links, very important stuff that you want your users to know when they first land on your website (considering that you can configure these to show up both in desktop and mobile front and center). There are some generic icons that we've included for you to use in this area, but you can always download any icons from the ones we provide for free in our resources page.

Store selector

The last block which can be added is the unique store selector, which doesn't have any options, as it is just used to trigger the theme's store selector and also offer information about the store which is currently selected. Even if you have only one local store this can still be useful, because it will show your visitors the name, opening hours and a link to the map / more information.

Store selector

Let's jump at the last section of the theme, the store selector. This is one of Local's biggest features, as it allows you to define multiple store locations and connect them to the locations you are actually selling from, in order to inform your visitors about product availability and also give an easy way for them to find useful information about your locations.

For this to properly work, you need to have your locations first defined and properly working. This is a basic Shopify functionality, so we recommend you read more about it here: https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods

Once you have this set up and working, you are ready to setup the theme's store selector as well.

Step 1: Add a block

Each block that you add will be a reference to a real location that you had set in your admin. The most important setting here is the Name, which has to be an exact copy of the name that your real store has. Next, all the settings are useful information that you might want to give your customers. Pick up details, store details, closing times and a store image. Last but not least, you can use the interactive map to show your stores on a real map, using a custom pin and gps coordinates to set this up.

See how this should be configured:

The store selector will be triggered by the store selector block in the header or any pickup availability block that you may add in product grids / pages. Once an user makes a selection, the store selector block in the header will update to show the details of the selected store and also update the local availability widget everywhere it is used.

Step 2: Configure the map

Configuring the map is pretty straightforward, once you have the API key set and running you just have to enable the map and make sure that each store has correct gps coordinates introduced. You can set the map zoom (which you need to be careful at, in order to make sure that all your custom markers will be properly shown) and change the map style. Each added store will be triggered by a map pin and viceversa.