Webshop template

What Is a Template?

When building an Afosto shop, you usually don’t want to start from scratch. That’s why we provide a standard template that can be used as the foundation for building your Afosto shop.

Many essential elements are already prepared in this template, such as:

A collection page with a product grid and filters
Cart functionality
A fully working checkout

This allows you to start with a solid base instead of reinventing everything.

Within the template, several components are also available that you can use in your shop, such as image sliders and blog overviews.

Which Technologies Are Used in the Template?

The template is built using Twig, which is the main templating technology.
In addition, several other technologies are used to simplify development within the template. All of these technologies are explained on the Template / Technologies page.

How Is the Afosto Frontend Structured?

The template consists of two main folders:

assets
twig

Assets Folder

The assets folder contains files for:

JavaScript
SCSS

There is also a css folder, but it is empty and generally no longer used.

Twig Folder

The twig folder contains several subfolders responsible for building the entire shop structure in HTML.

The base of every page can be found in the layout folder.
Here you will find the file index.twig, which acts as the main wrapper for every page. In this file you’ll see the <html>, <head>, and <body> elements.

Inside the <body> element, you’ll find the line:

1{% include 'layouts/base.twig' %}

To keep things organized, the rest of the page’s HTML is built in the file layouts/base.twig. In this file, logic is added for loading different files depending on the page type.

The line:

1{{ content }}

fills this base layout with the HTML of the specific page type.

Page Types

Different page types exist in the template, such as:

Homepage
Product page
Collection page
Cart
Checkout
Account
Search
Wishlist
Blog

There is also a default page, located at:

1page/index.twig

Each page type has an entry point. For example, the homepage entry point is:

1page/home.twig

Everything placed in this file is inserted into the content variable inside layout/index.twig.
This means the head, header, footer, cart, and other global elements are wrapped around the homepage HTML to form a complete page.

Page Variants

Some pages have multiple variants available.

For example, the product page has three options, located in the product folder.

The entry point for the product page is also index.twig. This file does not contain HTML but only Twig logic. It defines variables used by the variants and allows you to select which version to use.

Example:

1{% set code = "product-1" %}

This line determines which product page variant is applied.

You can change this value to try one of the other options. The code corresponds to the filename without the .twig extension. If the file does not exist, the system will fall back to:

1product/default.twig

This same system is also used for the cart and checkout pages.
However, for checkout we recommend using stepped or checkout_v4 if you are building a v4 shop.

Macros and Components

Several reusable components are available in the macros folder.

Examples include:

Sliders
Menus
Plugin widgets
Other display components

You can use these macros by importing them into your Twig file in the following way:

1{% import 'macros/displays.twig' as af_displays %}

After that, you can use all components within the display macro in the following way.

1{{ af_displays.products({
2    'products'  : related_products,
3    'style'     : 'grid',
4    'use_quickview': true
5}) }}

Explaining exactly how this works will require a more detailed guide.

How the Editor Works

The editor allows you to view and edit the files of a shop template. There are a few important things to keep in mind when working in the editor:

1. Know Your Environment

Always check that you are logged in to the correct merchant account.
Make sure you are in the correct sales channel in the editor.
This is crucial because any changes you make are applied immediately to the live website.
Working on a live site means mistakes can break the site, preventing the merchant from selling on the webshop.

2. Saving and Undoing Changes

Save a file with CTRL+S (Mac: CMD+S).
Use CTRL+Z to undo changes only within the file you are currently editing.
If you switch to another file, previous undo history for the first file is lost.

3. Accessing Available Data

Every file always has a dataset available.
To see what data is available, use a dump in Twig:

1{{ dump() }}

This will output a long list of all variables and their values.
You can also target specific data:

1{{ dump(menus.default) }}

This helps you navigate the available data for your template.

Working with Text Blocks

Text blocks allow you to reusable pieces of content in your shop, e.g., notices about delayed shipping.

Managed under Weergave on your shop dashboard.
You can edit existing blocks or create new ones.
When creating a block, provide:
Name (human-readable)
Unique identifier (used in Twig)
Content

Accessing a text block in Twig:

1blocks['awesome-block']

Important: Use blocks['unique-name'] because Twig does not allow - in variable names.
To see the block data:

1{{ dump(blocks['awesome-block']) }}

The available fields are:
identifier
title
content

Displaying the content of a block:

1{{ blocks['awesome-block'].content }}

Working with Sliders

Sliders allow you to display image carousels or image grids, e.g., for banners, product showcases, or promotions.

Each slider contains multiple slides, each with a title and text.
Managed under Weergave on your shop dashboard.
You can edit existing sliders or create new ones.
When creating a new slider, you can:
Assign a name
Add multiple slides

Sliders are essentially image libraries that can be called in Twig to dynamically display images across your shop.

This structure allows you to manage text content and visual elements efficiently while keeping the template modular and maintainable.

Creating a New Slider

When creating a new slider, you need to save twice:

First save: Creates the slider itself.
Second save: Saves the slides added to the slider.

Important:

First, enter the slider name and save.
Only after this step, add your slides and save again.
If you add slides before the first save, they may be lost.

How to Extend a Template

If a merchant wants to sell in multiple languages, a new webshop must be created for each language. You might wonder if you need to copy all files manually. Fortunately, with the Translation Module and the Template Extender, you can reuse a template from another shop and translate the text.

Using the Template Extender

Once the plugin is installed, a new item called Template Extender appears under Apps in your shop dashboard.
Here you can choose which sales channel’s template you want to use.
Example: For the German shop of Azalp (azalp.de), you can use the template developed for azalp.nl.
This allows all files from the azalp.nl template to be used for generating the azalp.de shop.

Important Considerations

The target template (e.g., azalp.de) must be empty.
Any existing files in the target template will overwrite the files from the original template (azalp.nl) and cause problems.
You can clean up the target template using a button in the editor before extending it.

This process allows you to efficiently reuse templates across multiple languages without duplicating work, while keeping content localized and maintainable.

Important: Be very careful which template you perform this on, as there is no undo for this action.

The azalp.de shop is now dependent on the azalp.nl template. Any changes made to the azalp.nl template will be automatically reflected in azalp.de, so you don’t have to manage multiple templates separately.

POS Developers

On this page