Skip to main content

Getting Started

This guide introduces the fundamentals of building a template in Prodyflow.
A template controls how your shop looks and behaves, including layouts, pages, blocks, assets and logic.

📂 Template Structure Overview​

A Prodyflow template has the following structure:

root folder
├─ config.json
├─ blocks.json
├─ layout
│ ├─ theme.twig
│ ├─ head.twig
│ └─ ... (additional layout files if needed)
├─ pages
│ ├─ list.twig
│ ├─ page.twig
│ ├─ product.twig
│ └─ bundle.twig
├─ sections
│ └─ Your sections twig files
├─ css
│ └─ Your CSS/SCSS files
├─ js
│ └─ Your JS files
└─ assets
└─ Your assets (fonts, icons, images, etc.)

🧠 What Each Folder Does​

File / FolderPurpose
config.jsonGlobal template configuration (colors, typography, settings, data variables)
blocks.jsonDescribes content blocks available in the template / block editor and their settings
layout/Base structure for all pages (header, footer, head, wrapping layout)
pages/Page-specific Twig templates for dynamic pages (product page, category listing, static page, bundle page)
sections/Reusable components inserted into layouts/pages, available in the block editor (hero banners, sliders, product grids, etc.)
css/Template styles (SCSS recommended)
js/Interactive behavior and custom logic
assets/Fonts, images, icons, SVGs, etc.

Used technologies​

The Prodyflow webshop platform is built using modern, reliable, and maintainable technologies to ensure performance, scalability, and ease of customization. These technologies allow developers to create responsive designs, manage dynamic content, and extend the webshop functionality efficiently.

  • Sass – A powerful CSS preprocessor that enables the use of variables, nested rules, mixins, and functions, making stylesheet management more maintainable and modular.
  • Pure CSS – A minimal and responsive CSS framework used for core layout and components, ensuring consistent styling across blocks and pages.
  • Twig – A flexible and secure templating engine that separates logic and presentation, enabling dynamic page rendering and reusable templates.

Before starting development or customizing a Prodyflow webshop, it’s recommended to familiarize yourself with the following technologies. Understanding them will help you work more efficiently with the platform, manage templates, and style content effectively.

🚀 First Steps​

  1. Create the template folder

    • Use the structure above
    • Start with minimal files:
      • config.json
      • layout/theme.twig
      • pages/page.twig

  2. Edit config.json

    • Set template name
    • Add default colors, fonts, and settings

  3. Set up theme.twig

    • Add global page layout structure:
      • <html>, <body>
      • main content block
      • footer, scripts, style includes

  4. Build your first page

    • Example: product page or homepage

  5. Add sections

    • Create reusable UI blocks (hero, banner, product carousel, etc.)

  6. Style with SCSS

    • Import partials
    • Keep files modular (e.g., _buttons.scss, _layout.scss, _utils.scss)

  7. Add JS

    • Optional behavior for sliders, dropdowns, events, etc.

✅ Best Practices​

  • Keep layout files minimal — use sections/ for reusable components
  • Use a file just for the variables (variables.scss)
  • Keep JS modular — one responsibility per file
  • Store static media in assets/ (SVG, logos, icons, backgrounds)

You now have the foundation to begin building a fully customizable Prodyflow template.
Next topic: Config