Shopify Template Introduction

Image

Being a Shopify merchant, you’re always on the go of finding ways to improve the look and feel of your online store. One of the effective ways that you can use to achieve that is through Shopify templates.

Unfortunately, physical stores have given tough competition to e-commerce businesses since it gives customers an option to view products in person, touch them, and feel the quality.

No doubt, it is hard to compete with digital stores. Being an e-commerce store owner, this is the biggest obstacle that you might face: recreating the look and feel of your store and enhancing the store experience technologically.

So, are you struggling to create a great experience for your visitors or customers? Yes? Don’t sweat it!

With the Shopify templates, you can enhance the productivity of your store such that you beat the brick-and-mortar experience.

In this blog, we’ll talk about Shopify templates in depth and discuss the main template types that you can use for your Shopify store.

We’ll cover many template types in this blog, our motive is to help you identify templates that deliver results for your business.

What are Shopify Templates?

Templates in Shopify are referred to each page type in a theme.

Each type of page in an online store has an associated sort of template. With that, you can add any custom functionality that makes sense for that page. For instance, you can add reviews to a product template, or even some blog recommendations to an article template.

With templates, you can create many versions of the same template type for different use cases. For instance, you can create a product template for makeup products and a separate page template for apparel.

Where are templates stored?

The files of templates are located in the templates directory of the Shopify theme:

└└── theme
	├── layout
	├── templates
	|   ├── 404.json
	|   ├── article.json
	|   ...
	...

What are the different template file types?

There are two different template file types in a Shopify theme. These templates can be used to build various template types.

The two file types for a theme template are:

  • JSON: JSON templates are marked with the .json file extension that can allow you to create templates with content from the sections. With it, you can easily add, remove, or rearrange the sections.
  • Liquid: Liquid templates are marked with the .liquid file extension. It allows you to add HTML codes directly to the Liquid templates. Liquid code needs to be entered in a section linked to a template.

What are templates types in Shopify?

Each template type in Shopify represents a particular type of content in an online store. While creating any page, you need to have a matching template type that you want to render. For instance, if you’re willing to render a product page, you need to have a template of the type of product.

If we talk about JSON templates, then you have a maximum of 1000 templates in it across all the template types. For instance, you can create 30 JSON product templates, 15 JSON page templates, and 10 JSON collection templates, then you can create more templates up to 945.

Below are some of the template types that you can use in your Shopify store theme.

1. index:

The index template is used to render the home page of an online store. It is located at the root URL (/). This is the first page that a customer visits and it marks their first impression. Thus, the index template should consist of various functionalities for online merchants.

index page template

The index template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── index.json
	|   ...
	…

2. page:

The page template is used for rendering the Shopify store’s pages which include About Us or Contact Us.

404 page template

The page template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── page.json
	|   ...
	... 

3. product:

The product template helps render the product page that includes a brief description of its content, pictures, and videos. It helps the customers to select their variant and add it to the cart.

404 page template

The product template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── product.json
	| 	...
	…

4. 404:

The 404 template is used to render a page section or content that is displayed when a visitor or customer clicks or enters an invalid URL for the Shopify store.

404 page template

The 404 template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── 404.json
	|   ...
	…

5. cart:

The cart template is used to render the cart page that displays an overview of the content of a customer’s cart page. Well, it is generally shown in the form of a table since it eases out the process.

 cart page template

The cart template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── cart.json
	|   ...
	…

6. article:

The article template is used to render the article page that includes full content of the post or article. It also contains a comments section for the visitors. It is used for individual posts in an article.

article page template

The article template is located in:

└── theme
	├── layout
	├── templates
	|   ├── 404.json
	|   ├── article.json
	|   ...
	…

7. blog:

The blog template in Shopify is used to render a blog page that contains all the articles listed within a blog.

blog page template

The blog template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── blog.json
	|   ...
	…

8. collection:

The collection template is used for rendering a collection page in an online store. It lists all the offerings (or rather say products) within a collection page.

