Modules Not Showing on HTML HubL file

Developer Support CMS Development
,
1

I’m working on creating a new page template using the current HTML + HubL file format. As I try to understand how the page is structured, I’ve been adding separate modules between sections to build a brand-new layout.

However, the new modules I’ve added aren’t showing up—despite using the correct file paths. Strangely, I can still see the original modules that I copied over from an existing template. Wanted to know if this is the right format.
_

{% extends “./layouts/base.html” %}

{% block body %}

{% dnd_area “dnd_area”
label=“Main section”,
class=“body-container shopify-page”
%}

{# Hero Banner Image Caption #}
{% dnd_section padding={ ‘top’:0, ‘bottom’:0,‘left’:0, ‘right’:0 }, vertical_alignment=‘MIDDLE’, full_width=true %}
{% dnd_module path=‘/main-folder/modules/hero-banner-image-caption’, label=“Hero Banner Image Caption” %}
{% end_dnd_module %}
{% end_dnd_section %}

…

…

{% end_dnd_area %}
{% endblock body %}

2

Hey @PYoganathan,

there’s a thing that’s not really documented:
HubSpot disconnects the page from the template and creates a non accessible and “non modifiable” version of the template, if you create a page from a dnd template and modify it on page editor level.

In other words:
If you have created a dnd page template, open the page editor, create a page, and edit it in any way(can be something simple like a “space”), HS will create a dedicated version of this template for this specific page. Any further modifications made to the template will only affect pages created after the changes.

There are two ways(and one for prod) how you can still get the newest version:

  1. If you’re just in the dev process and want to test things out → create a seperate page with the “new” version of the template
  2. Go to the settings of the page and re-select the template. HS will then try to mergethe content and modules from old to new.
  3. In production mode(working on a live page) I always recommend to use the staging environment to stage a live page, apply your changes and push the new version from staging to live, once done

From my experience it’s easier to create seperate pages during the development stage.

Also it might be helpful to use relative paths in the module path like “../modules/hero-banner-image-caption”

best,

Anton

3

This was really helpful! What I had been doing was going to Website Pages > Create New Page and selecting the template file. However, when I created a Staged page and then selected the template, the newly added modules appeared in the Editor section. The takeaway is to always build from Staged Content moving forward.

4

Hi! your syntax is almost there, but HubSpot won’t be able to “see” your new modules unless:
You point at the actual .module file Drag-and-drop modules live in your theme’s modules/… folder as .module files. If your module is at modules/hero-banner-image-caption/hero-banner-image-caption.module, then your path should be:

{% dnd_module path='../modules/hero-banner-image-caption/hero-banner-image-caption.module' label='Hero Banner Image Caption' %} {% end_dnd_module %}

Rather than /main-folder/modules/… with no extension, use the relative path from your template to the .module Wrap modules in a column when inside a section.
While you can drop modules directly under a dnd_section, it’s more reliable to nest them in at least one dnd_column tag so that HubSpot allocates space correctly

{% dnd_section padding={'top':0,'bottom':0,'left':0,'right':0} vertical_alignment='MIDDLE' full_width=true %} {% dnd_column %} {% dnd_module path='../modules/hero-banner-image-caption/hero-banner-image-caption.module' label='Hero Banner Image Caption' %} {% end_dnd_module %} {% end_dnd_column %} {% end_dnd_section %}

Finally, make sure you’ve uploaded/published both your template and your new module files (e.g. via the CLI hs upload or in the Design Manager) so that HubSpot can compile them into your theme. Once your paths, .module extensions, and nesting are correct, your new modules should appear in the page editor