Create new layout.

Solved
Doug17
Excursionist
17 0 7

Hi friends,

I am a designer looking to create a new header layout for my client.  I'm clear that there is no FTP so this leaves me wondering how I would accomplish this?  The theme itself has small boxes where small amounts of css or javascript can be entered, but what I'm trying to do doesn't suit this.  I am also aware that I can access the code for the theme, but through the browser.  Naturally, I'd like to use my IDE.

I had expected to easily be able to FTP in to the site, create a copy of an existing layout, make my changes and upload, but no dice.

Any helps is appreciated.

Thank you.

0 Likes
Ninthony
Shopify Partner
1905 286 746
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 <style></style> and <script></script> tags.

If my solution helped you, please like and accept as 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 :D
0 Likes
Doug17
Excursionist
17 0 7

Thank you for all the information Ninthony.

Am I limited to using my browser as the IDE though?

 

0 Likes
Ninthony
Shopify Partner
1905 286 746

This is an accepted solution.

You can use Theme Kit if you'd rather develop locally:

https://www.shopify.com/partners/blog/95401862-3-simple-steps-for-setting-up-a-local-shopify-theme-d...

 

I prefer to just work in the IDE, or if I want some slightly better syntax highlighting I work in Visual Studio and just copy and paste into the IDE.

If my solution helped you, please like and accept as 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 :D