Theme Editor

​

Main Features

• Drag and Drop Support:
  Move blocks within the page and instantly adjust the layout.
• Text and Image Editing:
  Edit text fields directly and add custom images to your pages.
• Video Section Integration:
  Some pages feature an integrated video section where you can add multiple YouTube videos.
  Simply:
  • Enter the YouTube video URL.
  • Upload a thumbnail image.
  • Click “Add Video.”
• Forks (File Area) Support:
  The “Forks” area lets users directly download files.
  Files uploaded through the theme editor appear with a one-click download option.

​

Why Use It?

• Create visually rich pages without technical expertise.
• Manage promotional, campaign, or media pages in one place.
• Add functionality to pages with integrated video and file sections.

​

1. How to Edit the Theme

The Theme Editor lets you edit your site’s front-end pages directly from the admin panel. You can reposition elements with drag and drop, update text instantly, and enrich pages with visuals. 1. Log in to your admin panel.
2. Click the “Brush” icon in the left menu.
3. Go to the “Appearance” tab.
4. Click “Theme Editor.” What You Can Do in the Theme Editor:

• Edit text fields: Update titles, descriptions, and button labels directly.
• Change or upload images: Add or update visuals in promo areas.
• Reposition blocks using drag and drop.
• Enable or disable widgets (components).

The Theme Editor is available for specific system pages, including the video section and forks (download area).

​

2. How to Use Forks

Forks are dedicated areas on certain pages where users can download files directly. You can add files through the theme editor, enrich them with titles and descriptions, and create a more interactive presentation. 1. Log in to your admin panel.
2. Click the “Brush” icon in the left menu.
3. Go to the “Appearance” tab.
4. Click “Theme Editor.”

​

What You Can Do in the Fork Section

• Add a new file (fork):
  • Enter a file name (example: “Setup Guide.pdf”).
  • Add a description explaining its purpose.
  • Drag and drop or browse to upload the file.
• Add multiple files: Each file appears as a separate card.
• Reorder files: Use drag and drop to change their order.
• Download buttons generate automatically: Users can download files easily from this area.

This section is ideal for:

• Software installation files
• Plugin, mod, or resource sharing
• User guides
• Content templates

​

3. How to Use the Video Section

Within the Theme Editor, the video section lets you embed multiple YouTube videos on your video page. It is perfect for showcasing product demos, tutorials, or community updates.

​

What You Can Do in the Video Section

• Click “Add Video” to create a new video card.
• Fill in the following details:
  • YouTube Video Link:
    Enter the embed URL (for example: https://www.youtube.com/embed/XXXXX).
  • Thumbnail Image:
    Upload an image to appear before playback.
    This serves as the video’s cover image.
• Click “Add Video” again to include more videos.
• Reorder videos with drag and drop.

​

4. How Users Select a Theme Color

Visitors and members can switch between dark and light themes anytime. This feature enhances user comfort and provides optimal viewing in any environment.

​

How It Works

1. Set a default theme mode from the admin panel:

• Dark theme
• Light theme

2. Visitors see the default theme on their first visit. 3. A theme switch button at the bottom of the page or in the user menu lets them change the appearance instantly. 4. The chosen theme preference is saved as a cookie in the browser.
It persists on refresh or future visits.

​

Benefits of Theme Color Options

• Reduces eye strain for nighttime visitors.
• Improves readability in bright conditions.
• Delivers a personalized experience for each user.
• Reflects your brand’s modern, user-focused design.

​

5. Theme Customization Tips

Customize your site’s theme beyond colors. Adjust structure, visuals, typography, and usability to create a brand-specific look. These tips help you make the most of the theme editor.

​

1. Color Palette Harmony

• Define a primary, secondary, and accent color that match your brand identity.
• Maintain good contrast among background, text, and button colors.
• Test color balance separately for dark and light modes.

​

2. Cover Images and Banners

• Use images at least 1280x720 resolution for homepage or special sections.
• Optimize file size for fast loading without losing quality.
• Choose static, high-resolution visuals over animated banners.

​

3. Typography and Content Layout

• If your theme supports it, use clean and readable fonts from Google Fonts.
• Keep paragraph spacing, heading sizes, and button text consistent.
• Use uppercase for headings and clear, well-punctuated sentences in body text.

​

6. Highlight Colors and Logo Settings

Colors and logos represent your site’s visual identity. Manage them through the theme settings panel to give users a cohesive, branded experience. 1. Log in to your admin panel.
2. Click the “Brush” icon in the left menu.
3. Go to “Theme Settings” or “Appearance > Theme Editor.”

​

Color Settings

• Primary Color:
  Applies to buttons, links, and highlights. It should reflect your main brand color.
• Secondary Color:
  Used for hover effects, subheadings, or secondary elements.
• Heading and Text Color:
  Ensure enough contrast for readability (for example, dark text on a light background).
• Background Color:
  Sets the page base tone, adjustable for light or dark themes.

​

Logo and Icon Settings

• Main Logo:
  Displayed at the top of your site. Recommended format: transparent PNG.
  Suggested size: Max 250x80px.
• Dark Theme Logo (optional):
  Upload a lighter logo for better visibility in dark mode.
• Favicon:
  Appears in the browser tab.
  Format: ICO or PNG, 32x32px recommended.

​

Tips

• Choose logos that contrast well with your background.
• Ensure color harmony between your logo and brand palette.
• Always test the layout on different devices (mobile and tablet).

You are all set! Your store now looks more polished and professional.