Vue Storefront 2 for shopify

# Ecommerce and theme features

The following document lists the most important (but not all!) features of Shopify integration with Vue Storefront 2 (opens new window) offering.

# eCommerce integration and theme

# Product Tile

  1. Display product image
  2. Display product regular/sale price
  3. Display product name
  4. Display product catalog discounts
  5. Quick Add to Cart (with default variant)

# Product Listing Page

  1. Products
    1. Display a list of products for a specific collection
    2. Display number of total products found
    3. Display Breadcrumbs
  2. Pagination
    1. Display pagination
    2. Change the number of items per page
  3. Sorting
    1. Sort latest
    2. Sort by Title: A to Z
    3. Sort by Title: Z to A
    4. Sort by Price: Low to high
    5. Sort by Price: High to low
    6. Sorting is reflected in the URL
  4. UI
    1. Horizontal/Vertical product list switch

# Product Details Page

  1. Product
    1. Display master variant
    2. Display product name
    3. Display product price
    4. Display discounted price
    5. Display product description
  2. Product Variants
    1. Display product variants
    2. Change variant
    3. Variant change is reflected in the URL
  3. Product Gallery
    1. Show all product images as thumbnails
    2. Show one big product image
    3. Change big product image with one of thumbnails
    4. Change active variant image on variant selection
  4. Add to cart
    1. Add product variant to cart
    2. Change quantity
  5. Suggested products
    1. Display a list of suggested products from the same collection

# Cart drawer

  • Product
    • Display product name
    • Display product price
    • Add product to cart
    • Remove product from cart
    • Confirmation on remove from cart
    • Change product Quantity
    • Empty cart
  • Summary
    • Show total price

# User Authentication

  • Log in with email and password
  • Create a new account
  • Reset password

# User Profile

  • My Profile (Personal Details)
    • Change firstname
    • Change lastname
    • Change password with adding confirm password
  • Address book
    • Delete address
    • Change address
    • View all address
  • Order History
    • See Order Status
    • See Order Id
    • See Order Price
    • Download Orders
    • Order tracking
    • Order address
  • Log Out

# Error page

  • Error Page for 404/server errors

# Content Management System

  1. Out of the box components available in the CMS
    • Accordion
    • Alert
    • Banner
    • Call to action
    • Carousel
    • Editorial (renders HTML)
    • Footer
    • Gallery
    • Grid
    • Heading
    • Hero
    • Link
    • List
    • Navigation list
    • Product Card
    • Product Slider
    • Steps
    • Tabs

# Internationalization

  1. Frontend translations based on nuxt-i18n
    1. String translations based on keys
    2. Currencies translation
    3. Automatic routes generation and custom paths
    4. Search Engine Optimization
    5. Lazy-loading of translation messages
    6. Redirection based on auto-detected language
    7. Different domain names for different languages
  2. eCommerce platform internationalization connected with nuxt-i18n
  3. CMS platform internationalization connected with nuxt-i18n

# Progressive Web App

  1. Automatic Web Manifest generation
  2. Automatic icons scaling
  3. Static Assets Caching (partial offline support)
  4. Add to Home Screen

# Performance

  • Two output modes
    • Modern mode without polyfills for modern browsers (20-30% smaller)
    • Legacy mode for old browsers (minority)
  • Server-Side Rendering
  • Server-Side Tag-based Cache
  • Majority of JS code is executed on the server side to keep small bundles
  • Automatic route-based code splitting (incl. CSS)
  • Static assets client-side caching via Service Worker
  • CSS Purging
  • Preconnects to CDNs/Google Fonts
  • HTTP/2 Push
  • Lazy Hydration of below-the-fold elements

# Middleware

  • Server-side Express API middleware

← Maintainers and support →