Creating a custom landing page

From Spiffy Stores Knowledge Base

Note: This information is provided for web developers who have designed a custom landing page for a store. The information provided should not be attempted unless you are comfortable using HTML and CSS, and have a working knowledge of Liquid.

The layout tag allows you to override the standard theme.liquid layout used in your theme, and replace it with one of your own layouts instead. This tutorial shows you how to create a custom landing page.

  1. Create a new page in the "Pages & blogs" section of your store's Toolbox. Take note of the handle of the page after you have created it. The page can have text in it that you use, or not. It depends on whether you want to make the content editable.
  2. Create a new file with your design and upload it to the layout folder using WebDAV. Upload any supporting CSS files and images to the assets folder.
  3. Edit your page.liquid file, and enter the following line at the top, ensuring you replace 'your-page-handle' with the handle of your page, and 'name-of-your-layout' with the name of your layout file:
    {% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}

If you now load your page into a browser, for example, http://yourstore.com.au/pages/your-page-handle, you will see that your new page uses the new layout that you have specified.

For more information about the layout tag, see Liquid Tag Reference#Specifying an Alternative Layout


Further Reference