Skip to main content

Building a Storefront

Step 1: Basic Setup

After cloning the project, you can make the project ready for development by following the steps in the step-by-step setup document.

For more information, please refer to the Basic Setup documentation.

Step 2: Theming

PZ takes heavy advantage of TailwindCSS for it’s theming. TailwindCSS is a utility-first CSS framework for rapidly building web applications.

Inside /templates/tailwind/, you can find tailwind option files., in which you can see breakpoints, colors (primary / secondary and shades), container settings and more. All of these settings combined create the base for the default PZ theme.

For more information, please refer to the Theming & Styling documentation.

Step 3: Templates

All available templates can be found inside the /templates folder. This is practically the root folder for all front-end work.

PZ uses Jinja templating engine and it’s hierarchy features.

The entry template for the project is layout/base.html. Inside every other folder, you will usually find an index.html file. Common structure of these Jinja / HTML files are;

{% extends 'layout/base.html' %}

Almost every template is extended from this entry template.

{% block globals %}
page: ['search'],
{% endblock %}

Every main page should have a globals block, in which the page name is passed as shown above. This allows the router to run matching JS code for each page.

{% block content %}
{% include "list/content.html" %}
{% include "analytics/list.html" %}
{% endblock %}

Every page content should be inside a content block.

For more information, please refer to the Templates & Components documentation.

Step 4: Styling

Just like the index.html file we talked about in the Templates section, styling happens in each corresponding folder’s index.scss file.

As you can see from the file extension above, PZ takes advantage of the SASS pre-processor for CSS. Inside these files, we use @apply statements for using classes available to us from TailwindCSS, according to its configuration files and layers.

This approach helps us keep our templates clean by including markup and Jinja logic only. Styles are a separate concern and so they have their own files.

For more information, please refer to the Theming & Styling documentation.