Shopify Housekeeping – Annual Checkup for Security, Strategy, Content

2019-01-09T09:47:53+00:00January 8th, 2019|How-To Guides|

Product design, marketing, and stacking revenue – I’d say these are the fun part of building an ecommerce business.

But let’s not forget about the things that work to solidify your foundation and strengthen your business 💪

Things like:

Let’s call this an Annual Checkup to optimize your business… or a reminder to keep your store secure.


AMP Guide for Shopify | Easy Way to Make Your Site Faster + Boost SEO

2019-01-10T09:13:00+00:00December 20th, 2018|Automation, How-To Guides, Performance Optimization, Shopify Best Apps|

In This Guide

🚀 Quick Start

If you already know about AMP and came here looking for Speed Boostr’s recommendation for the best Shopify AMP app, I’ll save you the read time, it’s AMP by Shop Sheriff.

Getting started:


Shopify Liquid Lesson: Auto Minifying CSS

2019-01-05T17:23:48+00:00July 27th, 2018|How-To Guides, Performance Optimization|

CSS and Minification

CSS (Cascade Styling Sheets) are files that control the style of your website by connecting style properties to html elements.

Like this:

In Shopify, you’ll find CSS files in your theme Assets folder.

What is minification?

CSS are text files. Minification compresses the text by removing extra characters like spaces and comments, and combining common styles.

This makes the file size smaller. When your files are lighter they transfer faster, which helps your site load faster.

The Challenge

You want to compress your files, but you also want them to be readable so you can edit and make updates.

No worries, Shopify has a technique that compresses your human readable CSS files into minified files on the server.

How to Minify Your Shopify CSS Files


How to Use Vector Graphics to Make Your Site Faster and Cooler

2018-07-09T18:24:29+00:00June 25th, 2018|How-To Guides, Performance Optimization|

In this article:

  1. What is a vector graphic
  2. Examples of vector (SVG) vs non-vector (JPG, PNG)
  3. How to make/use an SVG (vector graphic for websites)

What is a vector graphic?

Vectors are lightweight scalable digital art graphics, meaning they can be sized up without losing resolution or pixelating (as opposed to a jpg or png which gets blurry when you make it larger).

The art files are created using lines and math instead of individual pixels or bitmaps.

SVG is a type of vector graphic used for the web. SVG = Scalable Vector Graphic.

Here’s why SVG’s are awesome:

  • The image is sharper
  • They’re usually lighter (faster loading)
  • They can scale to any size without becoming blurry or losing resolution