Shopify Resources

A list of useful Shopify resources Liquid: Learning Liquid: A guide to Shopify theme development Shopify Liquid REPL Shopify Liquid code examples General Shopify Information: Youtube video tutorials from Coding with Jan Series of streams on Shopify theme development from {{ Kelly | plus: Kelly }} How to Set Up a Local Theme Development Workflow with Theme Kit An example build process for Shopify theme development An upcoming course on Shopify Frontend Development App Development: Shopify App CLI The Shopify GraphQL Learning Kit Build a Shopify App with Node and React Build a Shopify App with Node and React Video How to Build a Shopify App: The Complete Guide Other: Working with Shopify metafields without an app Shopify Storefront API Examples Shopify Theme scripts Build a Custom Shopify Storefront using React (Headless CMS) and the github repo Add a Shopify Wishlist ...

A customized subscribe modal popup

Create a new liquid file in your snippets folder called popup.liquid. Add the following code to the file: <script> document.addEventListener("DOMContentLoaded", function () { let popupdisplayed = sessionStorage.getItem("popupdisplayed"); const modal = document.querySelector("#modal-id"); const overlay = document.querySelector("#overlay-id"); let store = document.querySelectorAll(".setStorage"); let initialFocus = document.querySelector("#close"); let fadeIn = {{settings.fadein}} * 1000; if (popupdisplayed == "true") { modal.classList.remove("visible"); overlay.classList.remove("visible"); } else { setTimeout(function () { modal.classList.add("visible"); overlay.classList.add("visible"); initialFocus.focus(); }, fadeIn); } store.forEach((stored) => { stored....

Adding Metafields to Product Variants

B y By using metaafields we can store extra information on products, collections, customers, orders, blogs, pages and your shop. Then, you can use the metafields object to display the information on you website pages using simple Liquid code. The easiest way to add metafields is by using an app, such as Metafields Guru. It is possible to add metafields without an app using the bulk editor, here’s how. A metafield consists of a namespace, a key, a value, and an optional description....

Customized Header & Footer

Work in progress…...

Adding a Customized Size Swatch

M any Many themes come with a dropdown as the default size selector. Here’s how to change this to, for example, a list of buttons, similar to a color swatch. In this example I’m using Shopify’s Venture theme, but it should be similar for most other themes. In the product-template.liquid file in the sections folder search for the code beginning with: {% unless product.has_only_default_variant %} and ending with :...