Vorssa Ink

01

Theme development done right: GitHub, a development theme and the live theme

All of the theme’s code is in GitHub, and the store is connected to it with Shopify’s own GitHub integration. The store has two themes: the live theme shoppers see, and a development theme where new work is built and checked.

Every change is made on its own branch, checked with Shopify’s Theme Check and brought into the development theme. Vorssa Ink and their designer see it in the development theme’s preview and edit content there. A change reaches the live theme only once it is approved.

• The live theme is never edited directly, so the store never breaks mid-sale
• Changes saved in the theme editor are stored in GitHub automatically, so nothing gets lost
• Every change leaves a trace, and any change can be undone
• The old theme stays in the store as a fallback

02

Mega menu with images and a collection menu image field

The menu was rebuilt from the designer’s mock-up. On a computer a main item opens a wide menu with an image beside every collection and a “View all” link at the top. On a phone the same menu works level by level, with images on every level.

Collections got their own Menu image field (a metafield). When the merchant adds an image there, that image is shown in the menu. So the menu can use a clear image that works at a small size without changing the large image on the collection page.

03

Collection pages: “Read more” and colour filters with real colours

The long collection descriptions matter for search engines, but they pushed the products far down. Now the first paragraph shows and the rest opens from a “Read more” button. The products are visible at once, and no text had to be removed.

In the colour filter every colour shows as the real colour instead of just a name, two-tone and glitter shades included. Shoppers find the colour they want at a glance.

04

A free gift without a paid app

The store gives a gift with orders over a set amount. Before, a separate paid app added the gift to the cart and brought its own code into the store.

Now the theme’s own settings do the same. The merchant picks the gift product and the minimum amount, or the products or collection that earn the gift. The gift appears in the cart by itself and is removed when the condition is no longer met. Shopify’s own “Buy X get Y” discount makes it free at checkout.

• One monthly fee less
• One piece of outside code less slowing the store down
• The merchant changes the gift and its conditions in the theme editor

05

Optimisation and speed

Over the years the store had collected code from apps that were no longer used, and it still loaded on every page. We went through every app and script and removed what was not needed from the theme. One old, unused script alone loaded 9.5 MB on the home page.

In the old theme Shopify’s Theme Check found 131 errors. The new theme was built on a clean base and the check runs before every change, so there are now none.

• App embeds 8 → 4: four unused or replaced apps out of the theme
• Hard-coded outside scripts 2 → 0, one of them over 1,400 lines of code for a feature that was not in use
• Leftovers of two apps already removed from the store were cleaned out
• One paid app replaced with a built-in theme feature
• Theme errors 131 → 0, and the check runs before every change from now on