Launching our first Shopify ecommerce website

Launching our first Shopify ecommerce website

 
U92
Publié le mars 07, 2016
Catégorie: Technologie
U92
Publié le mars 07, 2016
Catégorie: Technologie

Moving from custom development to a platform can allow for agencies to gain new and valuable expertise. However, it sometimes represents a big adjustment for them in terms of structure and workflow. Here are the challenges we encountered while developing our first Shopify website for Bermuda-based perfumery Lili Bermuda.

Lili Bermuda, one of our first clients ever at U92, tasked us with overhauling the design of their website. It had been over 10 years since their previous re-design and the site now needed to reflect the brand’s positioning and foray into e-commerce.

The code also needed a complete overhaul to ensure that current best practices for front-end development could be implemented. With the old website, we worked with a large CSS file containing all the styles. There was also no SASS and no code minification. The JavaScript was comprised of global variable names and global functions and still had references to Flash. The term “Responsive website’ did not exist when Lili Bermuda first launched its site so it was far from mobile-friendly. To make a long story short, it was a developer’s worst nightmare.

We had a limited budget for this project so working with a platform made sense. Our team met with Shopify to discuss the project (and its many challenges), and we were pleasantly surprised to learn that most of our obstacles were not insurmountable.

If you’re a developer and interested in learning more about the Shopify platform, this article will help you figure out how to structure your development and adapt your workflow accordingly. I’ll give you some hints on what product structure to respect and what development workflow to use.

The product structure

At U92, we are very familiar with custom projects and with respecting business rules and data structure. One of our first hurdles with Shopify, however, was that it only offered two levels of product categorization - by collections and by tags - so ideally you should limit the number of hierarchies to two. This did not meet our project’s needs so we sat down with the team and made some compromises based on the client’s priorities, namely categorizing the fragrances by genre and the products.

We also had to make exceptions, both visually and with custom rules to show specific information not managed in Shopify. One of them, for example, was to offer complimentary perfume samples in the shopping cart, available with all products except other sample vials. Another custom rule was to define a naming convention for the products so that the fragrance name was visible in the cart but not repeated for each product within the Collection page. Seeing as the fragrance name is, in reality, a tag and requires more information attached to it than simply its name (description, image, fragrance notes, etc), we had to create a rule to load a partial view with all the related information. To avoid extra work, these types of exceptions must be taught and planned for prior to importing your products.

The development workflow

As developers, we’re used to developing locally, committing on git and pushing our work onto the web server once in a while so that the project manager can check in. This workflow does not work for Shopify because you have to develop on their servers in order to preview your work.

There are 3 options:

  1. Work directly in Shopify’s admin with your browser
  2. Use Shopify’s Desktop Sync App (Mac only),
  3. Use the grunt-shopify package with Grunt

This article on Shopify Theme Development is really helpful for those looking for help on how and where to start developing with their own machine, sync with their server and preview their work. It’s also possible to simulate a beta environment by duplicating your theme.

Once I had figured out how to work locally and sync with their servers, I had one last issue to tackle: The structure of the folder assets. Sadly, all assets in Shopify are on the same level. For the CSS, Shopify supports SASS but it’s one big file; you can’t use the @import to separate your components, variables, grids, etc. It’s the same problem with JavaScript - you can’t structure your work. The trick is to create your own assets folder (it’s important to create it outside of the Shopify structure) and add your images/css/javascript folders. That way, with the help of a grunt task, the output is saved in the Shopify asset folder and then synced with their servers each time you save your SCSS/JS/image file.

Conclusion

I must admit that I was sceptical about working with the Shopify platform at first, but I can honestly say that I’m proud of the final results and wouldn’t hesitate to recommend it for a future e-commerce website.

One thing I didn’t address in this article is the localization of the shop and that’s because we didn’t have to. You can always use an App like langify or localize to help you with this, but I didn’t have the chance to try it in a real project (I’m currently evaluating langify and it will be the subject of an article in the near future).

Our goals with this project were to learn how we could hack Shopify and how far we could push the customization of the platform. Unless you have a really complex system to synchronize with or a really complex product structure to follow, Shopify will fulfill most of your needs. Keep in mind that there are other alternatives on the market, like Stripe,Lightspeed and Snipcart. They are all different and they all have their strengths and weaknesses. Remember to carefully evaluate the needs of your client and your budget realities before committing to something that important.

Prêts?C’est parti.

Prêts?
C’est parti.

Nous contacter