Website Development for GLF Online- 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.

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).

Colour Pallete

  • #272727

  • #D90063

  • #101434


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)

Contact us

The team at Phiranno Designs have totally transformed our website, branding and marketing taking our business to a completely new level in a short space of time. We couldn't recommend them highly enough, very professional, responsive and very importantly easy to deal with. " Gordon - GLF Online

Work with us on your next design project

Every client is unique, but our objective has always remained the same. We are excited that you want to work with us. Let’s make something great together! Fill out the form or give us a call today.

Contact us

Get a quote