Shopify blog liquid template

When building or customizing Shopify’s blog post templates, you’ll likely find yourself working with two different, yet related Liquid objects—article and blog. Let’s take a look at what properties we can access using these objects. As it suggests, the article object relates to individual articles, and will allow you to output attributes of individual blog posts, such as article titles, article authors, and article publish dates.

You can find a full list of available attributes for the article object in our Help Center. Very often a merchant could have a range of different blogs, which cover different topics. For example, a client could have one blog for ‘News’, and another for ‘Case studies’, with different articles associated with each.

See full list on shopify. Sometimes, clients may want to write blog posts under an alias, or they may feature a guest blogger who they would like to credit as the author. By default, Shopify themes will display a blog post author based on staff admin accounts—but it’s possible to edit the article template and display any author name you would like. Ideally, we’d like a custom name to appear on blog articles without a client needing to access the code of a theme, so we can set up some rules that will output a specific author name based on the tags that are associated with a blog post. This way, you can provide an experience to your clients which is as frictionless as possible.

Let’s imagine our client has a guest blogger called Ana Smyth, who contributes articles as part of our client’s content marketing strategy. When buyers are reading your client’s blog articles, they may want to continue reading similar articles, and reducing the barrier to accessing these will improve the usability of their online store. A setting for optional previous and next article buttons gives users another level of navigation, and allows them to easily browse more blog articles.

The first step here wo. We can link these object attributes to buttons on the article page, and use section settings to create an option to display the buttons. A basic container for these could look like: You can see here that we have two link elements that are po. By making the blog article page more feature-rich, with intuitive settings and navigation, you can add additional value to your custom theme projects. You can also experiment with customizing existing dynamic sections and making them more suitable for blog posts.

Flexibility is crucial to your clients when they’re designing their blog posts, so if you can add functionality to article pages in a way that can be empowering for your clients, you can set them up for success. Tell us your experience in the comments below! It does this by allowing us to access variables from within a template , or Liquid file , with a simple to use and readable syntax. What is liquid file in Shopify?

How do Shopify themes work? If you are new to Shopify themes, product. Liquid template language reference Liquid is a template language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, and used by many different software projects and companies. Liquid is the backbone of all Shopify themes, and is used to load dynamic content to the pages of online stores.

For more information on the available templates , please see Building themes. Before we dive into the Liquid filters and tags, let’s take a look at the element in plain old HTML. Before HTML there was no semantic element to markup date or time, and Microfromats and Microdatawere mostly relied upon to fill specific use-cases. This makes it possible to represent time in a machine-readable format when text or a more human-readable version of the date, time, or duration falls between the HTML tags. In Shopify’s Liquid language, the date filter converts a timestamp to another date format.

For example, a blog article will have a published_at attribute, a Liquid object on which we can apply the datefilter. For creating custom formatting, try using a site like strfti. It’s important to note that the output of date isn’t translated into other languages.

This can be useful if you need to output just the date into a tag so you can control the markup around it. You might also like: Announcing Shopify Liquid Code Examples for Partners. It can take date parameters, and doesn’t affect the value of the datetimeattribute set on the tag. As mentioned earlier, the date format isn’t translate so there’s also an option to create specific date formats inside a theme’s local settings, or to give the ability to change the date formatting from the theme editor.

From there in your theme you can pass the formatparameter in Liquid. That’s everything you need to know about date formats in Shopify themes! You might not think it, but there are a lot of places in an online store where you can specify and take advantage of templated date formats. Here are just a few: 1. Blog posts publication dates 2. Order confirmation 4. Products (Back in stock on _____ , or In stock after _____ ) 6. Footer and Copyright Happy formatting!

If you’re using Slate, you can create a alternative template straight from your local text-editor when you run the slate watchcommand. Changes will be pushed to your theme when you save. Otherwise, you could use the Template Editor to make these changes from the admin. First, we’ll need to open our theme’s templates folder and find the template we would like to edit.

For example, if I have a range of shoes that I would like to add a custom message to, I would be creating an alternative for product. Once we’ve identified which template we’re going to edit, we’ll need to copy all the code in this file. Depending on the theme you’re editing, you might notice that there’s very little code.

This is because most of the code that makes up the product page is stored in a section file, rather than a template file. After we’ve copied this code, we can create a new file in our template folder using the fol. If your clients have a complex arrangement of products that require custom content, you may find yourself creating a counterproductive amount of alternative templates. Having too many templates and sections will affect your workflow when making customizations, and it’s generally considered best practice to minimize the amount of code your client’s theme contains. It’s possible to avoid making too many alternative templates by setting up conditional rules with control flow tags, to display content based on the attributes of a product or page.

Thankfully this can be solved with some clever uses of Liquid. These control flow tags could be included in the main section of a page, bypassing the need to create additional sections or templates for a particular set of products. For example, if I wanted all the bags in my store to display a certain message, I could set up conditional rules based on the product type or product vendor. Finally, there’s one other option for template selection that you have at your disposal. That is being able to select a particular template using the view querystring.

In this case, I could assign a product type of ‘bag’ to my. This will allow you to view a product or page on an alternative template by adding the templates name to the URL of the page. In this instance, Shopify will load a product template called: product.

A really common use case for this technique is switching between a list and grid view within a product collection. Alternate templates are a great example of the power of Shopify themes. By taking a few minutes to understand how to create them, apply them, and even switch them via a querystring, you start to expose the power of the platform and offer your clients, and their customers, even richer ecommerce experiences.

Share your experience in the comments below! Have you used alternate templates? This section allows merchants to customize the content that appears on the password page. This static section can be added to the password template file and merchants can customize its content from the theme editor. Shopify Theme Store includes over 1free and premium professionally designed ecommerce website templates that you can use for your own online store.

Learn how to buil sell and maintain Shopify apps. I would like to create a secondary template to have the option to remove the Quote Request form on some blogs, if we are using a different form (or some other need to remove the form) on that post. For both beginner and advanced developers, understanding Shopify ’s Liquid is imperative to supporting your ecommerce clients. Customize your Shopify theme’s blog templates.

A fourth and often overlooked option is to customize your theme by modifying the Shopify blog templates : blog. You’ll get the ease of administration and SEO benefit from the Shopify hosted blog, while still being able to have a customized blog that fits your brand. Alternatively, Redownload the theme, and use the liquid file you deleted from the new version.