Green Planet Print: calculator and Pattern Play

Problem

Wallpaper buyers need to know how many panels fit their wall, and want delivery dates on the product page. For prints and fabrics, the client wanted shoppers to compare patterns side by side and order them in one go, not open every product. All of it had to live in the existing theme, with no third-party apps.

Solution

Custom sections and blocks in Liquid and plain JavaScript, with every text, colour and rule exposed in the theme editor. The calculator reads the available heights from product variants and adds the right one to the cart with the wall size in the line properties. Pattern Play is its own page template with a sticky board, drag-and-drop swatches and one action that adds every chosen option to the cart.

Key decisions

1. 01

   Chose theme sections and my own JavaScript over apps and libraries

   Why The features are specific to this store, and theme settings let the client control texts, colours and rules without a developer.

2. 02

   Chose a sticky board that stays in view beside the pattern grid

   Why The board is pinned in place while the shopper scrolls the grid of patterns, so it never leaves the screen.

3. 03

   Chose filter tabs as section blocks that each point to a collection

   Why The set of tabs changes in the editor with no code.

4. 04

   Chose a separate metafield for the swatch image, with the product photo as fallback

   Why The collage needs a flat square sample, and the page still works when the metafield is empty.

Results

• Panel calculator, delivery-date widget and promo widget run on the live theme.
• Pattern Play was built in two days and shown to the client on a test store.
• The client asked for the layout to be mirrored, and it was done.
• Calculator texts and colours are editable from the theme editor.