> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start Guide

> Get up and running with Nexus Theme in minutes

Welcome to Nexus Theme! This guide will help you get your Shopify store up and running with our modern, high-performance theme in just a few minutes.

## Prerequisites

Before you begin, make sure you have:

* A Shopify store

## Installation

### Install from Shopify Theme Store

1. **Visit the Shopify Theme Store**
   Navigate to [themes.shopify.com](https://themes.shopify.com) and search for "Nexus"

2. **Preview the Theme**
   Click on Nexus Theme to view the demo and features

3. **Add to Your Store**
   Click "Add theme" to install Nexus to your Shopify store

4. **Customize and Publish**
   Go to **Online Store → Themes** in your Shopify admin and customize Nexus before publishing

## Initial Setup

### 1. Configure Basic Settings

Navigate to **Online Store → Themes → Actions → Edit code** and configure:

<Steps>
  <Step title="Color Scheme">
    Choose from 8 pre-built color schemes or create a custom one:

    * 💧 Light Blue
    * 🌊 Dark Blue
    * 🌹 Light Red
    * 🔥 Dark Red
    * 🍀 Light Green
    * 🌿 Dark Green
    * 🍊 Light Orange
    * 🎃 Dark Orange
    * 🎨 Custom

    <Callout>
      Light themes work best for bright, clean designs. Dark themes provide a modern, premium feel and are easier on the eyes in low-light conditions.
    </Callout>
  </Step>

  <Step title="Typography">
    Configure your font settings:

    * **Heading Font**: Inter (default) or choose from Google Fonts
    * **Body Font**: Inter (default) for optimal readability
    * **Accent Font**: Playfair Display for elegant headings

    <CodeGroup>
      <CodeGroupItem title="CSS Variables">
        ```css theme={null}
        --font-heading: 'Inter', sans-serif;
        --font-body: 'Inter', sans-serif;
        --font-accent: 'Playfair Display', serif;
        ```
      </CodeGroupItem>
    </CodeGroup>
  </Step>

  <Step title="Layout Settings">
    Configure your store layout:

    * **Container Width**: Choose between 1200px, 1400px, or full-width
    * **Header Style**: Select from multiple header layouts
    * **Footer Style**: Choose footer layout and content
    * **Product Grid**: Configure product display options
  </Step>
</Steps>

### 2. Set Up Your Homepage

<Steps>
  <Step title="Add Hero Section">
    Create an engaging homepage hero:

    1. Go to **Online Store → Themes → Customize**
    2. Click **Add section** on your homepage
    3. Select **Hero Section**
    4. Configure content blocks:
       * Eyebrow text
       * Main heading
       * Subheading
       * Description
       * Call-to-action buttons
       * Background image
  </Step>

  <Step title="Add Featured Collection">
    Showcase your best products:

    1. Add **Featured Collection** section
    2. Select your featured collection
    3. Configure display options:
       * Products per row
       * Show product info
       * Quick view options
  </Step>

  <Step title="Add Additional Sections">
    Build out your homepage with:

    * **Product Showcase**: Highlight specific products
    * **Testimonials**: Display customer reviews
    * **Newsletter Signup**: Capture email subscribers
    * **Instagram Gallery**: Integrate social media
    * **Trust Badges**: Build customer confidence
  </Step>
</Steps>

### 3. Configure Product Pages

<Steps>
  <Step title="Product Gallery">
    Set up product image display:

    * Enable zoom functionality
    * Configure thumbnail navigation
    * Set up image aspect ratios
    * Enable video support
  </Step>

  <Step title="Product Information">
    Configure product details:

    * Variant selector with swatches
    * Product description tabs
    * Size guide integration
    * Related products
    * Customer reviews
  </Step>

  <Step title="Cart Functionality">
    Set up shopping cart:

    * Cart drawer configuration
    * Cross-sell products
    * Shipping calculator
    * Discount code display
  </Step>
</Steps>

## Customization

### Color Schemes

Nexus Theme comes with 8 pre-built color schemes. To customize:

1. Go to **Theme Settings → Color Schemes**
2. Select **Custom** from the dropdown
3. Configure your brand colors:
   * Primary color
   * Secondary color
   * Accent color
   * Background colors
   * Text colors

<CodeGroup>
  <CodeGroupItem title="Custom Colors">
    ```css theme={null}
    --color-primary: #007AFF;
    --color-secondary: #5856D6;
    --color-accent: #FF3B30;
    --color-background: #FFFFFF;
    --color-surface: #F8F9FA;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #6E6E73;
    ```
  </CodeGroupItem>
</CodeGroup>

### Typography

Customize your fonts and text styling:

1. Go to **Theme Settings → Typography**
2. Choose from Google Fonts or upload custom fonts
3. Configure font sizes and spacing
4. Set up responsive typography

### Layout Options

Configure your store layout:

* **Header**: Choose from multiple header styles
* **Footer**: Customize footer content and layout
* **Product Grid**: Set up product display options
* **Collection Pages**: Configure collection layouts

## Performance Optimization

### Image Optimization

<Steps>
  <Step title="Optimize Product Images">
    * Use WebP format when possible
    * Compress images before uploading
    * Use appropriate image sizes
    * Enable lazy loading (built-in)
  </Step>

  <Step title="Configure Image Settings">
    * Set up image aspect ratios
    * Configure thumbnail sizes
    * Enable zoom functionality
    * Set up image alt text
  </Step>
</Steps>

### Speed Optimization

Nexus Theme is optimized for performance:

* **Critical CSS**: Automatically inlined for faster loading
* **Lazy Loading**: Images and videos load as needed
* **Asset Optimization**: Minified CSS and JavaScript
* **Service Worker**: Offline functionality support

## Next Steps

Now that your Nexus Theme is set up, explore these resources:

<Cards
  title="Continue Learning"
  description="Dive deeper into Nexus Theme features"
  cards={[
{
  title: 'Theme Sections',
  description: 'Learn about all available sections and their options',
  href: '/sections/hero-section',
  icon: '🎨'
},
{
  title: 'E-commerce Features',
  description: 'Explore advanced e-commerce functionality',
  href: '/features/product-pages',
  icon: '🛍️'
},
{
  title: 'Customization',
  description: 'Customize colors, typography, and layouts',
  href: '/customization/color-schemes',
  icon: '⚙️'
},
{
  title: 'Development',
  description: 'Set up development environment and workflow',
  href: '/development',
  icon: '🔧'
}
]}
/>

## Need Help?

If you run into any issues:

* 📖 **Documentation**: Browse our comprehensive guides
* 🎫 **Support**: [Submit a support ticket](https://support.hurterdesignstudio.com/)

<Button href="https://support.hurterdesignstudio.com/" size="lg">
  Get Support
</Button>