How to set a category page as your landing page

This tutorial will show you how to set a specific, curated category to be the first thing your customers see when they land in your shop, instead of the "All items" category that is set by default. On specific category pages you are able to display 500 products – as opposed to the "All items" category, which can display a maximum of 100 products. Please be mindful of this, as it might only seem like a benefit at first, you also need to make sure that you keep your landing page loading times in check.

Psst.. If you found your way here from the "Change your shop's landing page" article, you can skip to step 7.


1. Go to your Dashboard and click on Settings > Store Design.



2. Click on the </>-icon to access your shop's HTML and CSS code.



3. Scroll down to find the {{#list_page}} tag which designates the "All Items" page. The screenshot below shows the Reconnaissance theme, but you can search for the same tag in any theme code by pressing Ctrl+F if you are using Windows. If you are on Mac, use cmd+F.



4. Right above the <section id="products"> tag, add these tags:

{{#on_index}} 

{{/on_index}}

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



5. Find and copy the URL to the category you wish to set as your landing page and add it within the on_index tags. Make sure that you use your Tictail URL and not your custom domain if you have one. It should look like this (be sure to replace the placeholder link with your own category link!):

{{#on_index}} 

<meta http-equiv="refresh" content="0; URL=http://www.yourstore.tictail.com/products/your-product-category/">

{{/on_index}}

Please note, implementing the the code above will prevent your theme code preview from displaying properly. Unfortunately there is no way around this. More info about this at the bottom of the article.


6. Now your curated category will be the first thing visitors see when they arrive to your custom shop! You could stop here, but as you might notice the products under "All items" are currently being displayed for a second before being redirected to your chosen category page. To fix this, please follow the step below.

7. First, place this tag right above the <section id="products"> tag:

{{^on_index}}

Secondly, add this tag right above the {{/list_page}} tag:

 {{/on_index}}




What this does is tell your shop not to load the content that is placed within the {{^on_index}} and {{/on_index}} tags on your landing page. In this case, that would be the "All Items" category. The customer can still access your "All Items" category by clicking on the specific category - it just won't load on your landing page.

8. Go have a look at your beautiful new landing page! Should be looking awesome, just like our new landing page - the "Apps" category :)


Please note, making this change will get in the way of your ability to preview your code edits when hitting "Preview". Since the refresh meta tag is redirecting away from the page the preview is trying to display, it will make the preview frame on the left hand side unable to load properly. So when you're editing your theme, if you need to preview your code, temporarily hide the refresh meta tag while previewing by adding these comment tags (arrows) around the code:

<!-- meta http-equiv="refresh" content="0; URL=http://www.yoursite.com/products/your-product-category/" -->


Have more questions? Submit a request