# How to set up a single page product sheet

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](/tutorials/guides/how-to-use-publications/how-to-create-a-publication-template.md).

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.

### Setting up the template

First, go to 'Publications' > 'Publication template' and click 'Create new publication template'.

<figure><img src="/files/ffRaZlEz2L2K2dbFjwey" alt="The button to create a new publication template"><figcaption><p>The button to create a new publication template</p></figcaption></figure>

A new page will open up. This is where you can set the settings for your template.

<figure><img src="/files/K6v4Na7CJGxLQyX7ToMo" alt="The template information for the template publication"><figcaption><p>The template information for the template publication</p></figcaption></figure>

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.

<figure><img src="/files/ouYFzxRINZxkBiyfKWje" alt="The template setup settings"><figcaption><p>The template setup settings</p></figcaption></figure>

The next section is the 'Page setup'. This is where you can define the orientation and size of the publication.&#x20;

Set the orientation to 'Portrait' and the page size to 'A4'.

<figure><img src="/files/tbtc8Fkqf3I2vnAqCbx5" alt="The template setup for the PDF"><figcaption><p>The template setup for the PDF</p></figcaption></figure>

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'.

<figure><img src="/files/ZTfuw00J1K7vz6efpSSm" alt="The rendering setup for the publication template"><figcaption><p>The rendering setup for the publication template</p></figcaption></figure>

Click save, head out to the 'Publication template' page, and click the <i class="fa-eye">:eye:</i>-icon on the new template.

<figure><img src="/files/F3H3uvi1KZ9mHg94XZIR" alt="The publication template overview"><figcaption><p>The publication template overview</p></figcaption></figure>

This will take you to the designer, where we will be able to design the layout and logic of our publication.

### Designing the template

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.

{% code title="Liquid" lineNumbers="true" expandable="true" %}

```liquid
{% 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 }} &nbsp;•&nbsp;
                    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>
```

{% endcode %}

If you want to learn more about how to use the designer, you can read about it [here](/tutorials/guides/how-to-use-publications/how-to-create-a-publication-template.md#using-the-designer).

### Adding a footer

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.

<figure><img src="/files/MEfxmIC9zYGy8WgHJtpi" alt="Inside the template designer"><figcaption><p>Inside the template designer</p></figcaption></figure>

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.

<figure><img src="/files/NPIUuCNnpbxDu8aC3sLI" alt="The content tab where you can add elements to the footer"><figcaption><p>The content tab where you can add elements to the footer</p></figcaption></figure>

Inside it, scroll down to the 'Text'-field, and insert the following snippet.

{% code title="Liquid" %}

```liquid
Generated: {{ 'now' | date: "%d %b %Y" }}
```

{% endcode %}

This will place a footer element that displays the date for when the publication was generated.

### The final result

Putting it all together, the result will look like this.

<figure><img src="/files/CtcXFYHfxSiRy1wOXnaU" alt="The final result rendered from the publication template"><figcaption><p>The final result rendered from the publication template</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.struct.com/tutorials/guides/how-to-use-publications/how-to-set-up-a-single-page-product-sheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
