SearchLoginTry ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Try ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Creating a product PDF

Back to articles
Theme Customisations - Coding
22nd January 2021

Before you proceed:
The following article contains information that requires you to have some prior knowledge about coding in order to correctly implement the proposed change to your theme. If done incorrectly alterations made to your theme’s code can negatively impact your website causing visual and performance issues. Therefore, we strongly recommend that you only undertake this effort if you are completely confident that you know what you’re doing. If you have no coding experience at all, aren’t entirely comfortable following the instructions in this article or if you simply don’t understand the instructions then we recommend you instead contact our partners, Coding Masters, who will complete the work for you for a set fee.

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>