New Arrivals E-Commerce WordPress Theme

A modern, mobile-first e-commerce landing page theme for WordPress with dynamic content management via Advanced Custom Fields (ACF).

Features

• ✅ Mobile-first responsive design
• ✅ ACF integration for dynamic content
• ✅ WooCommerce compatible
• ✅ Accessibility-focused (WCAG compliant)
• ✅ SEO-friendly markup
• ✅ Performance optimized
• ✅ Cross-browser compatible
• ✅ WordPress Customizer support

Requirements

• WordPress 6.0 or higher
• PHP 7.4 or higher
• Advanced Custom Fields (ACF) plugin (Free or Pro)
• WooCommerce (optional, for cart functionality)
• Contact Form 7 (optional, for newsletter form)

Installation

Step 1: Install Required Plugins

1. Log in to your WordPress admin panel
2. Go to Plugins > Add New
3. Search for and install:
   • Advanced Custom Fields (required)
   • WooCommerce (optional)
   • Contact Form 7 (optional)
4. Activate all installed plugins

Step 2: Install the Theme

1. Download the theme folder (wordpress-theme)
2. Rename it to new-arrivals-ecommerce (optional)
3. Upload to your WordPress installation:
   • Via FTP: Upload to /wp-content/themes/
   • Via Admin: Go to Appearance > Themes > Add New > Upload Theme
4. Activate the theme from Appearance > Themes

Step 3: Create Homepage

1. Go to Pages > Add New
2. Title: "Home" or "Homepage"
3. In the right sidebar, under Template, select Homepage
4. Click Publish
5. Go to Settings > Reading
6. Set "A static page" and select your new homepage
7. Save changes

Step 4: Configure Content

Homepage Content (ACF Fields)

After creating the homepage, you'll see ACF fields below the editor:

Announcement Bar:

• Announcement Message
• Announcement Link
• Announcement Link Text

Hero Banner:

• Hero Title
• Hero Subtitle
• Hero CTA Text
• Hero CTA Link
• Hero Background Image

Brand Logos:

• Add multiple brands with name and logo image

Products Section:

• Products Section Title
• Products Section Description
• Products (repeater):
  • Product Name
  • Product Image
  • Category
  • Price
  • Original Price (optional)
  • Badge (NEW, TRENDING, LIMITED, SALE)
  • Product Link

Theme Settings

1. Go to Theme Settings in the WordPress admin menu
2. Configure:
   • Footer About Text
   • Social Media URLs (Facebook, Instagram, Twitter, YouTube)

Customizer Options

1. Go to Appearance > Customize
2. Configure:
   • Theme Colors: Primary and Accent colors
   • Header Settings: Logo text, cart icon visibility
   • Footer Settings: Copyright text

Step 5: Set Up Menus

1. Go to Appearance > Menus
2. Create a new menu called "Primary Menu"
3. Add pages/links:
   • New Arrivals
   • Men
   • Women
   • Sale
4. Assign to Primary Menu location
5. Create another menu called "Footer Menu" for footer links
6. Assign to Footer Menu location

Step 6: Configure Newsletter (Optional)

If using Contact Form 7:

1. Go to Contact > Contact Forms
2. Create a new form with ID "newsletter"
3. Add an email field
4. The theme will automatically use this form in the footer

Theme Structure

wordpress-theme/
├── style.css                    # Theme header
├── functions.php                # Theme functions
├── index.php                    # Default template
├── header.php                   # Header template
├── footer.php                   # Footer template
├── page-home.php                # Homepage template
├── assets/
│   ├── css/
│   │   └── main.css            # Main stylesheet
│   └── js/
│       └── main.js             # Main JavaScript
├── inc/
│   ├── acf-fields.php          # ACF field definitions
│   └── customizer.php          # Customizer options
└── template-parts/
    ├── announcement-bar.php    # Announcement bar component
    ├── hero-banner.php         # Hero banner component
    ├── brand-carousel.php      # Brand carousel component
    └── product-grid.php        # Product grid component

Customization

Colors

Edit colors in Appearance > Customize > Theme Colors or modify CSS variables in assets/css/main.css:

:root {
  --primary: #0B6FFF;
  --accent: #FF6B6B;
  /* ... more variables */
}

Typography

Fonts are loaded from Google Fonts (Inter and Poppins). To change fonts, edit functions.php:

wp_enqueue_style( 
    'new-arrivals-fonts', 
    'https://fonts.googleapis.com/css2?family=YourFont:wght@400;600;700&display=swap'
);

Layout

All layout styles are in assets/css/main.css. The theme uses a mobile-first approach with responsive breakpoints:

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

WooCommerce Integration

The theme is WooCommerce-ready:

1. Install and activate WooCommerce
2. Complete the WooCommerce setup wizard
3. The cart icon in the header will automatically show cart count
4. Product "Add to Cart" buttons will integrate with WooCommerce

Troubleshooting

ACF Fields Not Showing

• Ensure ACF plugin is installed and activated
• Check that you've selected the "Homepage" template for your page

Styles Not Loading

• Clear browser cache
• Go to Settings > Permalinks and click "Save Changes"
• Check file permissions on the theme folder

Cart Count Not Updating

• Ensure WooCommerce is installed and activated
• Clear browser cache
• Check browser console for JavaScript errors

Support

For issues or questions:

1. Check WordPress and plugin versions meet requirements
2. Deactivate other plugins to check for conflicts
3. Switch to a default WordPress theme to isolate the issue
4. Check browser console for JavaScript errors

Credits

• Design inspired by modern e-commerce best practices
• Icons from Lucide Icons
• Fonts from Google Fonts (Inter, Poppins)

License

This theme is licensed under the GPL v2 or later.

Changelog

Version 1.0.0

• Initial release
• Mobile-first responsive design
• ACF integration
• WooCommerce compatibility
• Accessibility features

new-arrivals-e-commerce