Creating a product PDF

A product PDF will display all of the details about your product in PDF format allowing your website visitors to either print the document or save it onto their computer's hard drive.

The design and layout of the PDF is entirely up to you to decide. This help guide provides some simple information about how to enable the facility for your website to generate the PDF, the styling of it is completed by applying CSS rules to your code.

---

Creating the PDF

Using the page editor in advanced mode, click to create a new file in the views folder and name it product_pdf.twig.

You will have two blocks of content. The first block is the CSS, and the second block is the HTML.

In your file you should create something like this:

{% block css %}
    ...your CSS rules...
{% endblock %}
{% block html %}
    ... your HTML ...
{% endblock %}

Place your CSS within the {% block css %} section and your HTML within {% block html %}.

The file has access to all the attributes of the product object meaning you can create the PDF to display as much information as you like about the product.

Please note, images for the product cannot be included within the {% block html %} section and should instead be added as background images to a container, using CSS, e.g.

.image-container {
    background: url('http:{{ product.photo_url }}') no-repeat center;
}

Once you've added your HTML and CSS then save your changes.

Optionally you can also include your company logo in the PDF with the global.business.logo_url variable. This will also need to be added as a background image to a container using CSS.

---

Viewing and linking to the PDF

The PDF for a product can be viewed at the URL of the product, as it is on your website, with ?pdf appended to the URL, e.g.

https://www.yourdomain.com/product-url?pdf

Therefore, to link to the PDF on the product page on your website, you'd need to add a link like the below,

<a href="{{ product.url }}?pdf">view pdf</a>