Shopify Module Reference

Shopify Module


npm install --save @ribajs/shopify


To regist the module include import shopifyModule from '@ribajs/shopify'; in your main.ts file and regist the module with riba.module.regist(shopifyModule);:

import { Riba, coreModule } from '@ribajs/core';
import { shopifyModule } from '@ribajs/shopify';
import { ready } from '@ribajs/utils/src/dom';
const riba = new Riba();
const model = {};
ready(() => {
  riba.bind(document.body, model);



Loads an shopify image with the exact size for the current img element without the need to get the right size manually over the img_url filter / formatter. The image source path is set by the srcset and sizes attributes to make them responsive.

You should prefer to set the srcset attribute server-site (with liquid) (but if you want to use the shopify-img binder anyway the src attribute should not be set server-site, as this causes problems for some browsers if the srcset attribute is set afterwards the src attribute) but if your images are generated anyway with riba e.g. within a rv-each-item binder then you can safely use the shopify-img binder.




Copy the snippets

  • utils-json-link.liquid,
  • utils-json-links.liquid,
  • utils-json-linklist.liquid
  • and utils-json-linklists.liquid

from @ribajs/shopify/src/snippets/ to your themes snippets directory to transform shopify linklists to a json string.

var linklists = {% include 'utils-json-linklists' %}
// If the component should access the linklist by his handle
// the linklist must be globally available as follows
window.model = {
  system: {
    linklists: linklists