Creating Theme from Scratch

This section describes how to create and customize a theme in osCommerce from scratch.

1) Accessing Theme Management

1. Go to the Admin Area of your website.
2. In the left-hand menu, select Design and CMS → Themes.

From this page, you can:

• Add Theme Group, Import Theme, or Add Theme by clicking the corresponding buttons.
• Backup, Move to Group, Copy, or Customize your existing themes.
• Rename, Switch between information and image views, or Delete a theme using the icons next to each one.

Tip: It is recommended to copy an existing theme and use it as a base for your new one. This makes the setup process faster and easier.

2) Customizing a Copied Theme

After the theme is copied (this process may take some time):

1. Click Customize within the copied theme.
2. To add a widget:
   • Hover the mouse over the desired location and click Add Widget,
   • Or click open the Widgets panel, locate the desired widget, and click to add it,
   • Or simply drag and drop the widget directly to the desired place.

Existing widgets can be:

• Edited
• Dragged and dropped
• Exported
• Deleted

using the corresponding icons.

Note: Widget settings differ depending on the widget type.

For example, you can set font, background, and padding for an external widget container, unless these styles are overridden inside the widget itself.

3) Working with Widget Groups

• You can create and manage widget groups in the same way as individual widgets.

• When a widget group is exported, it is automatically added to the Widget Groups list.

• To manage groups:
  • Click Add to create a new group,
  • Edit the group’s name and page type,
  • Or delete existing groups if no longer needed.

4) Managing Pages

1. Click the Pages button.
2. From this section, you can:
   • Locate and open a required page,
   • Copy, Edit settings, or Delete the page,
   • Or access a page directly by entering its URL.

5) Editing Texts

1. Click the Edit Texts button.
2. Hover over and click the desired text link.
3. Edit the text directly using the built-in Translation Tool.

6) Previewing Changes

Before saving your changes, click Preview in Popup to check how the theme appears and verify that everything meets your requirements.

7) Managing Backups and Import/Export

1. Open the Backups tab.
2. Backups are created automatically, but you can also create one manually by clicking New Backup.
3. You can Import or Export a theme using the respective buttons.
   • When exporting, you may include menus or banners by checking the corresponding boxes.

8) Theme Settings and Details

Under the Theme Settings and Main Details tabs, you can:

• View or update existing settings,
• Add new settings by clicking the appropriate button.

9) Managing Images

1. Go to the Images tab.
2. Upload images for:
   • Favicon
   • Logo
   • Background
   • Default category/product image (if no image is provided)
   • Preloader image (for lazy loading)

10) Managing Fonts

1. Open the Font tab.
2. View existing fonts or click Add Font to add a new one.
3. Click the bin icon to delete a font.

Adding a Google Font

1. Go to fonts.google.com.
2. Choose the desired font and click the Link option.
3. Copy the highlighted link and paste it into your browser.

4. Copy the generated font code from the new page.

5. Click Add Font in your theme and paste the code into the new field.

11) Responsive Design Sizes

Under the Sizes for responsive design tab:

• View or add custom min-width and max-width breakpoints as required.

12) Managing Styles

1. Open the Styles tab.
2. Click the + icon to add a new style block, then the pencil icon to edit it.
3. You can modify:
   • Font
   • Background
   • Border colors
   • Font family
4. Use the From and To fields to define style ranges, then click Change to apply.

13) Working with CSS and JavaScript

• CSS Tab:
  • Choose a widget or page CSS class (classes beginning with b = blocks, p = pages, w = widgets).
  • Click Add to create a new widget.

• js Tab:
  • Add JavaScript that applies to all pages if necessary.

14) Viewing Logs

1. Go to the Log tab.
2. View a list of all theme changes.
3. Click Details to see more information about specific updates.

15) Switching Between Devices

At the top of the designer, click Mobile or Desktop tabs to switch between versions and preview how your theme appears on different devices.