# Basic Setup

After installing Plain Jane Starter, follow this guide to configure the essential settings for your store.

## Step 1: Access Theme Settings

1. **Go to Theme Editor**

   ```
   Shopify Admin → Online Store → Themes
   ```
2. **Open Customizer**
   * Find "Plain Jane Starter" in your themes
   * Click **"Customize"** button
   * This opens the theme customizer

\
\&#xNAN;*Captured automatically on 2025-07-17*

## Step 2: Essential Settings Configuration

### Announcement Bar Setup

The announcement bar appears at the top of your store.

1. **Navigate to Settings**
   * In customizer, click **"Theme settings"** at bottom
   * Find **"Announcement Bar"** section
2. **Configure Announcement**
   * **Announcement Text**: Enter your message
     * Example: "Free shipping on orders over $50"
   * **Show Announcement Bar**: Toggle ON
   * **Announcement Bar Color**: Choose background color
   * **Announcement Text Color**: Set text color for readability
3. **Best Practices**
   * Keep text short and actionable
   * Use contrasting colors for readability
   * Update regularly with current promotions

### Typography Configuration

Set your brand fonts across the entire store.

1. **Find Typography Section**
   * In theme settings, locate **"Typography"**
2. **Configure Fonts**
   * **Body Font**: For general text (paragraphs, descriptions)
   * **Header Font**: For headings and titles
   * **Button Font**: For button text
3. **Font Selection Tips**
   * Choose readable fonts for body text
   * Ensure headers complement your brand
   * Test on mobile devices
   * Stick to 1-2 font families maximum

### Clock Settings

Set your store's timezone for consistent time display.

1. **Access Clock Settings**
   * Find **"Clock Settings"** in theme settings
2. **Select Timezone**
   * Choose from the dropdown list
   * Select your business location timezone
   * Examples: "America/New\_York", "Europe/London", "Asia/Tokyo"
3. **Why This Matters**
   * Affects timestamp displays
   * Important for international customers
   * Ensures consistent time references

## Step 3: Shop Logo Upload

Add your brand logo to establish identity.

1. **Navigate to Shop Logo**
   * Find **"Shop Logo"** in theme settings
2. **Upload Logo**
   * Click **"Shop Logo"** field
   * Upload your logo file (PNG, JPG, SVG recommended)
   * **Logo Size**: Adjust using the range slider (65-165px)
3. **Logo Guidelines**
   * Use high-resolution images
   * Transparent background (PNG) works best
   * Test at different sizes
   * Ensure readability on mobile

## Step 4: Basic Shop Layout

Configure how products display on collection pages.

1. **Find Shop Layout Settings**
   * Locate **"Shop Layout"** section
2. **Configure Grid**
   * **Desktop Columns**: Choose 2 or 3 columns
   * **Mobile Columns**: Choose 1 or 2 columns
   * **Column Gap**: Spacing between products
   * **Row Gap**: Vertical spacing
3. **Product Display Options**
   * **Product Image Size**: Percentage of container (60-100%)
   * **Product Box Width**: Container size (550-780px)
   * **Make Product Box Responsive**: Recommended ON
   * **Enable Endless Scroll**: Enable infinite loading
4. **Layout Tips**
   * 3 columns work well for stores with many products
   * 2 columns give more space for product details
   * Mobile should typically use fewer columns

## Step 5: Basic SEO Settings

Set up essential SEO elements.

1. **Access SEO Settings**
   * Find **"SEO Settings"** in theme settings
2. **Upload Icons**
   * **Favicon**: Small icon for browser tabs (32x32px)
   * **Apple Touch Icon**: For mobile bookmarks (120x120px)
3. **Enable Rich Snippets**
   * **Product Rich Snippets**: Turn ON
   * **Article Rich Snippets**: Turn ON
   * These help with search engine visibility

## Step 6: Preview and Test

After basic configuration:

1. **Preview Changes**
   * Click **"Preview"** to see changes
   * Test on desktop and mobile
   * Check all essential pages
2. **Test Essential Functions**
   * Navigation works properly
   * Logo displays correctly
   * Fonts look good
   * Layout is responsive
3. **Save Settings**
   * Click **"Save"** in customizer
   * Changes are saved automatically but saving ensures nothing is lost

## Common Setup Issues

### Logo Not Displaying

* Check file format (PNG, JPG, SVG)
* Verify file size isn't too large
* Clear browser cache

### Fonts Look Wrong

* Try different font combinations
* Check if font loads on mobile
* Clear browser cache

### Layout Issues

* Adjust product box width
* Check responsive toggle setting
* Test on actual mobile device

## Next Steps

With basic setup complete, move on to detailed customization:

👉 **Next**: [Essential Configuration](/plain-jane-starter/getting-started/essential-configuration.md) - Fine-tune your store appearance and functionality.

## Quick Checklist

Before moving on, ensure you've completed:

* ✅ Announcement bar configured
* ✅ Fonts selected and tested
* ✅ Timezone set correctly
* ✅ Logo uploaded and sized
* ✅ Shop layout configured
* ✅ SEO settings enabled

***

## Need Help?

💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>

📧 **Email us at:** <support@openspaces.design>

💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website

* ✅ Preview tested on mobile and desktop


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/plain-jane-starter/getting-started/basic-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.