{"id":13761066,"url":"https://github.com/dmccuskey/shopify-modern","last_synced_at":"2026-03-01T13:03:32.419Z","repository":{"id":141492720,"uuid":"93964630","full_name":"dmccuskey/shopify-modern","owner":"dmccuskey","description":"A modern template for developing Shopify-themes using Vuejs","archived":false,"fork":false,"pushed_at":"2017-06-20T05:30:30.000Z","size":138,"stargazers_count":149,"open_issues_count":0,"forks_count":30,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-14T05:37:15.466Z","etag":null,"topics":["shopify","shopify-theme","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmccuskey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-10T20:50:46.000Z","updated_at":"2025-03-17T16:12:04.000Z","dependencies_parsed_at":"2023-07-03T15:31:53.297Z","dependency_job_id":null,"html_url":"https://github.com/dmccuskey/shopify-modern","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmccuskey/shopify-modern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmccuskey%2Fshopify-modern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmccuskey%2Fshopify-modern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmccuskey%2Fshopify-modern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmccuskey%2Fshopify-modern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmccuskey","download_url":"https://codeload.github.com/dmccuskey/shopify-modern/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmccuskey%2Fshopify-modern/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29969700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T12:56:10.327Z","status":"ssl_error","status_checked_at":"2026-03-01T12:55:24.744Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shopify","shopify-theme","vuejs"],"created_at":"2024-08-03T13:01:36.931Z","updated_at":"2026-03-01T13:03:31.700Z","avatar_url":"https://github.com/dmccuskey.png","language":"Liquid","funding_links":[],"categories":["Liquid"],"sub_categories":[],"readme":"# shopify-modern\n\nThis proof-of-concept shows a method of creating an ecommerce experience for Shopify by using modern front-end development tools and techniques, while still leveraging some of the beneficial features of the Shopify system \u0026 infrastructure.\n\n\n## Overview\n\nShopify's Wordpress-like structure is as much fun to work with as Wordpress – \"let's develop like it's 1999!\" :-) These days we know that it can be done better.\n\nThis project shows a working, hybrid Shopify-template which still runs on the Shopify infrastructure. However, because of a very clear separation between Shopify and the front-end, we can develop the web experience using modern tools.\n\nWhile this project template is NOT full-SPA, it helps by giving a roadmap for those wanting to transform an existing Shopify template into one which is both modern and full-SPA. The project already has features to help with that goal in mind.\n\n\n\n## Benefits\n\nHere are some of the benefits of this framework / concept:\n\n**Framework**\n\n* Modern development with Vuejs\n* Internationalization (i18n)\n* Special tags \u0026 filters (like in Shopify Liquid)\n* Clear separation between Shopify Liquid \u0026 Vuejs code \u0026 markup\n* Rendered page components determined using Vuejs routes paired with Shopify URLs.\n* Avoid any potential issues with [Shopify 64k page-limit](https://help.shopify.com/manual/using-themes/troubleshooting/fix-64-kilobyte-limit-errors)\n* Search-bot friendly (soon)\n\n**Shopify**\n\n* Hosting / Scalability handled by Shopify\n* SEO friendly\n* Server-Side-Augmentation (ie, lightweight Server Side Rendering)\n* Settings / Config files still useful\n\n**Future**\n\n* Clear path to full-SPA\n* Ability to do *local* development !\n\n\n## How it works\n\nOne of the main benefits is that the framework can serialize many of the [Shopify data-objects](https://help.shopify.com/themes/liquid/objects). This serialized data can either be embedded in the primary HTML page or loaded later using HTTP requests. The corresponding front-end Vuejs objects can initialize themselves with either method.\n\nThough this doesn't qualify as full server-side rendering, having embedded data speeds up the initial page draw since the information will not need to be loaded by subsequent AJAX requests.\n\nIn the future, there will be more control over which data is embedded and which is lazy-loaded after the first page render.\n\n### Steps to Template-Freedom\n\nIf you want to start integrating the ideas into an existing project, your main goal is to move almost all of the site information out of the Liquid templates. Two important steps for that would be:\n\n1. insert app anchors into HTML\n\n\tDepending on how far along you are with the transition, you can use one or many anchors which will be under control of your framework (eg, Vuejs).\n\n\t```\n\t\t\u003c!-- a single anchor for the entire app (like in this project) --\u003e\n\t\t\u003cdiv id=\"vueapp\"\u003e\u003c/div\u003e\n\t```\n\n\t```\n\t\t\u003c!-- one of many anchors for individual components --\u003e\n\t\t\u003cdiv id=\"calendar-widget\"\u003e\u003c/div\u003e\n\t\t\u003cdiv id=\"product-picker-widget\"\u003e\u003c/div\u003e\n\t```\n\n1. integrate a normal build process\n\n\tuse Webpack or Gulp to generate a typical build file, eg `dist/build.js`.\n\n\t*Do NOT include any of your front-end code in the Fluid templates*. All of it should be inside of `build.js`, and that file being sourced from `theme.liquid`.\n\n\n## Setup\n\n(rough notes!)\n\n1. Install [Shopify Themekit](https://shopify.github.io/themekit/)\n1. Rename `config-sample.yml` to `config.yml`. Add your password, theme id, store name.\n1. Run `webpack` to re-pack code upon changes\n1. Run `themekit` to upload webpack output to Shopify\n\n\n## Libraries\n\nThis project uses these libraries:\n\n* https://shopify.github.io/themekit/\n\n\tWe use **themekit** to upload files, as opposed to [Slate](https://github.com/Shopify/slate), since **Slate** is geared towards traditional Shopify theme development. ([Quickshot](https://quickshot.readme.io) seems like a good choice, too.)\n\n\n## Inspiration\n\nInspiration for this project came from the following:\n\n* https://www.shopify.com/partners/blog/28500611-using-javascript-to-super-power-your-clients-shopify-site\n* https://github.com/tshamz/shopify-frankenstein\n\n\n## References\n\n* https://stackoverflow.com/questions/43505094/using-vue-js-in-shopify-liquid-templates\n\n\tAs a side benefit of using this structure, any issues with delimiter conflicts are avoided.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmccuskey%2Fshopify-modern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmccuskey%2Fshopify-modern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmccuskey%2Fshopify-modern/lists"}