Introduction

Version: 1.3.0
Author: Faisal Safadi

Welcome to Eyelit! Thank you for choosing our theme. Eyelit is not just an e-commerce theme; it’s a complete, specialized solution designed for creating and selling unique, personalized iris artwork. This comprehensive documentation will guide you through every step, from installation to launching your unique online store.

System Requirements

Eyelit is a powerful theme designed for high-resolution media. To ensure a flawless experience, especially during demo import and for your customers uploading their photos, your hosting environment must meet these minimum requirements.

Core Requirements:

• WordPress Version: 6.0 or higher
• PHP Version: 7.4 or higher

Essential PHP Configuration Limits:

These settings directly impact the maximum file size your customers can upload and the stability of the demo import process.

• upload_max_filesize = 64M — **This is the maximum size for a single iris photo a customer can upload.**
• post_max_size = 64M — Must be equal to or greater than the upload max size.
• memory_limit = 256M (512M recommended for sites with high traffic)
• max_execution_time = 300 (seconds)

How to Increase Your PHP Limits

If you encounter issues, the easiest way is to **contact your hosting provider** and ask them to set the values listed above. For advanced users, you can try editing your php.ini or .htaccess file.

Installation Flow (5 Steps)

Follow these five steps in order to replicate the demo site perfectly. The entire process is designed to be completed in under 15 minutes.

Step 1: Install the Theme

1. In your WordPress Dashboard, go to Appearance > Themes > Add New > Upload Theme.
2. Upload the eyelit.zip file and activate it.

Step 2: Install & Activate Required Plugins

After activating the theme, a notification will appear at the top of your screen prompting you to install the plugins that power Eyelit. For a stable and error-free setup, we recommend installing and activating them in a specific order.

In the notification at the top of your screen, click the “Begin installing plugins” link. You will be taken to the plugin installation screen.

1. Install Core Plugins

First, we will install the main plugins. Do not use the “Bulk Actions” yet.

• Find Eyelit Functionality in the list and click its “Install” link.
• Find Elementor and click its “Install” link.
• Find WooCommerce and click its “Install” link.
• Find Smart Slider 3 and click its “Install” link.
• Find Contact Form 7 and click its “Install” link.

2. Install WooCommerce Add-ons

Now that WooCommerce is installed, we can safely install the plugins that depend on it.

• Find Variation Swatches for WooCommerce and click its “Install” link.
• Find YITH WooCommerce Wishlist and click its “Install” link.

3. Activate All Plugins

Once all plugins are installed, we can activate them all at once.

1. Click the “Return to Required Plugins Installer” link at the bottom or top of the page.
2. Check the box at the top of the list to select all plugins.
3. From the “Bulk Actions” dropdown menu, select Activate.
4. Click the Apply button.

Plugin Overview:

• Eyelit FunctionalityRequired – Adds your “Eyelit Styles” post type, Elementor widgets, and other core features.
• ElementorRequired – The page builder used to create all the layouts.
• WooCommerceRequired – Powers all e-commerce functionality.
• Smart Slider 3Required – Used for the stunning hero sliders.
• Variation Swatches for WooCommerceRequired – Enhances product options with color swatches.
• YITH WooCommerce WishlistRequired – Enables the wishlist feature.
• Contact Form 7Required – Used for the newsletter and contact forms.
• One Click Demo ImportRecommended – As explained in the next step, you will install this plugin manually to import the demo.

Step 3: Import the Demo Content

This step will make your site look exactly like our live demo by importing all pages, products, settings, and the crucial Elementor Kit which styles your entire site.

3.1 – Install the Demo Import Plugin

1. In your WordPress Dashboard, go to Plugins > Add New.
2. In the search bar, type “One Click Demo Import”.
3. Find the plugin by OCDI team in the search results and click “Install Now”, then “Activate”.

Once the plugin is active, a new menu item will appear under “Appearance”.

3.2 – Run the Importer

1. Now, navigate to Appearance > Import Demo Data.
2. You will see the Eyelit demo available. Click the main “Import Demo” button.
3. A confirmation window will appear. Please be patient, as this can take several minutes. **Do not close or refresh the page** until you see the success message.

Step 4: Import the Homepage Slider

Due to plugin limitations, the homepage slider must be imported manually.

1. In your WordPress dashboard, go to the Smart Slider 3 menu.
2. From the Dashboard you can import a slider if you click on the New Project button and click on the “Or Import Your Own Files” link.

3. Select your slider files from the Documentation/Slider folder, then click on the Import button.

4. Repeat homepage-slider-1.ss3 homepage-slider-2.ss3 and homepage-slider-3.ss3 .

Step 5: Finalize the Setup

