• Liquid Reference
• Liquid Cheatsheet
• Shopify Templates
• Shopify Liquid Objects
• Slate Docs
• Design

Design

Build a global navigation using linklists and a snippet based on the provided design.

• Snippets
• SVGs as Snippets
• Images in Shopify
• Linklists
• Liquid Loops

• Use a snippet file for the Liquid/HTML of the Navigation
• Add your snippet file to theme.liquid so that it's global
• Use the already created linklist called "Main menu" for the links on the right
• Use a liquid loop to loop over the links within the linklist
• Convert SVG files into snippets and use the snippets within the navigation for the icons on the right

• Includeing Snippets
• Linklist Object
• Link Object
• Liquid Loops
• Forloop Object

Design

Create the index template with a homepage hero section using Shopify sections

• Sections
  • What is a section?
  • How does it work, schema? (theme settings)
  • Limitations
• Image Object
• Image Filters

• Index Template
• Shopify Schema
• Shopify Sections
• Image Object
• Image Filters

Design

Build a product recommendations section that allows the merchant to display 4 products of their choosing. To prevent code duplication use a snippet for the product tile.

• Blocks in Sections
• Products
• Money Filters

• Use a section with repeatable blocks
• Each block should allow the user to select a product
• Limit the amount of blocks to 4
• Use a liquid loop to iterate over the section blocks
• Use a snippet for displaying the product tile

• Product Object
• Money Filters
• Image/URL Filters
• Shopify Sections
• Shopify Schema

Design

Create a collection template that showcases the collection title, description and main image in a banner at the top of the page.

• Collections
• Featured Image

• Create a banner using the collection image
• Overlay the collection title & description text on top of the banner

• Collection Template
• Collection Object
• Image Filters

Design

Create a collection product grid that uses pagination.

• Collection Products
• Connection between different Shopify objects (collection, product, variant, etc)
• Pagination

• Use a loop to iterate through the collection products
• Re-use the product tile snippet
• Paginate the collection, 8 products per page, 4 products per row
• Use the default pagination filter tag to display additional page links

• Paginate A Collection
• Paginate Object
• Pagination Filters
• Collection Template
• Collection Object

Design

Create a product template that displays a 50/50 layout with production information and add-to-cart functionality.

• Deeper Understanding of Products
• Further Liquid Filters
• Product Form
• Add To Cart

• Build a 50/50 template
• Display the product featured image, title, price and description
• Create a variant dropdown using a loop
• Use a product form tag to handle add-to-cart

• Product Template
• Product Object
• Variant Object
• Money Filters
• Image/URL Filters

Design

Build a cart page that displays the products that are in the user’s cart, shows the total price and allows the user to remove any specific product from their cart.

• Cart
• Line Items

• Use a loop to display the contents or the cart
• Use a snippet to display each line item
• Create a link to remove individual products from the cart
• Use the cart form to submit the cart to checkout

• Cart Object
• Line Item Object

• Continue this exercise by building out the more advanced version of this demo theme
• Advanced Design