How to create a custom page

Tourist
6 0 0

Hello, we have inherited a modified Impulse theme (v1-5-5) from our parent company and we want to customise the theme further with a new homepage and product page.

 

We would like to deploy these as B-tests (where A would be the original themed pages we inherited).

For this reason, I have to create new pages instead of modifying the existing ones.

 

I've followed this course and successfully connected to our Shopify account, downloaded the theme locally and successfully managed to create a couple sections modifying existing pages that we don't care about, but to work on an alternative home page I need to create a new one.

I don't understand/don't seem to find a wat to do this.

 

If I create a page from the back-end (the customiser) this won't sync to the local installation (ofc).

If I create a template and sync with the theme, I don't see that in the dropdown when creating a new page either.

 

Screenshot 2019-08-15 at 13.34.26.png

 

 

Screenshot 2019-08-15 at 13.38.13.png

 

~~~

 

Hope all this is clear enough.

What do I need to do?

0 Likes
Astronaut
884 105 197

Your homepage is always going to be index.liquid. You'll need to duplicate your current theme in the Admin, then connect to that specific theme with Themekit and edit index.liquid. However, if your store uses Dynamic Sections (sections you can edit in the customize editor and move up and down the page at your will) all you will see when you open index.liquid is:

 

{{ content_for_index }}

This renders everything you have set in your customize editor. If you'd like to start building a homepage with just HTML, CSS, and Liquid -- and forego the dynamic sections -- just comment out content for index and start designing:

 

<style>
.container {
text-align: center;
font-size: 60px;
padding: 20px;
}
</style>
{% comment %}
{{ content_for_index }}
{% endcomment %}
<div class="container">
Hello world!
</div>

This will just give you Hello world! in a large font in the center of the screen. Your header and footer files will probably be static sections inside of "theme.liquid" in your layouts folder. Theme.liquid applies to your whole site. So you'll probably see something like:

 

{% section 'header' %}

{{ content_for_layout }}

{% section 'footer' %}

{{ content_for_layout }} renders something different depending on the template you are on. If you're on the homepage, it renders index.liquid (which in dynamic sectioned themes means  it renders {{ content_for_index }}), if you're on a page it renders page.liquid, if you're on a collection it renders collection.liquid and so on. 

 

So to edit your header and footer you'd go into your section folder or snippet folder depending on how they are included -- if they say section before the quotes you'd be looking for a section, if it says include you'd be looking for a snippet -- and then edit your files "header.liquid" or "footer.liquid" assuming that's what they are named. 

 

Hope this clears some things up.

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
1 Like
Highlighted
Tourist
6 0 0

That is a very detailed and clear response Ninthony, it makes a couple things more clear... but I don't think it solves my problem.

 

I don't want to simply modify the homepage (index.liquid), I want to have a second one altogether (index-2.liquid or whathaveyou).

 

The Themekit setup is working fine, I am editing templates and sections and seeing changes. The section I've created works beautifully with the customiser (see video).

 

My problem is creating completely new pages and inspect them in the customiser.

I would expect to do so I would have to:

  1. create a template
  2. create a page in the customiser and pick the template created at (1)
  3. edit the template and add section/snippets at will
  4. profit

but when I go about to do that, I can't see templates available to pick in the dropdown (as per screenshot in my original post).

 

0 Likes
Astronaut
884 105 197

I guess I'm not completely understanding. Are we talking about pages? Or the homepage? In the original screenshot you are creating a page. To use an alternate page template you would go into your Templates folder in the code editor admin, click Add a new Template, select page from the dropdown, and name it whatever you want "eg alternate-page". I don't know if you can do this in themekit as I primarily just use the code editor, but I would imagine you could just create a new file called page.alternate-page.liquid and save it in your directory and copy the contents of page.liquid into that to achieve the same effect. 

 

This would create a page.alternate-page.liquid file, which you can then select from the dropdown menu when creating new pages. It is important to note that if you create a template on a non-published theme, you will not be able to select it from the dropdown. The dropdown pulls the templates from the live theme. 

 

I do see that you can  create a new index template, though I have no idea how you can implement that. This person on stackoverflow may be facing a similar situation to you:

 

https://stackoverflow.com/questions/44497322/creating-a-secondary-index-page-with-identical-sections...

 

 

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