You can use publications to make unique product sheets that display important information to customers.
We have already covered how to create a publication template, so in this guide, we will focus on specifically creating a single product sheet with a footer. We will be using Liquid as our rendering engine.
If you are not familiar with publications at all, we recommend that you start here.
In the following guide you will learn how to set up a single product sheet that displays an image, product descriptions and a table for technical specifications for a product.
First, go to 'Publications' > 'Publication template' and click 'Create new publication template'.
A new page will open up. This is where you can set the settings for your template.
Set the template type to 'PDF', and give it a name that describes what we are building.
Scroll down to the 'Template setup'-section. Enable the 'Enable footer', and give it a height of 40.
The next section is the 'Page setup'. This is where you can define the orientation and size of the publication.
Set the orientation to 'Portrait' and the page size to 'A4'.
In the 'Rendering setup', set the rendering engine to 'Liquid' and enable the 'Use real PDF size for rendering' option. Set the culture mode to 'Default'.
Click save, head out to the 'Publication template' page, and click the -icon on the new template.
This will take you to the designer, where we will be able to design the layout and logic of our publication.
The following template has been created with Liquid, HTML and CSS. You can read more about Liquid and how to use it here.
To start off, we will be defining the template layout for the publication.
If you want to learn more about how to use the designer, you can read about it here.
A footer can be used for many things and can contain a few different elements. We want to display the date the publication was generated. To do this, click on 'Footer template' inside the 'Content'-window.
In the footer tab, you are able to add different elements to the footer. To display the date of when the publication was generated, add a new text element.
Inside it, scroll down to the 'Text'-field, and insert the following snippet.
This will place a footer element that displays the date for when the publication was generated.
Putting it all together, the result will look like this.
Last updated
{% assign product = Products[0] %}
{% assign attrs = product.AttributeValues %}
{% assign name = attrs.Name.Value | default: attrs.Name.RenderedValue | default: "Unnamed product" %}
{% assign model = attrs.ModelNo.Value | default: attrs.ModelNo.RenderedValue | default: "" %}
<div class="page">
<!-- HERO SECTION -->
<div class="hero">
<div class="hero-image">
{% assign primaryImage = attrs.PrimaryImage.Value[0] %}
{% if primaryImage %}
<image src="{{primaryImage}}" format="width=900&format=png"></image>
{% endif %}
</div>
<div class="hero-thumbs">
{% for imgid in attrs.AdditionalImages.Value %}
<image src="{{imgid}}" format="width=160&height=120&format=jpg&bgcolor=ffffff"></image>
{% endfor %}
</div>
</div>
<div class="shadow-wrapper">
<!-- PRODUCT HEADER CARD -->
<div class="header-card">
{% if attrs.Brand.Values[0].SubAttributeValues.Logo.Value[0] %}
<image class="logo" src="{{ attrs.Brand.Values[0].SubAttributeValues.Logo.Value[0] }}" format="width=320&height=80&format=jpg&bgcolor=ffffff"></image>
{% endif %}
<div>
<div class="product-title">{{ name }}</div>
<div class="product-meta">
Model: {{ model }} •
Category: {{ product.Groups[0].AttributeValues.CategoryName.RenderedValue }}
</div>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="main-block">
<div class="intro-text">
{{ attrs.LongDescription.RenderedValue }}
</div>
<div class="specs-card">
<h3>Technical features</h3>
<div class="spec-columns">
<!-- LEFT COLUMN -->
<div class="spec-col">
{% assign counter = 0 %}
{% for pair in attrs %}
{% assign a = pair[1] %}
{% if a.Scope == "ProductSpecification" and a.RenderedValue and a.Name %}
<div class="spec-row{% if counter == 4 %} last{% endif %}">
<div class="spec-label">{{ a.Name }}</div>
{% assign raw = a.RenderedValue | downcase %}
{% if raw == "true" %}
{% assign final = "Yes" %}
{% elsif raw == "false" %}
{% assign final = "No" %}
{% else %}
{% assign final = a.RenderedValue %}
{% endif %}
<div class="spec-value">
{{ final }}{% if a.Unit %} {{ a.Unit }}{% endif %}
</div>
</div>
{% assign counter = counter | plus: 1 %}
{% if counter == 5 %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
</div>
<!-- RIGHT COLUMN -->
<div class="spec-col">
{% assign counter = 0 %}
{% for pair in attrs %}
{% assign a = pair[1] %}
{% if a.Scope == "ProductSpecification" and a.RenderedValue and a.Name %}
{% if counter < 5 %}
{% assign counter = counter | plus: 1 %}
{% else %}
<div class="spec-row{% if counter == 9 %} last{% endif %}">
<div class="spec-label">{{ a.Name }}</div>
{% assign raw = a.RenderedValue | downcase %}
{% if raw == "true" %}
{% assign final = "Yes" %}
{% elsif raw == "false" %}
{% assign final = "No" %}
{% else %}
{% assign final = a.RenderedValue %}
{% endif %}
<div class="spec-value">
{{ final }}{% if a.Unit %} {{ a.Unit }}{% endif %}
</div>
</div>
{% assign counter = counter | plus: 1 %}
{% if counter == 10 %}
{% break %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>Generated: {{ 'now' | date: "%d %b %Y" }}