Create a custom template for Quotes

Develop, Build & Integrate CMS Development
1

I need to create a custom template for Quotes and at the same time this header and footer should be present in each page when its exported as a PDF.

¿Should I create a Module for this?

I need to add simple info as Logo, Date and custom colors

Thanks

2

Hi @CMartin-ML,

while creating a module would give you the option to apply custom changes with ease per quote I would start without one and rewrite it at a later point if you shouldn’t be happy with “static content”.

Since you want to to add a logo, date and custom colors, you can use the build-in variables to make your life easier :slightly_smiling_face:

for logo and colors I’d suggest to use the brand kit inheritance variables like

{{ brand_settings.colorPrimary.hex }}

and

{{ brand_settings.colors[0].hex }}

are the same value.

Same applies to logos.

As for the date, if you’d like to provide the “today” date, you can copy

{% set QUOTE = template_data.quote || mock_data.quote %}

{% set TIMEZONE = QUOTE.hs_timezone || 'US/Eastern' %}
{% set LOCALE = QUOTE.hs_locale || 'en-US' %}

{{ module.quote_created_text|sanitize_html }} {{ QUOTE.hs_createdate|int|format_date('long', TIMEZONE, LOCALE) }}<br />

from the quote template example, modify it to something like this

{% set QUOTE = template_data.quote || mock_data.quote %}

{% set TIMEZONE = QUOTE.hs_timezone || 'US/Eastern' %}
{% set LOCALE = QUOTE.hs_locale || 'en-US' %}

Quote created: {{ QUOTE.hs_createdate|int|format_date('long', TIMEZONE, LOCALE) }}<br />

and put it right into your template.

If you’d like to have a header on every page, you can put the content that should appear on every page like this to the template:

{% block header %}
{# Put the content here #}
{% endblock header %}

If you like to have a static footer, add this to the template

{% block footer %}
{# Put the content here #}
{% endblock footer %}

A very simplified template layout looks like this:

<!--
 templateType: quote
 isAvailableForNewContent: true
 label: Basic Quote template
 screenshotPath: ../images/basic.png
-->
{% extends './layouts/base.html' %}

{% block stylesheet %}
 {# if you like to add a specific css file to this template #}
{% endblock stylesheet %}

{% block header %}
{# The same header on every page #}
{% endblock header %}

{% block body %}
{# the main part of the quote #}
{% endblock body %}

{% block footer %}
{# the same footer on every page #}
{% endblock footer %}

best,

Anton

3

Hi @Anton

Thanks for your reply… what if I need to upload an image for each quote? For example, the customer needs to create a quote with info that does not depend on a product (where I know I can add an image).

I need to add images or PDF with info or documents? I don’t know how to do it… thanks for any guidance!

4

Hi @CMartin-ML,

you can use several things for images:

- use the default linked_image module

{% module 'linked-image' path="@hubspot/linked_image" label="PUT IN A NAME THAT WILL BE VISIBLE TO QUOTE EDITORS" %}​ {# if you're using this several times in a template, change the 'linked-image' per instance. You can type in anything you like but do not use "space" #}

If the image(s) are stored externally like a DAM you can create a very simple custom module with one text(not rich-text) field like

<img src="{{module.path_to_external_image }}" style="width:100px;height:100px;">

For files you can use the build in button module

{% module 'button' path="@hubspot/button" label="PUT IN A NAME THAT WILL BE VISIBLE TO QUOTE EDITORS" %}​ {# if you're using this several times in a template, change the 'button' per instance. You can type in anything you like but do not use "space" #}

or create a custom module with two text(not rich-text) or one link and one text fields like

<a href="{{ module.button_link }}" class="btn primary-btn" download>{{ module.button_label }}</a>
{# You might want to change the button classes to match your quote theme #}

Tip: If you want to force the download of the file, simply put “download” inside the <a>-tag like in the example above

Also - while using default modules ensure to provide a fast and easy start, at a certain point you should think about creating a custom module and combine many different types of module functionality into one big module. In other words - you can create a header area with a (custom) image and (custom) button module but it might be helpful for the quote editor to have only one module at a certain point

best,

Anton

5

Great Anton, but what if I need to be visible the image without download or click to an external URL?

by the way, I couldn’t create a module yet… where should I go? thanks for your help!!!

6

I created the module for image how should I added to any of the themes? its not working :

7

@Anton, how do I add the quote title to the quote page footer (as a non-developer)? Thanks!

8

Hey @dsecareanu,

you can try

{{ template_data.quote.hs_title }}

in a text field. But it would definetely be better to add this on the template level(a little bit of coding-skills required)

best,

Anton

9

I’ve added the following to the quote template file and it shows in the preview, but it wasn’t showing in an actual quote (the template file appears to be the correct one).

{% block footer %}
{# Add footer content here #}
<div style=“text-align:center”>{{ template_data.quote.hs_title }}</div><br>
{% endblock footer %}