This Shopify starter is a fork of UI Crooks. A quick nod to their team as it's an incredibly useful starter. Our goal with this version is to modify and update a few bits and pieces to make our life a little easier when it comes to authoring code in a consistent, clear and effective way.
Aside from the baseline features of UI Crooks we've included the following.
plop
files to quickly generate templated code files forVue
,JavaScript
,CSS
,Sections
andSnippets
.- Included
Sass
out of the box for nesting features. A note, however, while Sass isn't falling out of favor our big reason for using it here is pre-compilation benefits of nesting, functions and interpolation. When this is enabled "out of the box" for CSS we'll remove Sass. - A new Vue component file structure removing the need for
render
andrenderless
directories. More on that here: - A library of commonly used modules ready to go.
- Use
npm
as your package management tool. - Run
npm i
to install all packages. - Run
shopify login [--store <DOMAIN>]
. Reviewlogin
docs
Cart Functionality + StoreAnnouncement Bar (toggle open/close)Klaviyo Newsletter Module - List ID is determines displaySite Navigation (desktop)CarouselProgress Labs Credit SnippetKeen Slider](https://keen-slider.io/) integration (no longer using Flickity)Responsive Image Component (From Loisa codebase)- PDP Add To Cart - Basic
- PDP Add To Cart - With Options
- PDP Add To Cart - Subscription
- PDP Add To Cart - Sold Out / Notify Me
- FAQ Page / Accordion Section
- Klaviyo Back In Stock Notification
- Pinia Migration (vuex alternative) migration
- ADA Compliant Mobile Menu
- ADA Complient Purchase Form
- Convert to Shopify CLI 3.0
- When a component is required to display initial content from the server for SEO
- When the functionality can be reused for other areas
- When SEO does not matter.
- When component is initially out of view.
- When the element is not necessary for user experience. Example: Mini cart.
Shopify Foundation Theme is modern Shopify theme built with Shopify Theme Lab, Vue and Tailwind CSS.
- All Shopify Theme Lab features
- Online Store 2.0 support
- Starter Theme ready for customization
- Clean structure
- Vue.js
- Tailwind CSS
- Responsive
- Image lazy-loading
Everything from the Shopify Theme Lab docs applies to this project, since it was built with Shopify Theme Lab.
#Math in liquid
Whole integer values will only return whole integers with math filters. If you are expecting a float you have to make sure one is a float.
Example:
{{ 500 | divided_by: 660 }} = 0
{{ 500.0 | divided_by: 660.0 }} = 0.7575757575757576
{{ 500 | divided_by: 660.0 }} = 0.7575757575757576