1. Update Permalinks: Go to Settings > Permalinks and simply click “Save Changes” once. This prevents “404 Not Found” errors on your new pages.
2. Clean-up (Optional): You can now go to **Plugins** and **Deactivate** and **Delete** the “One Click Demo Import” plugin. It is no longer needed.

Step 6: Home page

1. Select home page: Go to Settings > Reading
2. Select Home page (Home One, Home Two, Or Home Three)

The Core Concept: Eyelit Styles

Step 1: Create Your Art Styles

1. In your WordPress admin, go to Eyelit Styles > Add New. This is a special post type for your designs.
2. Give your style a title (e.g., “Galaxy Fusion Duo” or “Minimalist Solo”).
3. In the “Template Details” box, set the **Price Adjustment** (e.g., `10` for a style that costs $10 extra) and the **Number of Images Required** (1 for a solo, 2 for a duo, etc.).
4. Set a **Featured Image** to be the customer-facing preview of the style.
5. Publish your style. Repeat for all the designs you offer.

Step 2: Assign Styles to a WooCommerce Product

1. Go to Products > Add New or edit an existing product.
2. On the right-hand sidebar, find the “Available Eyelit Styles” box.
3. Check the boxes for all the styles you want to offer for this specific product.
4. Update the product. The product page will now automatically display the full customization interface for your customers.

Theme Customization (Global Settings)

All global design options are conveniently located in Appearance > Customize > Eyelit Theme Options. This is your central hub for site-wide design changes. Any setting configured here will apply to your entire site, unless overridden by a Per-Page Setting.

General & Branding

This section controls the core identity of your site.

• Logo: Upload your standard (dark) logo.
• Logo – Light Version: Upload a light-colored version of your logo. This will be used automatically when the header is in “transparent” mode over a dark image.
• Site Title & Tagline: Standard WordPress settings.
• Site Icon (Favicon): Upload the small icon that appears in browser tabs.

Header

Fine-tune every aspect of your site’s main navigation area.

• Layout & Visibility:
  • Header Layout: Choose from 4 distinct header designs (Logo Left, Logo Centered, Minimal, Top Bar + Main Header).
  • Show Icons: Individually toggle the visibility of the Account, Wishlist, and Cart icons in the header.
• Standard Header Colors:
  • Background Color: Sets the main background for the header.
  • Link Color / Link Hover Color: Control the colors of your menu items.
  • Top Bar Background (Style 4): A dedicated color control for the top bar used in Header Layout 4.
• Sticky & Transparent Header:
  • Enable Sticky Header: Makes the header “stick” to the top of the screen on scroll.
  • Transparent on Front Page: Makes the header transparent before the user starts scrolling (only on the homepage).
  • Sticky Background Color & Opacity: Control the color and transparency of the header *after* the user has scrolled down. This creates the popular “frosted glass” effect.
  • Sticky Link Colors: Set different colors for your menu links when the header is in its sticky state.
• Off-Canvas Menu (Mobile):
  • Background Color: Set the background color for the slide-out menu on mobile devices.

Layouts & Page Headers

This powerful section lets you define the default structure for all major parts of your website.

• Shop & Products: Set the default sidebar position (Left, Right, or Full Width) for all your WooCommerce pages.
• Blog & Posts: Set the default sidebar position for your main blog page and individual articles.
• Pages: Set the default sidebar position for all standard WordPress pages.
• Page Header Styling: Control the global appearance of the large title area that appears below the main menu. You can set a default background image, a fallback background color, overlay color, overlay opacity, and text color.

Typography

Define your brand’s typography with precision.

• Headings & Body Font: Choose from a curated list of high-quality, self-hosted Google Fonts for your headings (H1-H6) and main body text.
• Font Sizes: Control the base font size for the body text, and set a specific font size for each heading level (H1 through H6) individually.

Colors

Establish a consistent color palette across your entire website.

• Primary & Secondary Color: These are your main brand colors, used for buttons, links, and highlights throughout the theme.
• Text & Headings Color: Define the default colors for all standard text and titles.
• Link Color: Set the color for text links.
• Site Background Color: Choose the main background color for your site.

Footer

Customize the bottom section of your site.

• Footer Layout: Choose from 5 unique pre-designed footer layouts.
• Footer Logo: Upload a specific logo to be used in the footer (often a light version).
• Colors: Set distinct background colors for the main footer widget area and the bottom copyright bar. You can also control the copyright text color.
• Copyright Text: Edit the copyright information displayed at the very bottom of your site.
• Social Links: Simply paste the URLs to your social media profiles (Facebook, Twitter, Instagram, etc.), and the icons will appear automatically in supported footer layouts and via the `
  ` shortcode.

