Difference between revisions of "Creating a custom landing page"
From Spiffy Stores Knowledge Base
m |
|||
| Line 1: | Line 1: | ||
| − | + | ''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 | + | 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. |
| − | # 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. | + | # 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. --> |
| − | # Create a new file with your design and upload it to the | + | # 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. |
| − | # Edit your page.liquid file, and enter the following line at the top | + | # Edit your '''page.liquid''' file, and enter the following line at the top:<br><pre>{% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}</pre> |
| − | If you now load your page into a browser | + | If you now load your page into a browser, for example, ''<nowiki>http://yourstore.com.au/pages/your-page-handle</nowiki>'', you will see that your new page uses the new layout that you have specified. |
| − | For more information about the | + | For more information about the '''layout''' tag, see [[Liquid Tag Reference#Specifying an Alternative Layout]] |
Revision as of 14:21, 7 March 2014
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.
- 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.
- 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.
- 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, 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