Learning Shopify Liquid

Shopify Liquid

Learning Shopify Liquid

5th September 2018 by Roger Martin

Learning Shopify Liquid

5th September 2018 by Roger Martin

Shopify Liquid Guide

This week I’ve published a short post on learning Shopify Liquid. This templating language is used to make customisation of the Shopify experience easy for developers.

As I recently went through the Shopify Plus Partners certification process I decided to get under the skin of Liquid and make some mods to my Shopify Plus sandbox store.

I like to share stuff, and I’ve created a real quick list of useful code to get you started, some of which I used in my sandbox to improve user experience and functionality.

Below is my quick guide to getting started with Shopify Liquid.

Shopify Liquid Helpers

Know which template is rendering a page

p style=“background: #f1c40f; padding: 1em; font-weight: bold;”>Current template: {{ template }}.liquid

For each example

{% for image in product.images %}
   {% endfor %}

Liquid logic example

{% if product.available %} 

Price: £99.99



{% else %} 

Sorry – sold out

Delimiters explained

The double curly brace delimiters  {{ }}  denote output, and the curly brace percentage delimiters  {% %}  denote logic.

Escaping whitespace - use %- -%

{% endif %}
{%- assign my_variable = “coffee” -%} 

{{ my_variable }} 

Adding a stylesheet - first at to assets library

 {{ ‘style.css’ | asset_url | stylesheet_tag }}

Will render the actual asset URL automatically, works for various assets.

Create and select alternate templates

Modify template view using URL’s

http://store.myshopify.com/products/blue-t-

shirt?view=special 

Loads: product.special.liquid

Specify image sizes

 {{ product.featured_image | img_url: ‘450x450’ }}

Above only works if an image is square…

Or width only (RIP)

{{ product.featured_image | img_url: ‘450x’ }}

Or height only (RIP)

{{ product.featured_image | img_url: ‘x450’ }}

To make non square images square use the crop function

 {{ product.featured_image | img_url: ‘450x450’, crop: ‘center’ }} 

Image formatting for progressive loading

 {{ product.featured_image | img_url: ‘450x450’, crop: ‘center’, scale: 2, format: ‘pjpg’ }} 

Placing imagery from assets folder

 {{ ‘logo.png’ | asset_url | img_tag: ‘Logo’ }}

Append classes to images (From assets)

 {{ ‘logo.png’ | asset_url | img_tag: ‘Logo’, 

‘cssclass1 cssclass2’ }} 

Remove img-tag to add class ID’s

”Logo”
You can also link the the Liquid Cheat Sheet here or download the official learning liquid manual here. Hopefully you find the above useful as well as the resource link and guide. If you have a Shopify project you are working on and get stuck, give us a shout to see if we can help.

Connector Plus – The Clever Little ERP connector

Connector Plus

Connector Plus – The Clever Little ERP connector

2nd September 2018 by Roger Martin

Connector Plus – The Clever Little ERP connector

2nd September 2018 by Roger Martin

We developed Connector Plus originally about 5 years ago to connect a Magento Enterprise client (Fitness Superstore) to a rather ageing ERP back office system. The process was painful, but it laid out the foundations for what we have now, a fully agnostic systems integrator for Magento, Shopify and WordPress.

Connector Plus from Star Digital

Over the years we’ve developed and extended the solution to work with more platforms.

As the time of writing we have the following production instances;

  • Microsoft Dynamics NAV (Our most popular integration)
  • Microsoft Dynamics AX
  • SAP
  • Kerridge K8
  • Spark
  • Exchequer
  • NetSuite
  • Cyrane
  • MOM
  • Bespoke SQL systems (Very popular service with our B2B clients)
  • CSV spreadsheet exports

Our Connector Plus technology is truly agnostic and extremely flexible allowing for the dynamic population of Magento via our middleware translation platform or directly using web services.

We can automatically process the following data between platforms;

  • SKU’s
  • Product descriptions (including HTML)
  • Product images/videos (deployed to CDN)
  • Product attributes (Auto import of new attributes)
  • Product type creation/import (Simple, grouped, configurable, bundle, downloadable, digital)
  • Pricing (Standard/group/individual/promotional/tiered)
  • Categories (Auto creation and ordering)
  • Customer data (Addresses/Users/Status/History/Offline Orders)
  • Promotional rules
  • Order data
  • Customer statements
  • Customer invoices
  • Customer account balances
  • Tokenised payment data
  • Shipping data
  • Meta data
  • …and much more besides.

For any integration programme our team begin the process of investigation by working with you to deliver a functional specification showing all of the data that needs to move back and forth. We then provide a UI to show how this data will be presented and move to a quotation stage.

Because we have developed such a large library of connections between Magento (1 and 2), Shopify Plus, Joomla, WordPress and the numerous 3rd party platforms, the cost of implementation is attractive, and ongoing costs are minimal, covered by a small support and license fee.

Clients that have used our system include Stanley Gibbons, Star Catering, Fitness Superstore, Kinesis, Dår Lighting, RKW, Swan, Saimaxx, LeisureGrow, BambinoMio, 1926 Trading, Bachmann, BlueStar, Cadman Wines and more…

If you have a systems integration requirement, please get in touch with us today.