Thank You Page

Personalize the experience for your customers right after they complete a purchase.

• Main Title & Subtitle: Customize the main message your customers see on the order confirmation page.
• Timeline Steps (1-5): Edit the title and description for each of the 5 steps in the “What’s Next” timeline, allowing you to perfectly match the process to your production workflow.

Site Features

Toggle extra theme features.

• Show “Back to Top” Button: Enable or disable the floating button that allows users to quickly scroll to the top of the page.
• 404 Page Image: Upload a custom illustration or image to be displayed on your “Page Not Found” error page for a more branded experience.

Custom Elementor Widgets

Eyelit includes a powerful suite of 12 custom-built widgets, all neatly organized under the “Eyelit Widgets” category in the Elementor editor. These allow you to build complex layouts with ease.

• Products Grid/Slider

  Display your WooCommerce products in a stylish grid or a touch-friendly slider. Query by latest, featured, on-sale, or select products manually for full control.

• Product Categories Grid

  Showcase your product categories with stunning card designs. Can be displayed as a grid or a slider.

• Styles Showcase

  A stunning, filterable gallery dedicated to showcasing all your available “Eyelit Styles”. This helps customers visualize the possibilities and choose their favorite design before purchasing.

• Filterable Gallery

  A magnificent, professional portfolio gallery. Add images, assign categories, and let users filter them with a click. Features both Grid and Masonry layouts, with a “Load More” button.

• Call To Action (CTA)

  A flexible widget to create promotional banners. Combine text, buttons, and images or videos in 1 or 2-column layouts with advanced alignment and styling options.

• Testimonials

  Build trust with a beautiful testimonials section. Display customer reviews in a clean grid or an auto-playing slider.

• Section Headline

  A beautiful and highly customizable title block, perfect for introducing any section of your page. Includes subtitle, main title, and description fields.

• Accordion / FAQ

  A clean and modern accordion for creating FAQ sections or organizing content in collapsible panels.

• Blog Posts Grid

  Display your latest blog articles anywhere on your site with the same beautiful card design as your main blog page.

• Features Grid

  A versatile list to highlight key features or services (like “Free Shipping”, “Quality Support”). Combine icons, titles, and descriptions in a clean, multi-column layout.

• Logo Showcase

  Display a grid of partner or client logos. Options include linkable images and modern hover effects.

• Promo Banner

  Create eye-catching promotional banners with a background image and a customizable content box overlay.

Per-Page Settings (Individual Control)

When editing a page, post, or product, look for the “Page Settings” box in the right-hand sidebar. This allows you to:

• Override Layout: Force a specific page layout (e.g., “Full Width” on a page that is normally with a sidebar).
• Control Page Header: Show or hide the header for just that page, or set a unique background image and title to make it stand out.

FAQs & Troubleshooting

Find answers to common questions and solutions to potential issues below.

I get an error when uploading the theme or importing the demo!

This issue is almost always caused by insufficient server resource limits. The demo import is a demanding process that requires enough memory and time to complete successfully.

The Solution: The easiest way is to contact your hosting provider and ask them to set the following PHP values for your account. This is a standard request.

• memory_limit = 256M (or 512M)
• upload_max_filesize = 64M
• post_max_size = 64M
• max_execution_time = 300 (seconds)

For advanced users, you can try adding these values to your .htaccess or php.ini file.

My customer can’t upload their photo. Is there a size limit?

Yes, the maximum size for an uploaded photo is determined by the upload_max_filesize setting on your server. The recommended value of **64MB** is very generous and should be more than enough for high-quality iris photos from any modern camera or smartphone.

How do I update the theme?

When an update is available, a notification will appear in your WordPress dashboard under Dashboard > Updates. Simply follow the prompts to update. We strongly recommend making a backup of your site before updating.

How do I translate the theme?

Eyelit is fully translatable. The easiest method is to use a free plugin like Loco Translate.

1. After installing the plugin, go to Loco Translate > Themes, select **Eyelit**, and add your language.
2. Then, go to Loco Translate > Plugins and do the same for **Eyelit Functionality** to translate the widget texts.

How can I improve my site’s speed?

Eyelit is built to be fast. To further optimize performance, we recommend the following:

• Caching Plugin: Essential for speed. We recommend W3 Total Cache (free) or WP Rocket (premium).
• Image Optimization: Crucial for an image-heavy site. Use a plugin like Smush to compress images automatically.
• Database Optimization: A plugin like WP-Optimize can help keep your database clean and efficient.

Child Theme & Advanced Customization

Support

Thank you again for your purchase. If you have any questions that are beyond the scope of this documentation, please feel free to contact us through our support channels on the marketplace where you purchased the theme.