Customizing your blog and blog post pages

JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 277 moderator
edited February 2020 in Theme and Design

In this article I will explain how to customize your blog and article pages. Even tho these pages are not available in the theme editor we can use a few tricks to customize these pages.

Please note that the following article is intended for more advanced users that know their way around the theme editor, HTML, CSS and Rain. The eCom support team is not trained for these kind of customizations and thus this is out of scope, if you have questions please ask them in the comments and post your code.

Be aware: the following customization requires the theme editor to be enabled, know the consequences!

Let's get started!

What to do

There are four main parts to this customization:

  1. Check the template in the fixed.rain file and include the blog and/or article snippet
  2. Create the new snippets
  3. Customize the snippet with HTML and Rain
  4. Style the new pages using CSS

Part 1

We need to check the template that is being requested when the page is loaded.

Open the fixed.rain layout file and search for {% include template %}

Replace this code with:

{% if template == 'pages/blog.rain' %}  
  {% include 'snippets/customblog.rain' %}
{% elseif template == 'pages/article.rain' %}
  {% include 'snippets/customarticle.rain' %}
{% else %}
  {% include template %}
{% endif %}

The snippet names customblog and customarticle are made up, you can change these if you want.

Part 2

The snippets referenced in step 1 need to be created:




Part 3

If you load the blog or article pages now you will see that they are blank. The empty snippet is loaded instead of the default eCom template so time to get moving!

Open the customblog.rain snippet and start adding your code. We are not going through the full design but the basics.

Open the developer toolbar by searching in the store front: tb/show

You now have access to all the variables on the page, a few examples are:

<!-- Basic blog info -->
<h1>{{ blog.title | t }}</h1>

<!-- Get the most recent articles but limit by 2 -->
{% for article in blog.recent | limit(2) %}
  {{ article.title }}
{% endfor %}

<!-- Get all the tags related to this blog -->
{% for tag in blog.tags %}
  {{ tag.url }} {{ tag.title }} {{ tag.count }}
{% endfor %}

<!-- Get the blog articles -->
{% for article in blog.articles %}
  {{ article.title }}
  {{ article.url }}
  {{ article.image | url_image }}
  {{ article.summary | limit(100) }}
  {% for tag in article.tags %}{{ tag.title }}{% endfor %}
{% endfor %}

The above is just to give you an idea of what you can access and where, I recommend exploring the dev toolbar to it's fullest so you get to know all the variables.

A few tips:

  • Make sure text is translatable by using the |t filter: {{ blog.title | t }} or {{ Recent articles | t }}
  • Have a look at the Rain Filter documentation.
  • Most themes use Bootstrap, you can try Layoutit to easily build your design, then just copy and paste.
  • Check the classes your existing theme is using to make your new page fit in.

Part 4

Once the structure is done it's time for the styling. There are two ways to go depending on the amount of CSS you are adding.

  1. If you don't have too much CSS navigate to Design -> Theme Settings -> Custom CSS and just add it in there.
  2. If you have much more CSS or just want to keep the code clean create a new Asset file in the theme editor. and include it in the fixed.rain file.

That is it for the Blog page!

Next is the Article page, this is pretty much the same as the blog page but with different variables. As this is self explanatory I will leave it with this.

If you have any questions or want to share your design let me know in the comments!

eCom Support Team
Lightspeed HQ

1 comment

  • ngomez10ngomez10 Member Posts: 1

    Thank you for this information. Is this the same way we would add custom html to a single page? Then 'include' our 'assets/FILENAME.css' into that html?

Sign In or Register to comment.