Creating a custom landing page

From Spiffy Stores Knowledge Base

Revision as of 13:59, 7 March 2014 by Shawn (talk | contribs)

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 use 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;
    {% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{%endif%}

If you now load your page into a browser ( e.g. 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