HubSpot Custom Module Boilerplate Code Snippet

Below is a some boilerplate code to use when creating a custom module inside HubSpot CMS. <div class=”module-class” id=”{{name}}”> <div class=”row-fluid”> </div> </div> {% require_css %} <style> {% scope_css %} {% end_scope_css %} </style> {% end_require_css %} {% require_js %} <script> window.addEventListener(“load”, (event) => { }); </script> {% end_require_js %}

Continue Reading

Category: Code Snippets

Set Variable Values in a Loop and Use Elsewhere HubL HubSpot

When customizing a custom quote template you may want to know what line items are present in the quote. You can then create conditional logic with a set of known values. The only problem is when you set a variable inside a loop it is not able to be referenced outside of the loop due… Read more »

Continue Reading

Category: Code Snippets

HubSpot Related Posts Based on Tag Module [Code Snippet]

The code snippet below lists related posts based on the current post tags used. The HubSpot developer docs has a code example using a Javascript formatter but I was unable to get this to resize the featured image. So I created the code below to use a HubL macro instead. HubSpot Module HTML + HubL… Read more »

Continue Reading

Category: Code Snippets

How to Load Script on One Domain and Exclude Previews in HubSpot [HubL Snippet]

The HubL code below will help you scope heatmap or anlytics tracking on one domain and exclude any previews. {% if request.domain == ‘www.yourdomain.com’ and request.query is not string_containing ‘hs_preview’ %} {% endif %}

Continue Reading

Category: Code Snippets

How to Quickly Search for a Code Text String on Entire WordPress Website

I recently was trying to optimize my WordPress site performance and noticed a javascript error saying jQuery is not defined. Basically, there was a script that was loading before jQuery was loaded. I searched my entire theme but could not find the code. I then thought of searching all of my plugins for the code…. Read more »

Continue Reading

Category: Code Snippets

How to Improve LCP Mobile Speed Score

I was recently trying to improve my LCP on mobile and was running into poor performance for LCP and CLS scores. I narrowed things down to most of my blog posts having a featured image floated in the top right. When you viewed the image on mobile the thumbnail didn’t really make sense and wasn’t… Read more »

Continue Reading

Category: Code Snippets

Use is_in_editor to Add Inline Comments and Notes Only in the HubSpot Editor [code snippet]

As a HubSpot CMS developer, you sometimes need to add some contextual information in templates to make it easier for content editors to know where and how to edit things. Add the code below into a template to display help text only when editing the HubSpot template. {% if is_in_editor %} <style>.hseditor-help {background:#FFFFE0;padding:1rem;text-align:center;}</style> <div class=”hseditor-help”>… Read more »

Continue Reading

Category: Code Snippets

How to Format a Phone Number in HubSpot CMS HubL

I was recently working on a custom HubSpot quote theme and needed to format the phone number. By default, the number was displayed as a long string of numbers without any parenthesis or number groupings. The code below uses a HubL to display a subset of the full string in the chunks you need it… Read more »

Continue Reading

Category: Code Snippets

HubSpot HubL Code Snippet Collection – Filters, Functions, and Macros

Below is a list of my commonly used HubSpot CMS HubL filters, functions, and Macros. Email me if you have one you would like to add to this list. Create a slug from a text string I used this when I wanted to add a CSS class name to the li of a menu using… Read more »

Continue Reading

Category: Code Snippets

FAQ Schema Microdata Code Snippet

Below is a FAQ microdata schema code template you can copy and paste and add to your page HTML. You would repeat the .faq-question div block for each QA answer set. Once you are done adding your markup you can test it in the Google schema tester. If you are using WordPress, I noticed the… Read more »

Continue Reading

Category: Code Snippets