Talk to an Expert Back to CS-Cart.com

Layouts

Layouts determine the visual structure of your storefront. To better understand it, let’s review the key concepts:

  • Layout is the overall visual structure of your website or storefront.
    • Each layout consists of layout pages. Layout pages correspond to specific pages or types of pages on the storefront, such as Catalog, Profile, and others.
      • Each page has a defined logical structure. This structure, without visual content, is called the page framework. The page framework determines where elements such as the top panel, header, and footer are positioned.
      • Independent sections within a page that are grouped by functionality are called blocks. Each block displays specific information, such as a logo, product card, search form, etc.
      • Blocks are grouped into containers. Containers are structural elements that group blocks and other containers. It is important to note that while a block is a logical unit, a container is a structural wrapper.

The following illustrations show the storefront structure and how a page is composed:

Storefront Blocks Containers

Editing Layouts On-Site

  1. In the Admin panel, go to Website → Themes.

  2. In the Current theme section click Edit layout on-site.

  3. The storefront will open, where elements available for editing will be highlighted with a dotted line. You can drag and drop these elements with the mouse or remove them. You can also switch between pages as in the normal mode.

    When you hover the mouse over an editable element, a button menu appears:

    Hovering the mouse to edit the layout
    • the gear button opens the layout editing menu for the layout page you were on when you clicked this button;
    • the eye icon allows you to hide the element on the storefront, and show it again when clicked once more;
    • the arrow buttons allow you to change the position of the element on the page.

Editing Layouts in the “Layouts” Menu

  1. In the Admin panel, go to Website → Themes → Layouts.

    Layout pages have gear buttons next to their names.

  2. The Editing layout: Main menu will open with full configuration of layouts, pages, grids, blocks, and containers.

  3. To edit all these logical and structural elements, locate the desired element and hover your mouse over it. A menu with buttons will appear:

    Hover the mouse over the layout element to edit it

    Here you can add a new element (for example, a block or a grid), edit or delete it, as well as enable or disable the display of this element.

  4. To view the changes you have made, click the gear button in the upper-right corner of the page. In the menu that opens, select Preview:

    Button for layout preview

    A new browser tab will open with the storefront with the applied changes.

Adding a Layout

  1. Click + Add layout in the upper-right corner of the page.

  2. In the window that opens, enter the layout name and select the layout you want to use as the base for the new layout (Link blocks from layout). Click Save.

    Adding a layout

  3. The new layout will appear in the list of layouts on the right (Switch layout). You can switch between layouts by clicking their names in the list. When you hover over a layout name, a gear icon button will appear:

    Switching between layouts

    Important

    You cannot delete the default layout (i.e., the one used on the storefront). First, select another layout as the default.

Layout Properties

When editing or adding a layout, you can define the following properties:

  • Name—the name of the layout.
  • Link blocks from layout (when adding a new layout)—choose the layout from which you want to copy the content.
  • Default—if this checkbox is ticked, the layout will be set as default and will be used on the storefront.
  • Grid columns—choose whether to use the 12- or 16-column grid in the layout.
  • Layout width—choose how page layouts are structured:
    • Fixed width—pages will have a fixed width (for example, 1200px);
    • Full width—pages will use a full-width layout;
    • Fluid—pages will have a responsive layout.