Yeah finding stuff can be a little hard at first. Here's a little course that kind of walks you through everything in Shopify, and it was really helpful to me when I first started:
https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...
You just need to make a skillshare account to view the course, which is free.
You just kind of have to track things down, because things in Shopify (especially in pre-designed themes) are done very modular, broken up into more easily editable bits. So to track something down you'll usually want to start with your theme.liquid. If you open theme.liquid and scroll down you'll see something like this:
{% section 'header' %}
<div class="page-container" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}So where {% section 'header' %} appears, that's basically like an include in PHP. It's referencing a "Section" file called "header.liquid". So that's probably where your navigation is going to be. So head over to your sections folder and open header.liquid. Now there's a whole bunch of stuff in there. When you see thinks like:
{% if section.settings.align_logo == "left" %}
//Some Content
{% else %}
//Some Other content
{% endif %}That's referring to settings that you have set through your visual editor(the UI you get when you press the Customize button in Online Store > Themes). So don't let all that confuse you or anything. What you're looking for is your navigation, since this is up to HTML5 specs, you can probably just Ctrl + F for "<nav" to find wherever your navigation starts. So when I do that, I find this:
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% if template == "blog" %}
{% include 'blog-nav' %}
{% else %}
{% include 'site-nav' %}
{% endif %}
</nav>This is what mine looks like because I have already made edits to my default Debut theme. Someone else wanted to know how they would swap out navs if you were viewing their blog page, which can be achieved kind of like this. You're probably looking for "site-nav". When you see something with an include:
{% include 'site-nav' %}It's pretty much the same thing as {% section 'header' %} -- Except that include is referencing a "Snippet". So go into your snippets folder and open "site-nav.liquid". This is the file you're going to want to edit. It's already set up to handle nested navigation and give you dropdowns, so there's a bunch of liquid in there. But you're just wanting to edit the first level. So the file opens up with this:
<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
{% for link in linklists[section.settings.main_linklist].links %}That's the opening of the ul, and then the next line is a forloop that is looping through each of the links for whatever you have set as the default link list in your Visual Editor (again, the Customize button). Since you're going to want to have different icons for each link, you can reference the link's handle to set up some string variables to correlate to your font awesome icons using an if else statement inside of the forloop:
<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
{% for link in linklists[section.settings.main_linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}
<!-- Start of if statement -->
{% if link.handle == "home" %}
{% assign fontAwesomeIcon = 'fa fa-home' %}
{% elsif link.handle == 'contact' %}
{% assign fontAwesomeIcon = 'fa fa-phone' %}
{% else %}
{% assign fontAwesomeIcon = false %}
{% endif %}
<!-- End if statement -->
{% comment %}
Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{% if link.links != blank %}
{% if link.levels == 2 %}
{%- assign three_level_nav = true -%}
{% endif %}
{% endif %}
{% if link.links != blank %}
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">
<button class="site-nav__link site-nav__link--main site-nav__link--button"{% if link.active %} aria-current="page"{% endif %} type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<!-- here is the output for the forloop, you will want to make an if statement to check for fontAwesomeIcon -->
{% if fontAwesomeIcon %}<i class="{{ fontAwesomeIcon }}"></i>{% endif %}{{ link.title }}
{% include 'icon-chevron-down' %}
</button>Basically something like that.
Oh yeah and of course, link to font awesome inside theme.liquid
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Shopify Discussion
Partners and Developers
