Shopify theme development environment using Liquid, Vue and Tailwind CSS. Built on top of Shopify CLI 🧪
Home Page: https://uicrooks.github.io/shopify-theme-lab-docs/
License: MIT License
//
//
//
No response
4 (Current)
No response
Not a bug but the issue template limits me to creating a bug-report.
I’m quite new to both Vue and Shopify and my question is, if this affects SEO in some way (as vue gets rendered client-side, similar to React) or if the vue templates are getting statically rendered to HTML on build?
Thanks in regards!
Windows 10
15.5.0
2.1.0
Chrome
4 (Current)
No response
Attached screenshot of error in chrome console as well as asset url on shopify side.
macOS
14.0.0
2.0.0
No response
4 (Current)
No response
Would absolutely love a React version of this. Happy to discuss especially if you want help with it!
mac m1
14.18.0
2.7.1
Chrome
4 (Current)
No response
At present, my store uses shopify-theme-lab, but I found a problem, because the vue file is packaged and then published online. If I want to change a picture in the shopify background after publishing, then this The structure does not seem to be established, I need to pull it down and repackage it before pushing，I would like to ask if there is any solution
macOS Big Sur
16
2
Chrome, Safari
4 (Current)
No response
Can you explain the steps to adding jQuery?
I have a couple plugins that unfortunately required it -- I've tried a number of ways including using the ProvidePlugin in the webpack configuration, but keep getting the error "$ is undefined".
I have a custom Shopify theme and I need to add vue js only to a custom page template without affecting other page with my vue js code
VSCode collapses all spaces in a liquid file schema on save.
Properly formatted a Schema
All spaces/new line characters removed
Mac Os
14.0
2.0.0
Chrome
4 (Current)
No response
Trying to use Vue Js dev tools to help with some modifactions but get this, how do i turn this off?
Also love this framework!
"Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author."
Amazing theme as a starting point! Thank you for sharing!
When I was using Debut theme as a base for theme development, its homepage have the options to let the theme user (non-developer) to dynamically add sections (By using "Add Sections" in the theme customize page). But it seems this is theme is missing this option.
I spent a few hours on this problem and still can't figure out why or what's missing.
Mac OS
12.18
2.0
No response
3 (Legacy)
No response
Attempting to reference an image within the assets folder in our CSS to create a hard-coded background image but its failing. Any suggestions?
Hi @sergejcodes
The new @shopify alias in webpack comes into conflict if you add one of the shopify theme-scripts to your app.
I'm using the @shopify/theme-images library for responsive images and webpack fails to build the project when I import the package.
Link to the config issue:
I don't know if there is a way to avoid webpack alias when importing the lib.
One solution would be to change the alias.
I removed the alias from my project but it could happen to someone else. I just wanted to share this.
Thanks for your work 💪💪💪
Not really, we just want to use the router.
A /routes directory very much like the store is setup.
I would like a better understanding of how routing currently happens.
any os
any version
any version
Chrome
4 (Current)
Online Store 2.0 features are available on any development store created after June 29, 2021.
Is this correct? It seems if I have a production store running since last year I need to transfer my domain to new store? I doubt it but from this documentation people will think like that.
Online Store 2.0 features are available on any development store created after June 29, 2021.
Is this correct? It seems if I have a production store running since last year I need to transfer my domain to new store? I doubt it but from this documentation people will think like that.
If the documentation is not correct please fix this.
Shopify CLI v2.0.1
Shopify Theme Lab v4.0.2
Mac OS 11.2.3 Big Sur
Node v14.17.1
I just found out about this project and ran a new theme setup but can't seem to run npm run start successfully. Not sure if I missed a step or maybe running an incompatible version of node or something else.
Hitting a webpack rules error:
checkout_promotions_theme|⇒ npm run start
> [email protected] start /Users/gil/Sites/StoreRecon/checkout_promotions_theme
> run-p -sr shopify:serve webpack:watch
[webpack-cli] Failed to load '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js' config
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/plugin.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/index.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.common.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/webpack-cli.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/bootstrap.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/bin/cli.js
- /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js:9:42)
at Module._compile (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/plugin.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/index.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.common.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/webpack-cli.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/bootstrap.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/bin/cli.js',
'/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack/bin/webpack.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `run-p -sr shopify:serve webpack:watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/gil/.npm/_logs/2021-07-16T18_36_47_147Z-debug.log
shopify theme init -u https://github.com/uicrooks/shopify-theme-labnpm installnpm run startSome basic googling hinted at https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes VueLoaderPlugin but not seeing anything too crazy
Same error happens when using the foundation theme, shopify theme init -u https://github.com/uicrooks/shopify-foundation-theme
MacOS 10.15.7
12.13.0
2.7.1
Chrome
4 (Current)
No response
I'm having a problem rendering {{ content_for_layout }} on the recaptcha template using the if statement block included in theme.liquid. Since the if statement ensures Vue instance isn't initialized, I wouldn't imagine it'd be a Vue issue. The template-captcha.liquid snippet is rendering, but {{ content_for_layout }} isn't loading anything. Ever seen this before? Any ideas as to why this might be occurring? Thanks in advance.
Love Theme Lab and Foundation theme btw!
Mac
16
2.0
Chrome
4 (Current)
No response
Question.
How can I pass an array of items/products into a vue component ? (I would prefer pass data instead of using slots)
For instance:
<render-items :items="{{ products }}"></render-items>
I came from working with twig and in twig I would use a filter: :items="{{ products | json_encode }}"
What people use to do something similar to that, for example to pass images into a gallery, or other objects/arrays into a vue component ?
Thank you!
Windows 10
14.16.0
2.7.2
Chrome
4 (Current)
No response
Problem:
It seems ESLint extension can not detect the .config/.eslintrc.js
ESLint error is not showing up in the VS Code with ESLint extension. But the yarn fix:js work just fine.
Steps:
yarn the projectsrc/vue/components/renderOUTPUT in VS Code, select the ESLint output, and it said:[Info - 10:38:15 AM] ESLint server is starting
[Info - 10:38:16 AM] ESLint server running in node v14.16.0
[Info - 10:38:16 AM] ESLint server is running.
[Info - 10:38:17 AM] ESLint library loaded from: D:\_shopify\concept-themes\Nov-14-theme\node_modules\eslint\lib\api.js
[Warn - 10:38:22 AM]
No ESLint configuration (e.g .eslintrc) found for file: d:\_shopify\concept-themes\Nov-14-theme\src\vue\components\render\mouse-target.vue
File will not be validated. Consider running 'eslint --init' in the workspace folder Nov-14-theme
Alternatively you can disable ESLint by executing the 'Disable ESLint' command.
os x
17.6.0
2.11.2
Chrome
4 (Current)
No response
Uncaught SyntaxError: 60
at Yo (bundle.js?v=174704609598485302911655352976:68:540697)
at Pf (bundle.js?v=174704609598485302911655352976:68:584847)
at Array.Af (bundle.js?v=174704609598485302911655352976:68:585222)
at su (bundle.js?v=174704609598485302911655352976:68:559818)
at bundle.js?v=174704609598485302911655352976:68:560222
at su (bundle.js?v=174704609598485302911655352976:68:560232)
at bundle.js?v=174704609598485302911655352976:68:560222
at su (bundle.js?v=174704609598485302911655352976:68:560232)
at bundle.js?v=174704609598485302911655352976:68:560222
at su (bundle.js?v=174704609598485302911655352976:68:560232)
Mac OS Monterey
16
3.0
Chrome
4 (Current)
No response
When updating to Shopify CLI 3.0 the current package scripts to run the Shopify environment do not work from the root directory. It seems as though Shopify requires their scripts to run directly within the shopify directory. So the only workaround possible so to run two different scripts: one for Vue, CSS and JS Compiling and one for Shopify CLI
Someone also posted this issue within the Shopify CLI github repo: Shopify/cli#1394
Mac
17.6.0
2.11.2
Chrome
4 (Current)
I notice whenever I installed shopify apps comes with jquery widget and if it has it's app page they end of in a blank screen. Is this mean we can't have any app with jquery widget if I am using uicrook? If there is some workaround please let me know.
Install store locator or wish list go to it's application page the page is blank!
Reloader seems to have an issue, it says disconnected.
ERROR in console:-
WebSocket connection to 'ws://localhost:5050/' failed:
_init @ client.js:21
eval @ client.js:39
After adding vue-lazyload and in main.js:
import VueLazyload from "vue-lazyload";
...
Vue.use(VueLazyload);
then as soon as you add <img v-lazy="... in any template, it causes an error in the console:
Failed to generate render function:
SyntaxError: Unexpected token '}' in ....
Should v-lazy directive be somehow added as global directive under src/vue/directives ?
osx
0
2.00
Chrome
4 (Current)
No response
How do you deploy a theme without losing the changes made in the theme customiser? I would like to be able to copy over the changes I make in the temporary editor when using "npm run start"
Was a bit verbose for me out of the box figuring that the VSCode Vetur formatting doesn't clean most of this stuff up.
Might be helpful to have this link in there, took me a few minutes to find it.
Windows 10
14.0.0
2.0.0
No response
3 (Legacy)
No response
Hello, i've installed an add-on "Judgme App" to be more exact but everytime I enable it I get an javascript error in the browser "Uncaught SyntaxError: 59" .
I'm assuming this is because the add-on is installing a script inside my product.liquid page.
Is there anyway to make this work ? ( I only have this problem after I build the project , on dev is working fine )
Ubuntu
16
2.18
Chrome
4 (Current)
No response
/shopify/assets directory<img src="/assets/test.static.png">, or within a vue componentshopify theme serve, verify that it worksLinux Mint 19.3 Cinnamon
14.15.4
2.2.0
No response
4 (Current)
I added DaisyUI and Tailwind Forms plugins.
In tailwind.config.js:
module.exports = {
...
plugins: [
require('daisyui'),
require('@tailwindcss/forms'),
],
...
}
npm i @tailwindcss/forms) and added to tailwind.config.jsnpm run start and confirmed Tailwind Forms is working as expectednpm i daisyui) and added to tailwind.config.jsnpm run start and hit the following error:🌼 DaisyUI components 1.14.0 https://github.com/saadeghi/daisyui
✔︎ Including: base, components, themes[21], utilities
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.6, but postcss-preset-env uses 7.0.36. Perhaps this is the source of the error below.
1 asset
40 modules
ERROR in ./src/css/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 26
at Parser.error .(./node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (./node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (./node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (./node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (./node_modules/postcss-values-parser/lib/parser.js:51:17)
at ./node_modules/postcss-color-functional-notation/index.cjs.js:15:54
at ./node_modules/postcss/lib/container.js:72:18
at ./node_modules/postcss/lib/container.js:55:18
at Rule.each (./node_modules/postcss/lib/container.js:41:16)
at Rule.walk (./node_modules/postcss/lib/container.js:52:17)
at processResult (./node_modules/webpack/lib/NormalModule.js:721:19)
at ./node_modules/webpack/lib/NormalModule.js:827:5
at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (./node_modules/postcss-loader/dist/index.js:142:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.51.1 compiled with 2 errors in 2001 ms
Any ideas or suggestions how to get these DaisyUI working? Much appreciated 🌟
Mac
16
2
Chrome
4 (Current)
No response
I am trying to install an app (boostcommerce filters) manually and got stuck several times mainly because I think it relies on normal shopify structure. Has anyone install this app before? or another similar app ?
Any recommendation with filters using this repo/project/structure ?
Thank you!
Any plans to implement Shopify CLI & Online Store 2.0 support ?
https://www.npmjs.com/package/stylelint-scss
I added this to my fork because I have SCSS enabled by default, but it'd probably be nice to know for those adding SCSS support to shopify-theme-lab via the SCSS install instructions.
Without stylelint-scss and the rules change, you get a huge outpouring of warnings and it breaks your build. Really took me for a ride lol.
Nice learning exp though!
Windows 10
15.5.0
2.1.0
Chrome
4 (Current)
No response
When adding fonts to my assets folder, and then referencing per the docs I get some errors.
It looks like the fonts might be being uploaded to shopify as the wrong type of file?
Just as a preface, I’m a few versions behind release/version 3.
I apologize if I’m missing something, but I have duplicated a theme, (and updated the dev/live configs to use that new theme ID) and restarted all processes with the new config, however any changes I make go directly to the live (published theme).. that goes for styles, templates, pretty much every file.
We’re just baffled as to why the changes don’t only go to the new duplicated theme (that has the new ID in the config) it’s making it hard to work on edits since we don’t want the live site looking messed up.
If I make edits to files in the duplicated theme via the web editor they don’t leak over to the published theme, so I’m not sure what I have wrong.
Thank you,
Ryan
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.