Web development

Building a High Converting e-Commerce Store with Headless Shopify

GLF Online are a golf apparel and accessories company. They were referred to us as they had a number of difficult problems to solve:

They were rebranding from exclusively selling ladies products, to also offering products for men. They wanted new branding that wouldn’t alienate their existing customer base, but wouldn’t seem out of place for male shoppers, and a new high converting store to match the new brand and split the products up into both ladies and mens products.

We also needed to integrate with their Point Of Sale (POS) system so that the inventory in the storefront and the online store were kept in sync.

We knew we wanted to build a headless Shopify store — going headless meant that we weren’t locked into the hosted Shopify platform which is not as customisable and less familiar to us.

This build deserves a blog post of its own, but below are a handful of problems we had to solve:

One of the first things we tackled with the website was creating a theming system — ladies' pages use hot pink accent colours, and men's pages use navy blue. All the neutral pages are monochrome.

We achieved this using CSS custom properties. We declare the colours for the neutral pages at the top like this:

:root {

--brand-color: theme("colors.gray.900");

--brand-color-light: theme("colors.gray.700");

--brand-color-lighter: theme("colors.gray.500");

--shadow-color: theme("colors.brand['default-shadow']"); }

And use data-attributes to override them with the themed colours like this:

[data-theme="ladies"] {

--brand-color: theme("");

--brand-color-light: theme("");

--brand-color-lighter: theme("");

--shadow-color: theme("colors.brand['pink-shadow']"); }

[data-theme="mens"] {

--brand-color: theme("");

--brand-color-light: theme("");

--brand-color-lighter: theme("");

--shadow-color: theme("colors.brand['blue-shadow']"); }

The beauty of this approach is that we can add a data-theme attribute on any element, and the nested elements will use the new theme, but it doesn’t leak outside. This came in extremely useful for the navigation where we wanted the ladies menu to use the pink

accents and the mens menu to use the navy accents no matter what page the user is on.

Another problem we had to solve was splitting the products up into the ladies and mens sections of the store. We achieved this using tags — unisex products are shown under both, and if neither a ladies or mens tag was shown, it would fall back to display in the ladies collections or search results. As we were dealing with an existing store with a legacy inventory, we spent quite a bit of time working with the GLF Online team fixing tags and normalising the data until we got this working perfectly.

Searching hundreds of products and showing the most relevant ones first is difficult to do, but thankfully Aloglia makes it easy. We installed their plugin on the Shopify store so that it could index the products and used their React InstantSearch package to display the results on the frontend. We also used Algolia to provide relevant related products.

Finally, we built our own ‘Hover to zoom’ feature for the product page. This involved a lot of math and some tricky CSS to put everything in the right place (we have a loading spinner for the main image, the main image itself, the ‘Hover to zoom’ text with magnifying glass and finally the zoomed image. We had to stack these on top of each other, and not have the zoomed image break outside of the bounds of the main image).

We learned a lot and are extremely proud of the result.

Check it out here:

What was created

  • Website

Applications used

  • Gatsby (web framework)
  • Tailwind (CSS framework)
  • Sanity (CMS)
  • Framer Motion (animation library)
  • Mailchimp integration (custom forms)
  • Google Maps integration (custom map)
  • Instagram integration (display Instagram feed directly in page)

Look at what we have been up to

Phiranno Designs.
Office Hours:
Monday to Friday 9am–5pm