Changing your shop's landing page

By default, the "All items" page is the landing page for all Tictail shops. This guide will show you how to change your landing page - step by step. We will be working in the Reconnaissance theme, but it will be a similar process in all our themes.

To change your shop's landing page: 

1. Go to Settings > Store Design in your dashboard.

newmenu_storedesign_wide.png

2. To edit the HTML and CSS click the </> icon.

step2.png

3. Scroll down to find the {{#list_page}} tag which designates the "All Items" page.

step3.png

4. Right under the {{#list_page}} tag create a block and add these tags if they don't already exist:

{{#on_index}} 

{{/on_index}}

The content of your landing page should reside in this block as everything between the {{#on_index}} {{/on_index}} tags will be displayed when a visitor arrives to your shop (or alternatively clicks on your logo). 

step4.png

5. If you would like to hide the "All items" page or the list of your products from your landing page: 

Place this tag right above the <section id="products"> tag (which is where the code for the All Items page):

{{^on_index}}

Then, add this tag right above the {{/list_page}} tag which will close that block: 

  {{/on_index}}

The {{^on_index}} block will now not be rendered when a visitor arrives on your landing page; when a user goes to your shop or presses the logo they will only see what is written in the {{#on_index}} block and when they click the All Items page they will only see what is in the {{^on_index}} block, i.e all the products!

step5.png

And the result? Your brand-new landing page!

step6.png


Want to add an image or something else rather than just plain text?

Let's go through how to add an image to your landing page!

7. To use an image you need to add an image tag between the new {{#on_index}} {{/on_index}} tags that you just created. It looks like this: 

<img src="">

step7.png

8. Between the quotation marks in the image tag, you will need to include the link to your desired image. Make sure the quotation marks are still intact!

Please note: In order to use an image on your landing page it has to be hosted. This means that the image has to be accessible online, i.e has its own web address. It will not work with an image directly from your folders on your computer. Please note that Tictail cannot help you host your image.

step8.png

9. Click preview to view your changes. If you like what you see, click save - and you are done!

step9.png


If you want to use a specific product category as your landing page, we also have an easy to follow guide on how to achieve this! If you already followed this guide, you are actually just 1 step away and can skip straight to step 7 in this article!

If you have a theme which doesn't have the "All Items" button in the navigation bar or if you simply want a Home button in the navigation bar as well, take a look at this article.


Have more questions? Submit a request