Shop | Kirby CMS

This set of blueprint samples is for a simple shop setup, with a shop overview page that lists all products in pages section and the single product pages with a cover image blueprint.

Shop overview

/site/blueprints/pages/shop.yml

title: Shop
preset: pages

icon: 🛍

options:
  status: false

drafts:
  extends: sections/products
  label: Unpublished Products

listed:
  extends: sections/products
  label: Published Products
  layout: cards

Reusable products section

/site/blueprints/sections/products.yml

type: pages
label: Products
parent: site.find("shop")
template: product
info: "€ {{ page.price }} / {{ page.design }}"
image:
  src: page.image
  ratio: 1/1
  back: pattern

Result

Single product

/site/blueprints/pages/product.yml

title: Product
preset: page
num: zero

status:
  draft: true
  listed: true

fields:
  price:
    type: number
    step: 0.01
    before: €
  design:
    label: Design by …
    type: text
  sizes:
    type: checkboxes
    default:
      - S
      - M
      - L
      - XL
      - XXL
    options:
      - S
      - M
      - L
      - XL
      - XXL
  link:
    type: url
  description:
    type: textarea

sidebar:
  image:
    extends: sections/image
    template: cover
    min: 1
    image:
      ratio: 1/1

Reusable image section

/site/blueprints/sections/image.yml

type: files
label: Product Image
max: 1
layout: cards
info: "{{ file.dimensions }}"

Result

Shop template

/site/templates/shop.php

<?php snippet('header') ?>

<main>
  <?php snippet('intro') ?>

  <ul class="shop">
    <?php foreach ($page->children()->listed() as $product): ?>
    <li>
      <figure class="product">
        <a href="<?= $product->link() ?>">
          <?= $product->image()->crop(500) ?>
          <figcaption class="text">
            <h2 class="product-title"><?= $product->title() ?></h2>
            <p class="product-price">€ <?= $product->price() ?></p>
          </figcaption>
        </a>
      </figure>
    </li>
    <?php endforeach ?>
  </ul>
</main>

<?php snippet('footer') ?>