Are you attempting to break free from your Shopify theme’s default page layouts and create unique, customized pages that truly captivate your audience? The customization of page templates allows you to craft landing pages, “About Us” sections, or even unique product displays that help your online store stand out in the crowd.  

In this post, we will walk you through the simple steps to generate a new page template in Shopify, empowering you to take control of your store’s design and elevate the shopping experience for your customers.

How to generate a new page template in Shopify

• Uses of page template
• How to generate new page template

Use of page template

Firstly, page templates are used to diversify the look and feel of a page. One page template can be used to variety of page, it can be applied to a single page, a page section, or a class of pages. Generally, page templates have a high level to target the right individual page or group of pages and make it more specific. You can also show the customers the dynamic content of your page through page template, such as collections, post, event updates, media or contact. You can decide the appearance of your page as you want and make it differs from your rival. With a page template, you are able to show a feature image that can links to another part on your page. All of these convenience and useful functions can be done by a new page template.

How to generate new page template

In order to assign to pages on which you will show collections, you will need to generate a new page template. Following are the steps for you to create a new page template

Step 1:

Go to your Shopify admin then click Online Store > Themes.

Step 2:

Click Actions > Edit code at the theme that you want to edit.

Step 3:

Choose Add a new template at the Template directory on the left side of the page.

Step 4:

A box Add a new template shows up, Choose page at the Create a new template for section then name it list-collections on the other section.

Step 5:

After create template, your new page.list-collections file will show up, then all you need to do is copy and paste the following code at the end of your file:

<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>

{% comment %}
  Collections are listed here.
{% endcomment %}
{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}
{% if uses_minimal_framework contains 'Liquid error' %}
  {% assign uses_minimal_framework = false %}
  {% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
  {% assign uses_minimal_framework = true %}
  {% assign grid_item_width = 'span3' %}
{% endif %}
{% assign image_size = 'large' %}
{% if linklists[page.handle].links.size &gt; 0 %}
  {% assign number_of_links = 0 %}
  &lt;div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix"&gt;
  {% for link in linklists[page.handle].links %}
  {% if link.type == 'collection_link' %}
{% comment %}
If we have a collection link.
{% endcomment %}   
{% assign collection = link.object %}
        {% assign number_of_links = number_of_links | plus: 1 %}
&lt;div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center"&gt;
          &lt;div class="grid__image product-grid-image"&gt;
            &lt;a href="/%7B%7B%20link.url%20%7D%7D" class="grid-image--centered"&gt;
            {% comment %}
              Bring in the featured image of the first product in the collection if no collection
              image has been uploaded for it.
            {% endcomment %}
            {% if collection.image %}
              &lt;img src="/%7B%7B%20collection%20%7C%20img_url:%20image_size%20%7D%7D" alt="{{ link.title | escape }}"&gt;
            {% else %}
              {% assign product = collection.products.first %}
              &lt;img src="/%7B%7B%20product%20%7C%20img_url:%20image_size%20%7D%7D" alt="{{ link.title | escape }}"&gt;
            {% endif %}
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="collection-grid__item-title"&gt;
            &lt;a href="/%7B%7B%20link.url%20%7D%7D" class="collection-item__title"&gt;{{ link.title }}&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '&lt;div style="clear:both"&gt;&lt;/div&gt;' %}
        {% endif %}
{% elsif link.type == 'page_link' %}
{% comment %}
        If we have a page link.
        {% endcomment %}
{% assign number_of_links = number_of_links | plus: 1 %}
{% assign linked_page = link.object %}                    
        {% assign have_image = false %}
{% comment %}
          Does the page contain an image? If so, let's use it.
        {% endcomment %}
{% if linked_page.content contains '&lt;img' %}
 {% assign have_image = true %}
          {% assign src = linked_page.content | split: 'src="' %}
          {% assign src = src[1] | split: '"' | first %}
          {% capture image_suffix %}_{{ image_size }}.{% endcapture %}
          {% assign src = src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}
 {% comment %}
          If the page contains no image, and that page features collections, let's grab the image of the first
          collection on it.
        {% endcomment %}
{% elsif linklists[linked_page.handle].links.size &gt; 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}
{% assign have_image = true %}
          {% assign collection = linklists[linked_page.handle].links.first.object %}
{% if collection.image %}
            {% assign src = collection | img_url: image_size %}
          {% else %}
            {% assign src = collection.products.first | img_url: image_size %}
          {% endif %}
{% endif %}
&lt;div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center"&gt;
          &lt;div class="grid-image product-grid-image"&gt;
            &lt;a href="/%7B%7B%20link.url%20%7D%7D" class="grid-image--centered"&gt;
              {% if have_image %}
                &lt;img src="/%7B%7B%20src%20%7D%7D" alt="{{ link.title | escape }}" /&gt;
              {% else %}
                &lt;img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" /&gt;
              {% endif %}
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="collection-grid__item-title"&gt;
            &lt;a href="/%7B%7B%20link.url%20%7D%7D" class="collection-item__title"&gt;{{ link.title }}&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
    
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '&lt;div style="clear:both"&gt;&lt;/div&gt;' %}
        {% endif %}
{% endif %}
{% endfor %}
&lt;/div&gt;
{% if number_of_links == 0 %}
&lt;div class="grid"&gt;
    &lt;div class="grid__item grid-item rte text-center"&gt;
      &lt;p&gt;
        There are no links of type &lt;i&gt;Collection&lt;/i&gt; in your &lt;b&gt;{{ page.title }}&lt;/b&gt; link list.
        Go ahead and &lt;a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank"&gt;edit your link list&lt;/a&gt; to use links that point to collections.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
{% endif %}
{% else %}
&lt;div class="grid"&gt;
  &lt;div class="grid__item grid-item rte text-center"&gt;
    &lt;p&gt;
      You do not have a link list with a handle set to &lt;kbd&gt;{{ page.handle }}&lt;/kbd&gt;, or you do and it's empty. 
      Go ahead and create a link list called &lt;b&gt;{{ page.title }}&lt;/b&gt; on your &lt;a href="/admin/links" target="_blank"&gt;Navigation page&lt;/a&gt; and populate that link list with links that point to collections, to see collections listed here.
      Make sure the link list also has a handle set to &lt;kbd&gt;{{ page.handle }}&lt;/kbd&gt;.
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
{% endif %}
&lt;style&gt;
  kbd { 
    background-color: #FBFBE4;
    padding: 1px 4px;
    border-radius: 3px;
  }
&lt;/style&gt;


</code></pre>
</div>
</div>

Step 6:

Finish this process by clicking Save.

Conclusion

This article has mentioned the process of creating custom page templates in Shopify, enabling you to break free from default layouts and design unique pages that enhance your store’s versatility and user experience. To fully leverage this functionality, we recommend exploring different Liquid objects and tags, experimenting with various layouts, and thoroughly testing your new templates to ensure they seamlessly integrate with your theme and provide a consistent browsing experience for your customers.

Related posts:

How to Create a Sale Collection on Shopify

How to Create & Manage Manual Collections on Shopify

How to generate a pre-order product page template on Shopify