Creating a custom page

The default themes provide you with the most common pages ready-made, but what if you want to add a new page? A contact page separate from your About page, or maybe a page containing something completely different?

You can do this yourself with a mix of HTML and Tictail’s own template tags. First let’s have a look the template tags:

{{#contact_page}}
Contact us via email on hello@shopname.com!
{{/contact_page}}

What you see here is an example of a custom content page. # is where the tag opens a new content section, and / is where it ends. Contact is the actual name of the page, and the _page tells our system that we are referring to a page. In between these tags we can add anything we want, like headlines, paragraphs, images and much more.

Keep in mind that you can name these pages whatever you like. For example {{#sizes_page}} if you want to create a page with size guidelines or {{#press_page}} if you want to create a page with information for press.

In this guide however, we will use contact_page as an example.

A custom page is created in three different HTML sections of your code, starting from the top of the code editor and downwards we will explain each of them separately.

  1. Give your page a title
  2. Create the navigation link
  3. Adding the custom page and content


Ok, so let’s create the contact page for our shop!

1. Go to Settings > Store Design in your dashboard and click the </> icon.

step2.png

2. At the very top of the code editor, we give the page we are creating a title that will appear in the user's browser tab, as well as help you with SEO for your new page.

The easiest way of doing this is to copy the about page title string, and change the information so that it matches the new page that you are creating. In this example since we are creating a contact page we changed about to contact.

step2.png

3. Scroll down in the theme code in search for the section where the navigation links for all of the pages in our store is located. The navigation link is needed for your visitors to know that there is a custom page, and to provide an actual link to go to that page and content.

Read our separate guide on how to create a new navigation link here.

Below is how the navigation section looks after we've added the navigation link for the contact page that we are creating.

step3.png

Time to create the actual content page!

We’ve created a title and navigation link and it’s time to add the actual page and content.

4. To do this, we first locate the other content page sections in the theme code. It’s easily found by searching for the about_page or scrolling down to the bottom parts of your theme HTML code. In this area, you create your new page by adding the new page tags. In this case {{#contact_page}} {{/contact_page}}. Everything you put between these tags will be visible on your new contact page. In the example image, we’ve added two paragraphs, one for our contact email and for our phone number.

step4.png

5. Click save, and we are done!

step5.png

If you go to yourshop.tictail.com/contact you will now see your new contact page - yay! If you want to learn more about HTML and CSS, we suggest that you check out Codeacademy.com.

Have more questions? Submit a request