With the latest announcements after Shopify Unite, there’s some fresh new stuff from Shopify that will impact the web design and development around the platform happens. Here at Pixel2HTML we have been working on several interesting Shopify projects and playing with all of the new tools that are available now. So now we’d like to talk a bit about each of those and what our feelings are on them.

Slate

Shopify introduced Slate last month to the public although it was in secret beta testing for a while before. We did get a chance to try it out and its quite good for developing Shopify projects from scratch.

Some awesome features slate has are:

• Browsersync and live reloading with proxying to the actual theme.
• Automatic deployment and sync of files.
• Friendly starting points with blank files.

It’s powered by some Gulp 3 tasks in the background and even though it works okay we felt it still has some drawbacks for example:

• Locked in Gulp: the gulp tasks are tucked away inside node_modules so if you’d like to make some customizations as of right now that’s a no-go. And you know we like to tweak our Gulp since we already have some pretty solid taks on our Boilerplate Generator the fact that we can’t move that around was a bit of a let down to say the least.
• Not 100% real Sass. Slate is not actually making Sass its merely an extension replacement, as seen here in the source code that means we get to enjoy zero benefits from sass like: mixins, parcials, variables, functions and all of the extra goodies. Again, a downsize for us.
• No ES6 Support: We do like using the new features JavaScript has to offer such as spreads, arrow functions and modules. As of right now Slate basically only concatenates the js files and uglifies them. Nothing particulary bad but once you taste the goodness JS has to offer is hard to go back to the past.
• No Sourcemaps: In an ideal world you develop once and no bugs happen. In the real world issues arise sometimes months after deployment was done so being able to open the Developer Tools and see exactly on which line of which file stuff is happenning sure beats noting the bug is on line 1 column 16,491.

Overall we think slate is an awesome tool for developers but more advanced needs might need to take it a step forward. Hopefully later on Slate will include an eject command like create-react-app so we can further customize the gulp tasks.

We have an improved set of gulp tasks that’s currently in the final testing stages but once they’re done we’ll add them to our Boilerplate Generator, and also let you know here with a lovely announcement.

Just for now, know that the Shopify Upload task is powered by gulp-shopify-theme and proxying & reloading via Browsersync

Let’s for example check our modified sass task:

'use strict'
const gulp = require('gulp')
const config = require('../config')
const $ = require('gulp-load-plugins')()

const destination = config.theme.assets
const sourceMappingURLCSSregExp = new RegExp('(.*?[/*]{2,}# sourceMappingURL=)(.*?)([/*]{2})', 'g')
const sourceMappingURLCSSreplace = '$1$2$3'

gulp.task('main:styles', () => {
  return gulp.src('src/assets/styles/main.scss')
   .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: config.vendor.scssDirectories
    })).on('error', $.sass.logError)
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'iOS 8']
    }))
    .pipe($.groupCssMediaQueries())
    .pipe($.csscomb())
    .pipe($.rename('main.css'))
   .pipe($.sourcemaps.write('.', {sourceMappingURL: config.makeLiquidSourceMappingURL}))
    .pipe($.rename(config.appendLiquidExt)) // main.scss.liquid
    .pipe($.replace(sourceMappingURLCSSregExp, sourceMappingURLCSSreplace))
    .pipe(gulp.dest(destination))
})

This will produce a single CSS file which may or may not be what you need so milage may vary. This is all up to each team. However this works perfect for us. Plus the sourcemaps work even after Shopify hashes the assets, so what’s not to love 💖💖 here?

Shopify Sections

On October of last year Shopify announced sections the newest addition to the set of devtools to play around with. We’ve now used it in a couple themes and here are some pro’s and growth areas we might see with sections.

Awesome things:

• Development makes much more sense without a lot of the usual Hacks that Shopify is known for. So usually to get a Shopify theme looking and working to the actual expectations involves a series of hacks that make both development and CMS user life really hard. cough… nested menus cough. Well, at least now some repeatable content can be easily looped and edited by a normal user. However…

Not so awesome things:

• Sections don’t work inside a product page. We feel it’s weird that the core part of Shopify can’t enjoy the latest developer and user tools such as the Sections. So in that part we must still use the -dreaded- good old fashioned metafields which are can be annoying and hard for end users at the same time.

  

New Cool APIs

Here’s a list of some cool new APIs that have been announced and can be leveraged by specific operational or marketing needs of some businesses. Have in mind that some of these can only be used if you are a Shopify Advanced or Plus Store.

• Marketing Events API
• Report API
• Draft Orders API

Polaris Design System

On the later part of April 2017 Shopify released a design system in Sketch and also CSS and React Components. The CSS and React Components we still haven’t tested however the UI Kit Sketch File seems like a solid starting design point. We think it’s a good resource to start with fresh eyes and have things in mind like consistency, doing a styleguide driven approach. Also some very good advice on copyrigting, voice and tone can be found here.

The Future

This year’s Shopify Unite announcement really assured us that Shopify as a platform that puts merchants first, we would also like to learn more about their plans to support developers and designers.

Currently Shopify is a public company and is taking care to grow at a right pace, steadily becoming one of the best SaaS e-commerce solutions for stores all sizes. With more updates and love for developers and users we’re sure Shopify can become something not only useful but beautiful and fun to use and develop for.

As each year goes by and design gets more and more refined and user expectations grow exponentially we believe that Shopify must adapt and give more tools to developers to stop the platform to be more known for it’s wacky hacks (metafields, alt texts, tags) and tend more towards a happy user experience people are used to and expectant of like WordPress did in the past.

Need any help?

If you (or your client) runs a Shopify store and need help with designing or development, we’d be more than glad to help you out. Feel free to reach out to us for help with Shopify here. We will get back to you in no time!