Difference between revisions of "Creating a custom landing page"
From Spiffy Stores Knowledge Base
m |
|||
| Line 3: | Line 3: | ||
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. | 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 '''layout''' folder using WebDAV. Upload any supporting CSS files and images to the '''assets''' folder. | # 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, ensuring you replace 'your-page-handle' with the handle of your page, and 'name-of-your-layout' with the name of your layout file:<br><pre>{% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}</pre> | # 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:<br><pre>{% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}</pre> | ||
Latest revision as of 14:40, 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. 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 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, 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