Layout Editor is a tool of the Theme Tweaker addon that aims at editing a page layout. You can drag‑n‑drop the info blocks using this tool to change the position. It can also help to change the store logo, favicon and Apple icon if necessary.

Editing Storefront Layout Format

Layout Editor allows changing the default storefront layout from 1 up to 3 column format and back splitting the changes between the store homepage and other site pages.

To change the page layout format:

  1. When logged in as a store administrator, click on the Layout Editor tab at the bottom of any storefront page: 541-layout-editor-tab.png This opens the Layout Editor tool.

  2. Refer to the Storefront Layout part of the tool to change the page format.
    • To change the homepage format, click the Home page dropdown and select the layout you need: 541-home-page-layout.png

    • To change other pages format, click the Other pages dropdown and select the layout you need: 541-other-pages-layout.png

  3. Click Save, to make the changes active. 541-save-changes.png

Changing Logo, Favicon and Apple Icon

The Layout Editor tool allows changing the default X-Cart logo, favicon and Apple icon directly on the storefront.

For this purpose:

  1. When logged in as a store administrator, click on the Layout Editor tab at the bottom of any storefront page: 541-layout-editor-tab.png This opens the Layout Editor tool.

  2. Refer to the Logo & Favicon part of the tool to change the page format. 541-logo-favicon-editor.png

  3. Click the image icon (logo, favicon or app icon), to see a dropdown with options. 541-logo-icon-options-dropdown.png

  4. The actions to apply changes are straightforward:
    • choose the change you need;
    • click on the option name and follow the regular procedure.
  5. Click Save, to make the changes active. 541-save-changes.png

Repositioning Layout Elements

To edit a page layout:

  1. When logged in as a store administrator, choose a page in the storefront that you want to edit.
  2. Click on the Layout Editor tab at the bottom of the page: 541-layout-editor-tab.png This opens the Layout Editor tool.

  3. Enable the Drag-n-drop blocks option within the Layout Editor tool. 541-drag-n-drop-on.png
  4. Hover a mouse to see the blocks that you can work with on the chosen page. 541-highlighted-block.png

  5. Apply the required changes:
    • To change a block’s position, pick it with a mouse and start dragging. The system will highlight a place on the page where the block can be dropped.

      541-default-block-plave.png
      541-new-block-place.png
    • To disable a block, click on the EYE icon within it. 541-eye-icon-disable-block.png

      The block will be removed from the page and will be listed as disabled. 541-disabled-block-list.png

    • To enable a block back, click the Enable button that appears instead of the block name in the disabled blocks list. 541-enable-block.png

    • To reset the page layout to the default state, click Reset layout. 541-reset-layout.png

  6. Click Save to activate the changes. 541-save-changes.png