Learn SHOPIFY-LIQUID with Real Code Examples

# shopify_liquid/demo/CounterApp
1. Create a snippet 'counter.liquid'.
2. Add a variable 'counter' initialized to 0.
3. Add a Button element with an onClick JS handler to increment 'counter'.
4. Display 'counter' using {{ counter }} in the snippet.
5. Include the snippet in a page template.
6. Preview the storefront to see live updates when clicking the button.

A basic Shopify Liquid example that increments a counter when a button is clicked and displays it using Liquid variables and JavaScript.

# shopify_liquid/demo/ProductList
1. Create a snippet 'product-list.liquid'.
2. Loop through products: {% for product in collection.products %}
3. Display product title: {{ product.title }}
4. Display product price: {{ product.price | money }}
5. End loop: {% endfor %}
6. Include snippet in a collection template.

A basic Shopify Liquid snippet that loops through products and displays their title and price.

# shopify_liquid/demo/ProductDetails
1. Create a snippet 'product-details.liquid'.
2. Display product title: {{ product.title }}
3. Display product image: <img src='{{ product.featured_image | img_url: 'medium' }}'>
4. Display product price: {{ product.price | money }}
5. Include snippet in a product template.

A basic Shopify Liquid snippet to show a single product’s title, image, and price.

# shopify_liquid/demo/AddToCartButton
1. Create a snippet 'add-to-cart.liquid'.
2. Add a form: <form action='/cart/add' method='post'>
3. Add hidden input for product ID: <input type='hidden' name='id' value='{{ product.variants.first.id }}'>
4. Add button: <button type='submit'>Add to Cart</button>
5. Close form.
6. Include snippet in product template.

A basic Shopify Liquid snippet that adds a product to the cart with a button.

# shopify_liquid/demo/CartItemCount
1. Create snippet 'cart-count.liquid'.
2. Display cart item count: {{ cart.item_count }}
3. Include snippet in header or sidebar template.

A snippet to display the total number of items in the cart.

# shopify_liquid/demo/FeaturedCollection
1. Create snippet 'featured-collection.liquid'.
2. Loop through featured products: {% for product in collections['featured'].products %}
3. Display product title and price: {{ product.title }} - {{ product.price | money }}
4. End loop: {% endfor %}
5. Include snippet on homepage.

A snippet to display featured products from a collection.

# shopify_liquid/demo/BlogPosts
1. Create snippet 'blog-posts.liquid'.
2. Loop through posts: {% for article in blog.articles %}
3. Display title: {{ article.title }}
4. Display excerpt: {{ article.excerpt }}
5. End loop: {% endfor %}
6. Include snippet in blog template.

A snippet to list blog posts with titles and excerpts.

# shopify_liquid/demo/ImageGallery
1. Create snippet 'image-gallery.liquid'.
2. Loop through product images: {% for image in product.images %}
3. Display image: <img src='{{ image | img_url: 'medium' }}'>
4. End loop: {% endfor %}
5. Include snippet in product template.

A snippet to display a gallery of product images.

# shopify_liquid/demo/NavigationMenu
1. Create snippet 'nav-menu.liquid'.
2. Loop through menu items: {% for link in linklists.main-menu.links %}
3. Display link: <a href='{{ link.url }}'>{{ link.title }}</a>
4. End loop: {% endfor %}
5. Include snippet in header template.

A snippet to display a navigation menu with links.

# shopify_liquid/demo/FooterLinks
1. Create snippet 'footer-links.liquid'.
2. Loop through footer links: {% for link in linklists.footer-menu.links %}
3. Display link: <a href='{{ link.url }}'>{{ link.title }}</a>
4. End loop: {% endfor %}
5. Include snippet in footer template.

A snippet to display footer links dynamically.