BVA Bootcamp

Basic References

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

Module 1 - Navigation

Design

Objectives

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

Learning Points

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

Requirements

• 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

Helpful Links

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

Module 2 - Homepage Hero Section

Design

Objectives

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

Learning Points

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

Helpful Links

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

Module 3 - Homepage Shop Products Section & Reusable Product Tile

Design

Objectives

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.

Learning Points

• Blocks in Sections
• Products
• Money Filters

Requirements

• 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

Helpful Links

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

Module 4 - Collection Banner

Design

Objectives

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

Learning Points

• Collections
• Featured Image

Requirements

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

Helpful Links

• Collection Template
• Collection Object
• Image Filters

Module 5 - Collection List

Design

Objectives

Create a collection product grid that uses pagination.

Learning Points

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

Requirements

• 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

Helpful Links

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

Module 6 - Product Main Section

Design

Objectives

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

Learning Points

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

Requirements

• 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

Helpful Links

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

Module 7 - Cart Page

Design

Objectives

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.

Learning Points

• Cart
• Line Items

Requirements

• 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

Helpful Links

• Cart Object
• Line Item Object

Going Beyond

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