collection page template

The collection template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── collection.json
	|   ...
	…

9. list-collections:

The list-collection template is used to render the page where all the store’s collections are listed. It is located at the /collections URL of the Shopify store.

collection list page template

The list-collection template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── list-collections.json
	|   ...
	…

10. password:

The password template is used to render the password page in the online store. Basically, it is a page that is shown when password protection is applied to any Shopify store. It contains a text or message that is editable by the Shopify merchants and the password form for the visitors or customers to access the store.

password page template

The password template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── password.json
	|   ...
	…

11. robots.txt.liquid:

The robots.txt.liquid renders the robots.txt file that includes data for the search engines of which pages to be or not to be crawled by the bots. It is hosted at the /robots.txt URL. Well, Shopify generates a robots.txt file by default, and thus, it isn’t included in any themes.

This file contains a set of rules and regulations, such as:

The user-agent which includes notes for the bots. For instance, adsbot-google.

A note which contains specific URLs that bots can or cannot access.

A sitemap URL of the store (it’s optional).

The robots.txt.liquid template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── robots.txt.liquid
	|   ...
	...

If your theme doesn’t include robots.txt.liquid template for your Shopify store, then here are the steps that can help you add templates:

  • Login to your Shopify admin panel. From there, go to the Online
  • Store and select Themes.
  • Go on and select the theme you wish to edit. Click on Edit Code.
  • Scroll through the left side panel. Under the Templates heading, click on Add a new template.
  • In Create a new template, select robots.txt.
  • Lastly, click on Create template.

12. search:

The search template renders the search page of the store that showcases the outcomes of the store’s search.

search page template

The search template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── search.json
	|     ...
	…

13. customers/account:

The customers/account template is used to render the customer account page that gives a detailed overview on the customer’s account.

customers account template

The customers/account template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	| 	├── account.json
	| 	...
	…

14. customers/activate_account:

The customers/activate_account is used to render the customer account activation page that includes a form for activating the customer account.

The customers/activate_account template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	|     ├── activate_account.json
	|     ...
	…

customer activate account template

15. customers/addresses:

The customers/addresses template renders the page where customer enters their address. Also, it enables them to view and manage their saved addresses and add new addresses.

customers address template

The customers/addresses template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	| 	├── addresses.json
	| 	...
	…

16. customers/login:

The customers/login template is used to render the login page for the visitors or customers. It displays the login form for the customer account.

customers login template

The customers/addresses template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	| 	├── login.json
	| 	...
	…

17. customers/order:

The customer/order is used to render the customer order page that showcases the brief of a customer’s past and current orders.

customers order template

The customer/order template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	| 	├── order.json
	| 	...
	…

18. customers/register:

The customers/register template renders the customer register page. It includes a form for the customer account creation.

customers register template

The customers/register template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	|     ├── register.json
	|     ...
	…

19. customers/reset_password:

The customer/reset_password template is used to render the password reset page. It includes a form for resetting the password of a customer’s account on the store.

customers reset password template

The customer/reset_password template is located in:

└── theme
	├── layout
	├── templates
	|   └── customers
	|     ├── reset_password.json
	|     ...
	…

20. gift_card.liquid:

The gift_card.liquid template is used to render a gift card page that showcases a gift card being issued to a customer upon buying anything from the store. The gift card pages are hosted on checkout.shopify.com domain.

gift card page template

The gift_card.liquid template is located in:

└── theme
	├── layout
	├── templates
	|   ...
	|   ├── gift_card.liquid
	|   ...
	...

Conclusion

Shopify templates can help you develop an appealing and functional storefront for your business. It can help you create an amazing customer experience that mimics the physical storefront that customers want.

No doubt, it requires some technical know-how of the platform. If you’re looking for a developer to get you started with it, reaching out to us can help you. We offer everything you need to get started with an e-commerce store.

If our blog helped you, don’t forget to share it amongst your circle and let us know if you need more help from our end, we’ll be happy to assist you!