Desk Accessories Shopify Theme

A modern, responsive Shopify theme designed for desk accessories e-commerce stores.

Features

• Modern Design System: Built with HSL color tokens for easy customization
• Fully Responsive: Mobile-first approach ensures perfect display on all devices
• Dark/Light Mode: Theme toggle for user preference
• Ajax Cart: Smooth cart experience with drawer functionality
• SEO Optimized: Proper meta tags and semantic HTML structure
• Accessibility: WCAG compliant with proper ARIA labels
• Performance: Optimized CSS and JavaScript for fast loading
• Smooth Animations: CSS animations for enhanced user experience

Theme Structure

├── assets/              # CSS, JavaScript, and other static files
│   ├── theme.css       # Main stylesheet with design system
│   ├── theme.js        # Main JavaScript file
│   └── base.css        # Base utility styles
├── config/              # Theme configuration files
│   ├── settings_schema.json
│   └── settings_data.json
├── layout/              # Theme layouts
│   └── theme.liquid    # Main layout file
├── locales/             # Translation files
│   └── en.default.json
├── sections/            # Reusable sections
│   ├── header.liquid
│   ├── footer.liquid
│   ├── hero.liquid
│   ├── featured-products.liquid
│   ├── trust-badges.liquid
│   └── newsletter.liquid
├── snippets/            # Reusable snippets
│   ├── header.liquid
│   ├── footer.liquid
│   ├── product-card.liquid
│   └── meta-tags.liquid
└── templates/           # Page templates
    ├── index.liquid           # Homepage
    ├── collection.liquid      # Collection/Shop page
    ├── product.liquid         # Product detail page
    ├── blog.liquid           # Blog listing
    ├── article.liquid        # Blog post
    ├── page.liquid           # Default page
    ├── page.contact.liquid   # Contact page
    ├── cart.liquid           # Cart page
    ├── search.liquid         # Search results
    └── 404.liquid            # Error page

Installation

1. Download the theme files
2. Zip the entire theme folder (not the parent folder)
3. Upload to Shopify:
   • Go to Online Store > Themes in your Shopify admin
   • Click "Upload theme"
   • Select the zip file
   • Click "Upload"

Customization

Colors

The theme uses CSS custom properties (variables) for colors. You can customize them in assets/theme.css:

:root {
  --primary: 222.2 47.4% 11.2%;
  --secondary: 210 40% 96.1%;
  /* ... more color tokens */
}

Sections

All homepage sections can be customized through the Shopify Theme Editor:

• Hero Section: Edit title, subtitle, button text, and images
• Featured Products: Choose collection and number of products
• Trust Badges: Customize badges and text
• Newsletter: Edit copy and button text

Typography

Change fonts in Theme Settings > Typography in the Shopify admin.

Pages Setup

Required Pages

Create these pages in Shopify admin (Online Store > Pages):

1. About (/pages/about)
2. Contact (/pages/contact) - Use the "page.contact" template
3. Shipping Policy (/pages/shipping)
4. Returns (/pages/returns)
5. FAQ (/pages/faq)
6. Privacy Policy (/pages/privacy-policy)
7. Terms of Service (/pages/terms-of-service)

Blog Setup

Create a blog in Shopify admin (Online Store > Blog Posts) with handle news.

Features Guide

Cart Functionality

The theme includes an Ajax cart drawer that opens when products are added. To customize:

• Cart type (drawer/page) can be changed in Theme Settings
• Cart drawer styles are in layout/theme.liquid
• Cart logic is in assets/theme.js

Newsletter Integration

Newsletter forms use Shopify's customer email collection. Forms are located in:

• Footer (snippets/footer.liquid)
• Newsletter section (sections/newsletter.liquid)

Product Cards

Product cards are reusable snippets that display:

• Product image with hover effect
• Title and vendor
• Price (with compare-at-price if on sale)
• Quick add to cart button
• Sale/New badges

Dark Mode

Theme toggle button is in the header. Preference is saved to localStorage.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Performance

The theme is optimized for performance:

• Minimal JavaScript
• CSS is modular and efficient
• Images use lazy loading
• Ajax cart reduces page reloads

Support

For issues or questions about this theme, please refer to Shopify's theme documentation.

Version

Current version: 1.0.0

License

Copyright © 2024. All rights reserved.