Sometimes it may be necessary to change the default page layout in your X-Cart store to make your store unique or to adapt the default layout to meet your business requirements. You can do this easily using a built-in addon Theme Tweaker. This addon allows adding your own CSS styles and JavaScript codes to the existing X-Cart ones, adding custom images or even editing text labels and rearranging the info blocks on the page.

For earlier X-Cart versions that used the Custom Skin addon instead of Theme Tweaker.

To switch from Custom Skin to Theme Tweaker without losing your files, you should copy them from XC5_DIR/skins/custom_skin to XC5_DIR/skins/theme_tweaker (XC5_DIR is the directory where your X-Cart 5 instance is installed).

NB: If there are custom changes in the PHP files, they will have to be manually transferred to a separate custom addon and updated to be compatible with X-Cart 5.4.0.x.

Theme Tweaker will create a new addon with a copy of the store’s default template modified by your changes. In addition to the unbeatable convenience of making changes on the fly, every tweak you implement with this tool will be saved correctly in accordance with the OOP paradigm.

Please make sure the addon is installed and enabled before you proceed. theme_tweaker_addon.png

While the addon is enabled, you can change skins with one click in the Look and feel > Layout section of your store Admin area and apply changes to the existing store layout directly on the storefront using Webmaster mode.

For this purpose log in as an admin and open the storefront using the “View storefront” button on any page of your store Admin area. view-storefront.png

The storefront will be opened in a new tab. Find the ‘Gear’ icon in the bottom left corner and click on it to start editing pages using Webmaster mode. (For X-Cart 5.4.0.x and later the Webmaster Mode panel is always visible at the bottom of the storefront when opened by a logged in administrator).

gear-icon.png
modes.png

Webmaster mode provides five convenient tools that you can use to apply changes to the different parts of your site. More info on these tools is available in the sections below:

  1. Template Editor
  2. Custom CSS
  3. Layout Editor
  4. Labels Editor
  5. Description Editor

Related pages: