Creating a custom landing page - Revision history

Admin at 04:40, 7 March 2014

2014-03-07T04:40:09Z

Shawn at 04:24, 7 March 2014

2014-03-07T04:24:43Z

Shawn at 04:23, 7 March 2014

2014-03-07T04:23:58Z

Admin at 04:21, 7 March 2014

2014-03-07T04:21:39Z

Shawn at 04:16, 7 March 2014

2014-03-07T04:16:45Z

Shawn at 04:00, 7 March 2014

2014-03-07T04:00:51Z

Shawn at 04:00, 7 March 2014

2014-03-07T04:00:11Z

Shawn at 03:59, 7 March 2014

2014-03-07T03:59:03Z

Shawn at 03:58, 7 March 2014

2014-03-07T03:58:22Z

Shawn at 03:57, 7 March 2014

2014-03-07T03:57:31Z

@@ 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.
-# 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 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:<br><pre>{% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}</pre>

@@ Line 5: / Line 5: @@
 # 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 - substituting 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>
 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.

@@ Line 5: / Line 5: @@
 # 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:<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 - substituting 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>
 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.

@@ 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.
+''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.
+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 content in this page will not show up in your layout.<br><br>
+# 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.<br><br>
+# 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;<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:<br><pre>{% if page.handle == 'your-page-handle' %}{% layout 'name-of-your-layout' %}{% endif %}</pre>
-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.
+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 Layout tag, see [[Liquid Tag Reference#Specifying an Alternative Layout]]
+For more information about the '''layout''' tag, see [[Liquid Tag Reference#Specifying an Alternative Layout]]

@@ Line 3: / Line 3: @@
 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.
-# 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.<br><br>
+# 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 content in this page will not show up in your layout.<br><br>
 # 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.<br><br>
 # 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>

← Older revision		Revision as of 04:00, 7 March 2014
Line 9:		Line 9:
	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.		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~~]]	+	For more information about the Layout tag, see [[Liquid Tag Reference#Specifying an Alternative Layout]]

← Older revision		Revision as of 03:59, 7 March 2014
Line 9:		Line 9:
	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.		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.

−	~~http://www.spiffystores.com/kb/~~Liquid_Tag_Reference#Specifying_an_Alternative_Layout	+	For more information about the Layout tag, see [[Liquid_Tag_Reference#Specifying_an_Alternative_Layout]]

← Older revision		Revision as of 03:58, 7 March 2014
Line 8:		Line 8:

	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.		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.
		+
		+	http://www.spiffystores.com/kb/Liquid_Tag_Reference#Specifying_an_Alternative_Layout

← Older revision		Revision as of 03:57, 7 March 2014
Line 8:		Line 8:

	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.		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.
		+
		+
		+	=== Further Reference ===
		+
		+	* [[Liquid Basics]]
		+	* [[Liquid Variable Reference ]]
		+	* [[Liquid Tag Reference ]]
		+	* [[Liquid Filter Reference]]
		+	* [[Liquid Paginate Tag\|Pagination ]]