Download The definitive guide to shopify themes : master the design skills to build world-class ecommerce PDF

TitleThe definitive guide to shopify themes : master the design skills to build world-class ecommerce
File Size9.2 MB
Total Pages241
Table of Contents
                            Table of Contents
About the Author
About the Technical Reviewer
Chapter 1: A Shopify Theme Primer
	Anatomy of a Shopify Theme
		Theme Structure
		Liquid, Shopify’s Templating Language
	Working with Shopify Themes
		Setting Up Development Stores
Chapter 2: Tools and Workflow
	Moving to Local Development
		Synchronizing Changes to Shopify
			Introducing Theme Kit
			Using Theme Kit
	Putting Your Theme Under Version Control
		A Git Workflow for Shopify Themes
			Theme Feature Branches with Git
	Slate and Theme Build Tools
		Grunt and Gulp: Automated Task Runners
		Other Workflow Automation Tools
		Introducing Slate
Chapter 3: Principles and Process
	Principles of Design
		Understanding Design Goals
		Design for Humans
		Design for Different Contexts
	Principles of Development
		Keep It Simple
		Utilize Progressive Enhancement
		Document Things
		Use Defensive and Modular Programming
	Principles of Process
		Client and Project Match
		Iterative Development and Client Investment
		Expectation Setting
		User Testing
Chapter 4: Designing Theme Foundations
	A Starting Point
		Theme Scaffolds
		Sample Product Data
		Your Theme’s Layout
	Designing Layout and Navigation
		The Site Header
			Making the Header Configurable
		The Navigation Menu
			Navigation Menu Design
		The Site Footer
Chapter 5: Designing Product Pages
	The Product Page
	Product Page Information Hierarchy
	Adding Product Imagery
		Design Considerations for Product Images
		Shopify’s Image Filters
		Zoomable Product Images and Product Lightboxes
		Product Video
	Adding Product Details and the Add To Cart Form
		Product Details and Description
		Add To Cart Form
	Adding Recommended Products
		Related versus Alternate Products
		Recommended Products on Shopify
	Improving the Product Page
		Adding Product Information
			Managing Additional Information with Metafields
		Improving the Mobile Experience
		Creating Alternate Page Templates
Chapter 6: Designing Home and Collection Pages
	The Home Page
		Design Goals for Home Pages
			Conveying the Brand
			Conveying Your Product Range
			Clear Next Actions
		Implementing a Home Page
			Getting Started with Home Page Sections
			Adding a Hero Image Section
	Collection Pages
		Design Goals for Collection Pages
		Shopify Collection Page Concepts
			Categorization in Shopify
			Putting It All Together
		Implementing a Collection Page
			Adding a Product Loop with Pagination
			Adding Sort Functionality
			Alternative Views of Product Listings
			Adding Alternative Views to the Example Theme
			Adding Category-Level Filtering
			Adding Tag-Based Filtering
			Progressively Enhancing the Collection Page
Chapter 7: Carts, Checkouts, and Content
	The Cart Page
		Design Goals for Cart Pages
		Implementing a Cart Page
			Adding an Editable List of Cart Contents
			Adding a Shipping Cost Calculator
			Adding an Upsell Offer
	The Checkout
		Customizing the Checkout with Shopify Plus
			Adding a Store Pickup Selector in the Checkout
	Content Pages
Chapter 8: Theme Settings and Going Global
	Theme Settings
		What Should Be Made a Setting?
			Settings for “One-Off” Themes
			Settings for “Multi-Use” Themes
			Settings for “Distributed” Themes
		Theme Setting Guidelines
		Using Settings in Your Themes
			The Iteration Pattern
			Using Settings with Preprocessed Files
			The Default Filter
	Going Global
		The Difference Between i18n and l16n
			Locales, Not Languages
		Why Localization Matters
			Required by Higher Authority
			Empirical Demand
		Go Hard or Go Home
		Limitations of Shopify Themes
		Making Themes Translatable
			Don’t Forget JavaScript!
		Presenting Customers with Multiple Currencies
Chapter 9: SEO and Social Sharing
	Search Engine Optimization (SEO)
		Off-Page versus On-Page
		Semantic HTML
		Keywords and Content
			Keyword Analysis
			Duplicate Content
		Structured Data
			The Vocabulary
			Enter JSON-LD
	Social Sharing
		Open Graph Markup
			Adding Open Graph Markup
			Testing Open Graph Markup
		Twitter Card Markup
			Adding Twitter Card Markup
			Validating Twitter Card Markup
		Caring about Sharing
			Deciding Which Share Options to Support
			Integrating Sharing
Chapter 10: Performance
	Why Performance Matters
	Why Performance Gets Ignored
	Performance Analysis and Metrics
		Performance Measuring Tools
			PageSpeed Insights
			Yahoo YSlow
			Which Tool to Use?
		Theme Performance Metrics
			Key Metric 1: Page Weight
			Key Metric 2: Number of HTTP Requests
			Key Metric 3: Time to Load
	Performance Optimization Techniques
		Technique 1: Page Simplification
		Technique 2: Image Optimization
			Image Optimization Basics
			Automating Image Optimization
			Pushing Boundaries with Lossy Image Optimization
		Technique 3: Asset Concatenation
			Large JavaScript Libraries
			Assets Using Theme Settings
			Assets Used Only on a Specific Page
			Automatic Concatenation
			Image Concatenation
			Future Developments
		Technique 4: Asset Minification
			How to Minify Your Assets
		Technique 5: Odds and Ends
			Implement Device-Responsive Design
			Use Lazy Loading
			Use Conditional Loading for Shims/Fallbacks
			Master the “async” Attribute
			Check for Asset 404s and 301s
	Evaluating Performance Improvements
	Final Thoughts
Chapter 11: Collaborative Theme Development
	Collaborating on Themes
		Collaborative Workflows with Version Control
		Collaborative Deployment Processes
			Cloning Shopify Stores
	The Shopify Theme Store
		Getting In to the Theme Store
			Familiarize Yourself with the Process
			Have a Novel or Unique Angle
			Work Closely with the Themes Team
			Follow the Theme Liquid and Content Guidelines
			Be Ready for Support
		What to Do if Your Theme Doesn’t Make It
			Go It Alone
			Use Alternative Theme Marketplaces
			Use Open-Source
	Leveraging the Shopify Ecosystem
	Where to Join
		Official Shopify Channels
		Other Resources
		IRL Events
		Use Open-Source

Similer Documents