How can I make changes to my blog template without affecting my live website?

Developer Support CMS Development
,
1

Hi there,
I wanted to know how I can review my changes to the blog template without affecting the live website as I need to add a section to the blog template. Also, can someone guide me on how to add global settings for showing and hiding sections in the blog template?
Thanks a lot.

2

Hi @FurqanAli,

to apply changes to a non-drag&drop blog (listing) page you could

  1. duplicate the template
  2. apply your changes
  3. create a new blog (for testing reasons) with a few “lorem ipsum” posts
  4. apply the “new” template to your test blog
  5. test it
  6. if it works like you want
  7. apply the template to your main blog
  8. delete your test blog

For a drag&drop blog (listing) page you could edit the blog listing without saving/publishing and preview your changes. If your done, publish the changes

There are multiple ways to go how to toggle sections globally. If you’re familiar with JSON you could edit the fields.json of your theme by adding a “Show section” boolean into into (I recommend to put it somewhere in the blog tab if you got one) and create a simple if-statement in your template.

It would look something like this

fields.json

...
,{
"name": "blog",
"label": "Blog",
"required": false,
"locked": false,
"children": [
 {
 "name": "show_section",
 "label": "Show section",
 "required": false,
 "locked": false,
 "type": "boolean",
 "inline_help_text": "",
 "help_text": "Toggle visibility of a section in the blog",
 "default": false }
],
"type": "group",
"inline_help_text": "",
"help_text": "",
"default": {} 
}

template.html

{% if theme.blog.show_custom_section %}
...
Your section layout/module
...
{% endif %}

important: in this example it’s just “theme.blog.show_custom_section” because it’s in the blog group. If you put it in a different group you’ll need to change the path.

Another way would be to create a custom global module for the whole section with a boolean. It should look like this:

module

{% if module.show_custom_section %}
...
Your section module layout
...
{% endif %}

template.html

...
{% module "custom_blog_section_module" path="PATH-TO-THE-MODULE", label="Custom Section Name" %}
...

the easiest way to get this code is to copy it either from the very bottom of the right sidebar in the module view or by right-clicking on the module in the design-tools finder and selecting “copy snippet”.

Hope this helps,

best,

Anton

3

@Anton thanks for the great answer can you please let me know once we add the additional JSON in fields.json where will the field will show for hiding and showing of blog section?

4

Hi @FurqanAli,

sure - you’ll find the field in your theme settings.

The theme settings are located here

Hub Settings(cog icon top right corner) > Website > Designs > YOUR THEME NAME

If you added it in the blog group you should see it there

best,

Anton