Shopify is pretty modular, all the bits and pieces of code are split up into different types of files. The central layout file is “theme.liquid” in your Layouts folder, which you can get to by going to Online Store > Actions > Edit Code. In theme.liquid you’ll see the skeleton for your HTML, (html, head, body) tags. Typically sites have a header, footer, and a shopify object called {{ content_for_layout }} which outputs whatever template file you happen to be viewing:
{% section 'header' %}
{{ content_for_layout }}
{% section 'footer' %}
Your templates folder is where the meat of your site is. index.liquid handles your homepage, page.liquid handles your pages, product.liquid handles your product pages, collection.liquid handles your collection pages, etc. Typically when you open these you’ll see a section object that outputs a different file. For example, if you open product.liquid you’ll probably see something like:
{% section 'product-template' %}
That’s basically an include that’s pulling the contents of a file called “product-template.liquid” from your sections folder. The reason this is done is because section files have a special portion of their code called the schema:
{% schema %}
//settings here
{% endschema %}
The schema is a JSON structured code snippet that houses all of the settings that the end user can manipulate through the “Customize” menu, the visual editor. So if you press the purple Customzie link next to Actions in Themes, it’s the editor that comes up. You can then select the sections on the sidebar and when you pick one, a bunch of settings come up that you can manipulate. All of that stuff is set through the schema.
There are two types of sections, static and dynamic. Static sections are like the ones I mentioned earlier, like your header and footer and are output directly in the code:
{% section 'header' %}
Dynamic sections are the sections that you can drag around on your homepage. If you open index.liquid you’ll probably only see this:
{{ content_for_index }}
That’s just a shopify object that outputs all of the dynamic sections that you have set up on your homepage through the customize editor. So to recap:
{{ content_for_layout }}
Outputs a template file. If you’re on the index page, that outputs {{ content_for_index }} which is an object that outputs all of the dynamic sections you have set through your customize editor.
If you’re on a product page, it outputs product.liquid from your templates folder, which generally pulls from a section file associated with it called “product-template.liquid”. Same for other template pages. Usually collection will point to “collection-template.liquid”, the cart page will point to “cart-template.liquid”, etc.
I know that’s a lot more information than you asked for, but if you’re going to be designing in shopify it’s reeeeeaaally helpful to know how things work so you can track pieces of code down. So to answer your question, open your customize editor and look at the header. Can you move it around on the homepage? If not, it’s a static section. Open theme.liqid and ctrl+f and search for “section”.
See if you can’t find something that looks like {% section ‘header’ %} – if you see that, you can either edit the existing “header.liquid” file in your Sections folder, or you can create a new section and set up some settings for your client and develop around that. Alternatively, there are also snippet files, which are practically the same thing but without schema settings. They can be output via:
{% render ‘header’ %} or {% include ‘header’ %}<-- would pull the contents from header.liquid in your snippets folder (include is depreciated, I suggest using render).
You can do anything with HTML in those files, as well as CSS and JS as long as you include and tags.