Ecommerce  |  Technology

Tutorial-Cum-Tips for Excellent Shopify Theming

Shopify is one of the fastest and simplest ways of developing robust online store. With Shopify’s no-nonsense open-source templating language, Liquid, one can easily develop flexibility in terms of front-end dev.
Interestingly, Liquid engine enables to create templates that control store’s looks. There are many reasons for choosing Shopify like:

  • Theme-based platform, allowing to reuse existing site’s HTML, CSS and JavaScript
  • CSS and JavaScript
  • Fully hosted, don’t need servers
  • Enables to sell both digital and physical products
  • Supports different payment gateways

A template engine, Liquid enables to output data from your eCommerce store into your templates. Those developers, who already work with Smarty, ERB or Twig can find Liquid an interesting template. And if you don’t, then not to worry as you have to learn some simple rules.
Here, we have supposed two things, i.e.
Developers can have at least a wee bit of experience with Shopify theming – With this tutorial, you come to know how to do Shopify development better.
Developers can use a CSS preprocessor – After going through this tutorial, you will come to know that it only follows you when you utilize a CSS preprocessor.
There are many tips to adopt for better Shopify theming like:

Utilize a Framework As A Starting Point

No matter, you prefer LESS or SASS, Foundation or Bootstrap (or BEM), Shopify theme framework works excellent for you.

There is no doubt this framework have done many things and thus, one shouldn’t have to re-invent the wheel again.

Namespace Your Assets

When you are working on a project, there are more chances that your assets will look similar to below concept:


But, one can find asset folder like below given in a Shopify theme.
Moreover, it also seems like this:

  • serif_font.ttf
  • some.css.library.css
  • my_script.js
  • cat.gif
  • jquery.js
  • some.jquery.plugin.js
  • one_million_cats.gif
  • loud_repeated_beeping_noise.mp3
  • zoolander.jpg
  • my_theme.css

The assets folder becomes massive and frightening as the theme expands. In order to recall some of your sanity, namespace your filenames, you have to add filename by including the folder name.

  • images_one_million_cats.gif
  • js_my_script.js
  • js_some.jquery.plugin.js
  • fonts_serif_font.ttf
  • css_some.css.library.css
  • images_zoolander.jpg
  • audio_loud_repeated_beeping_noise.mp3
  • css_my_theme.css
  • js_jquery.js
  • images_cat.gif

Match Your Scss And Templates

With the help of Shopify’s flexibile templating, one can simply take a very modular method to your CSS and markup. It is advisable to use a convention like matching your CSS structure for simplicity’s sake with your chosen template structure.

Sample of theme folder

  • assets/
  • css_mytheme.css
  • layout/
  • theme.liquid
  • snippets/
  • product-grid-item.liquid
  • templates/
  • collection.liquid

SCSS folder example

  • css_mytheme.scss
  • layout/
  • _theme.scss
  • snippets/
  • _product-grid-item.scss
  • templates/
  • _collection.scss

Re-Use Your Styles For Checkout

The best thing is that Shopify checkout is locked down and developers don’t have control over the markup language, instead they have a full control over the CSS.
Developers just have to memorize the default styles that they want to overwrite. One of the best approaches is to re-use the code.
Thus, one can have to checkout stylesheet in their SCSS folder along with theme’s stylesheet to get output to your theme’s assets folder.
Here, we are going to add our previous examples:

Theme Folder

  • assets/
  • checkout.css
  • css_mytheme.css
  • layout/
  • theme.liquid
  • snippets/
  • product-grid-item.liquid
  • templates/
  • collection.liquid

SCSS Folder

  • checkout.scss
  • css_mytheme.scss
  • checkout/
  • _checkout-reset.scss
  • _checkout.scss
  • layout/
  • _theme.scss
  • imports/
  • snippets/
  • _product-grid-item.scss
  • templates/
  • _collection.scss

Here, we have added an imports folder in the SCSS structure. Moreover, your project will have one or similar: One must have to set global styles, import vendor libraries, make re-usable components, and so on.
Importantly, you can apply such styles to your checkout to make it more customize.
vendor libraries

Batch Changes To Your Theme’s Settings

There is no doubt you want to deliver a collection of theme setting as this theme comes with huge customization option. With Shopify, it is simple to offer fabulous settings to create your own sensible defaults by using config/settings.html, and config/settings_data.json, respectively.
Thus, if you want to develop your own theme, it is advisable to search in the admin panel and set some theme settings to try.
After that, you may need to change your defaults in settings_data.json, and you might see that your admin settings have been wiped.
It is advisable to check out plan and setup your defaults first in order to avoid, especially when you have involved theme settings.
Lastly, you should backup your admin theme settings when you require some changes by default. You can simply revert your changes back.
Thus, above given are some important steps to implement for best Shopify theming. If you are looking for entire Shopify store development or customization service then contact Perception System, a leading eCommerce development company.

Contact Us

Designed by Freepik

Leave a Reply

Your email address will not be published. Required fields are marked *


by admin

Publish on Feb 24 2015