Yesterday I started a mission to create a Shopify Theme from scratch in 7 working days and document the entire process through a series of blog posts. The initial target for today was to get started with design and wireframe for the website. However, I was having an issue with the self-signed SSL certificate on my local machine, and I choose to fix that first. Also, I realised before actually designing the website, and I should add some dummy content and finalise work on the Art-Direction and IA for the website.

How to Fix Local Machine SSL Issue while working on Shopify Slate

Issue with Self-signed SSL Certificate

I was able to install slate and view my store locally, but I got 'Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID' for all the website assets like HTML, CSS and JavaScript .

I tried following things:

  1. Confirmed variable values inserted in  .env file
  2. Made sure I was not missing out on any detail mentioned in the wiki page of  Slate's documentation (for creating a self signed SSL certificate)
  3. Flushed DNS
  4. Tried restarting the server ️
  5. Recreated SSL certificate
  6. Changed browser 😬
  7. Turned off Wi-fi, recreated SSL certificate
  8. Turned off computer, recreated a new SSL certificate  🤷🏻‍♂️ 😂
  9. A different approach mentioned as a comment on the Issues section
  10. Tried using open SSL

I tried a lot of permutations and combinations, the thing that worked for me was creating the certificate using my phone's internet (hotspot) instead of using internet from co-working space. Although there is nothing wrong with public and co-working networks, I think it does not go well with signing off your own certificate. For those who do not know, I am currently working out of Social Offline, Koramangala; which is a cafe and a co-working space.

Once I was happy with seeing the https on the url, I was rather happy to see an entire structure of website ready to be converted to a theme.  

Before actually writing any code, I chose to thoroughly go through entire code-base and investigate the file and folder structure. As of the publish date of this article, the installation of folder looks more or less similar to the described in above image. The dist folder is the output of  and the src folder and the src folder is something that developer needs to work on.

A couple of observations from the folder structure:-

  1. The folder nomenclature is very well maintained. The styles and assets are the first folders I planned to investigate and dig deep.
  2. The files inside style rules were very thoughtfully named as per the
  3. A large part of data and setting is stored in src/config/settings.json and one can access the entire schema of the same using src/config/settings_schema.json .
  4. Images are stored in assets/images folder and JavaScripts inside src/scripts
  5. One can write code in ES6+ because Babel transpiler is included by default. Also includes Stylelint
  6. locales contains translations for text content which are more or less common amongst all the Shopify themes, for instance cart, remove, product, etc. Since these keywords are used as variables, we will have to use them in liquid through data-labels.  One snippet to explain these literals could be: <small>{{ 'cart.general.remove' | t }}</small> . Of course we can use Remove here, but instead we are using a liquid variable and the same gets exported as remove in respective languages.
  7. The folder sections contains higher level components(or sections in Shopify terminology) of a page like header, footer, blog post, etc. Each Page is built of number of sections. One can change the look and feel of a theme by merely editing settings for each section of a page.
  8. snippets are block of html that one can use anywhere on the site and can take some argument as a content. For instance, pagination, icons, etc.
  9. template contains markup for each type of page. For instance, Home page, cart page, 404 page and so on
  10. The colours should not be set directly in CSS, they should be set in settings (by merchant and the same will be embedded in html as css variables
<style>
  :root {
    --color-primary: {{ settings.color_primary }};
    --color-body-text: {{ settings.color_body_text }};
    --color-main-background: {{ settings.color_main_bg }};
  }
</style>  

Art - Direction for the Website

One of the perks of art-directing my portfolio website, I knew which direction the theme for this site had to go:-

  1. The website has to be a dark themed
  2. It has to reflect the same synth-space-80s-chic look
  3. It has to have a slight neon-ish colours
  4. And lastly the fonts would be something in lines  of Inconsolata, League Gothic and Open Sans (Something I have already used on my brand).
  5. I took some inspiration from following images and generated a colour scheme using two websites. I will be combining the results both the websites and come up with my own colour scheme.
Theme inspiration Images
Colour Scheme from Canva 
Colour palette from Palettefx

... To be continued :)

(Cover Photo by Debby Hudson on Unsplash)