Screen-Shot-2021-02-02-at-4.11.08-PM

Creating Shopify templates and builders

Project details:

Client: Monk Manual
Design House: MatthewHall.info LLC
Tools: Liquid, Gulp, SCSS, JS

Scope:
Updating templating system within Shopify based on provided mockups.

Shopify is a wonderful tool, but it doesn’t come built out of the box and page structures can get really tricky really quickly, luckily there is a lot you can do to build up tools over time. So let’s look at some shopify template structures that can help push what you’re doing through a clever use of repeated snippets.

To keep momentum for an expanding array of tools and builder sequences, I’ve been expanding on the available tool snippets in the custom builder of the Monk Manual theme, and adding options to existing blocks that allow my client to use the customizer to update and schedule content changes through the Shopify customizer.

Some highlights from my recent work for Monk Manual include:

The Prepare-Act-Reflect module

As shown on https://monkmanual.com/pages/daily-pages

Screen Shot 2021 02 02 at 4.11.08 PM -- Matthew Hall
A custom block system that allows for icon selections, titles, subtitles, and descriptions functional through text-editor fields and schedule-able through the shopify customizer.

A Simple Slider system

Also show on https://monkmanual.com/pages/daily-pages

Screen Shot 2021 02 02 at 4.15.21 PM -- Matthew Hall
This slider makes use of an open source library to load the slider system, is deferred politely to keep page speed up, and allows any user to add slides to the block that include images, or HTML content and embedded iframes from the customizer without touching template code.

Embedded Instagram Module

This embedded instagram module was built to highlight the outstanding content that @monkmanual creates regularly, and make sure it’s in front of their customers on additional platforms.

Screen Shot 2021 02 02 at 4.19.31 PM -- Matthew Hall
Creating Shopify templates and builders 1

So how do we save time and money with this?

Each of these elements is built on using a custom-built section inside of a template, but our time savings is when we start adding the individual block pieces to a single snippet that resolves each block. So a new page layout needed new pieces in the schema can re-use the same block code – limiting the amount of re-coding inside of a new template. An added bonus is that the new block layouts can be added to older templates with a small update to the schema.

Have a project to work on?

Let’s talk about it. I don’t charge for quotes, and I’m happy to customize a plan to make sure we can get your project done.