How to build Navigation Menu for a Shopify Theme
Now that we are familiar with Theme Kit and with the the folder structure of a Shopify Theme, we can start building our theme. Let's start by building a simple navigation menu using the Bootstrap library. First, before we make any changes, we need to navigate to the directory with our theme and start the Theme Kit by running "theme watch". Any changes that we now make to our Theme, will automatically be updated in the our Shopify store. This way, we can immediatelly see any changes that we have made.
The theme.liquid file is the master template for all our pages and it is exactly the right place where to import the Bootstrap library. We can also see that there is already a default implementation for a navigation maneu. We do not need this code as we will be replacing this with our own version.
We will therefore import the Bootstrap library in the <head> section of this file, and simply replace the default implementation of a navigation menu with {% section 'header' %} tag. Shopify Themes are broken down into smaller components and a 'section' is an example of such component. This tag will therefore insert the navigation menu into the master file of our Theme. This way the menu will automatically be dispalyed on all the various pages of our store. Now we need to create the actual HTML for our navigation menu.
When we have previously looked at the default folder structure of a Shopify theme, we have't seen any folder that would indicate that the 'section' components should be stored there. We do indeed first need to create a folder called 'sections' and within this new folder we will then create header.liquid file, which will contain the HTML for our navigation menu. Into the 'header.liquid' we can then write our HTML implementation of a navigation menu. I have simply copied an existing Bootstrap implementation of a navigation bar.
However, in the implementation we can see additional syntax relating specifically to Shopify. This syntax is actually very similar to the default implementation that we have previously replaced with our section-tag. In our implementation of the navigation abr we can see that we want to display the appropirate navigation links for the store and also a brand icon. The keyword 'section' is refering to this specific 'section-component'. For contrast, we could also be interested to refer to the global settings of the Shopify Theme where we may for example store the value of the font-style that should be used. When we refer to 'section', we are simply refering to the section-object that we have defined in the file under our HTML code. All this code is contained within the {% schema %} tag and every section-component must have such tag with the appropriate configuration included; otherwise Theme Kit will alert us that the file is incorrect.
Looking at the first occurence of a Shoify related syntax within our HTML code: {{ section.settings.image | img_url '50x50'}}. Through 'section.settings.image', we are referring to our schema of the this section-component and specifically are accessing the attribute image within the 'settings' section. We will always access those elements using their ID. We can see, that the element with id:image has 'type':'image_picker'. This tells Shopify to display an image picker to the merchant in their Shopify Administrative Interface. When the merchant selects an appropriate image, this will then be saved in their shopify store from where we will then be able to access it with this syntax. As our liquid code is within the src attribute of an <img> tag, we want to retrieve the URL of the specified image and we also want to lmit its size to 50x50px as it is contained in the navigation menu. This is what is the n accomplished with the "| img_url '50x50'" filter.
After we save those changes we can navigate to our Shopify store, create some relevant links for our store which should be displayed in the navigation menu and also pick an image for our navigation menu. With those settings in place, we can now see the implementation of our navigation menu.
When we now stop our Shopify Theme Kit, and run the following comand: theme get config, those changes that we have implemented in the actual Shopify Store (loading a specific image to be displayed in the navigation menu), will be synchronised with our local version of the Theme. Specifically, those changes will be saved in the settings_data.json.
We have now completed the implementation of a navigation menu for our Shopify Theme and are ready to make further components for the home page of our store.