Template Suffix Shopify

admin 11/23/2021
74 Comments

Adding a custom page template to your Shopify theme will allow you to create custom Pages with only collections you specify. Marina Biome Brightening Ampoule is named for the treasured ocean-blue botanicals she possesses, Spirulina + Blue Tansy. She harbors highly-concentrated adaptogenic oils that vigorously brighten and balance for an even, radiant complexion. An overachiever, she works at a deep level optimizing skin's delicate microbiome.

Liquid has been used in Shopify since 2006 and becomes a popular language template for many website application. Liquid provides you with three main sources to upload the dynamic content on your front page; hence today tutorial will dig into one of the most noticeable features which are control flow with if/else statement.

Creating Additional Pages with Customiser Functionality

Shopify includes a huge amount of added features and benefits for its consumers, yet one of its current drawbacks is the relatively restrictive use of Customiser elements on every page. While Shopify does mention that it’s better to keep your Customise-enabled pages to less than 10, you’ll very often find that out of the box your website only caters to 1 or 2. This can be frustrating if you’re looking to add a more stimulating and visually appealing way to present data throughout your site!

First, you need to publish your theme template. The templates from which you can select are limited to the templates available in your currently published theme.

Step 1: Add a new template

First, go Online Store > Themes > Actions > Edit Code > Templates > Add new template.

Pick which page template you want to re-use. Make this new template of the ‘page‘ variety, call it ‘aboutus-2‘ and ‘Create template

Important: You must start the name you enter here with the word “aboutus” in order for all features to work. For example, entering “aboutus-2” (which becomes “page.aboutus-2.liquid”) or “aboutus-my-page” (which becomes “page.aboutus-my-page.liquid”) will work, but “my-page” (which becomes “page.my-page.liquid”) will not.

Step 2: Edit the template code

Remove all the code that is in the file you just created and replace it with this code:

Hit Save.

Step 3: Add a new section

Next, under the Sections folder, click ‘Add a new section’

Call this new Section ‘page-aboutus-2-template‘ and click ‘Create section

Step 4: Modify the section code

Template Suffix Shopify

Copy all the code from the page-aboutus-template.liquid into the new page-aboutus-2-template.liquid

Save.

Step 5: Change the template your page uses

Go to your Pages, select the page you want to have this different template applied to and then select page.aboutus-2 from the Template suffix option:

Then you’ll likely want to add this page to a menu in your navigation. After you’ve done that, you can configure the content blocks in the Theme Editor (customize).

In the shop preview, click on the page that has been assigned the page.aboutus-2 template and you will see options to add content blocks unique to that page.

Need even more pages?

This process can be repeated if you need still more different page content for different pages by creating more templates and sections and following the naming conventions as the above instruction, such as:

  • Template: page.aboutus-3.liquid
  • Section: page-aboutus-3-template.liquid
  • …and so on

If you find that your store is generating error messages or the theme editor does not load properly, you may have created too many page or product templates and will need to remove one or more to restore full functionality.

Not enough customisability for your store? We welcome email enquiries with what you need from your Shopify store and can provide a custom coded solution that best fits your needs ✌️

8

For this week's advanced Liquid Shopify tutorial, we'll be looking at a way to access product information without having to loop over a collection or be on a product detail page.

We can achieve this by using all_products. Here’s a quick example:

{{ all_products['coffee-cup'].title }}

Let’s have a look at what’s happening. The syntax is pretty simple: all_products takes a quoted product handle as its argument.

Or, learn how to build a customizable related products section.

Liquid Handles

If you aren’t familiar with handles, the Shopify docs provide a great explanation:

The handle is used to access the attributes of a Liquid object. By default, it is the object's title in lowercase with any spaces and special characters replaced by hyphens (-). Every object in Liquid (product, collection, blog, menu) has a handle. For example, a page with the title 'About Us' can be accessed in Liquid via its handle “about-us”.

In the above example, we have a handle of coffee-cup which represents the product available at yourstore.com/products/coffee. We follow that by .title. When rendered, this will output the title of the product with the handle of coffee-cup.

Using all_products we can access any property of the product:

all_products['coffee-cup'].available
all_products['coffee-cup'].collections
all_products['coffee-cup'].compare_at_price_max
all_products['coffee-cup'].compare_at_price_min
all_products['coffee-cup'].compare_at_price_varies
all_products['coffee-cup'].content
all_products['coffee-cup'].description
all_products['coffee-cup'].featured_image
all_products['coffee-cup'].first_available_variant
all_products['coffee-cup'].handle
all_products['coffee-cup'].id
all_products['coffee-cup'].images
all_products['coffee-cup'].image
all_products['coffee-cup'].options
all_products['coffee-cup'].price
all_products['coffee-cup'].price_max
all_products['coffee-cup'].price_min
all_products['coffee-cup'].price_varies
all_products['coffee-cup'].selected_variant
all_products['coffee-cup'].selected_or_first_available_variant
all_products['coffee-cup'].tags
all_products['coffee-cup'].template_suffix
all_products['coffee-cup'].title
all_products['coffee-cup'].type
all_products['coffee-cup'].url
all_products['coffee-cup'].variants
all_products['coffee-cup'].vendor

Note that some of the returned values will be a Liquid collection and because of this would need to be “looped” over. Let’s use the images collection as an example:

{% for image in all_products['coffee-cup'].images %} ​
<img src='{{ image.src img_url: 'grande' }}' /> ​
{% endfor %}

This example would output all of the images associated with the coffee-cup product.

More than one handle

You can go one step further and create a simple Liquid array of handles that you can use to output specific products. Here’s an example:

{% assign favourites = 'hand-made-coffee-tamper edible-coffee-cup' split: ' ' %}
<ul>
{% for product in favourites %}
<li>{{ all_products[product].title }}<li>
{% endfor %}
</ul>

Using the Liquid assign tag, we create a new variable called favourites, which are product handles separated by a character. The is used as a delimiter to divide the string into an array that we can loop over using for.

We now have access to both products in turn and can output any property associated with it — in the example above I simply display the title.

Custom Shopify Templates

When to use all_products

Template Suffix Shopify

all_products is a great option when you need to pull out a couple of products in a particular template, or when you might be building Shopify sections. Of course, if you are outputting a lot of products, a collection is still the best way forward — principally as you won’t have to manually know all the different product handles. However, all_products makes a great option when you have need of outputting a single, or small number of products, that won't change frequently.

Website Templates For Shopify

You might also like:An In-Depth Look Into Designing a Shopify Theme