Design & Layout

Not covered in this guide: Image sizes, galleries, and cropping ( Images & Media Guide), sliders, product blocks, and homepage pop-ups ( Designing the Homepage Guide), Pages created with the builder ( xoContentEditor Guide), and the new category navigation starting with XONIC 4.10 ( Category Navigation Guide).

What Happens After Saving

Many design settings are incorporated into the store’s stylesheet. When you save a value in one of these groups under Settings → Design—“Images,” “Product Listing,” “General,” “Slider,” “Header,” “Colors,” “Product Detail View,” “Checkout,” or “Off-Canvas,” the store clears its cached stylesheet and rebuilds it the next time the page is loaded. If Cloudflare is set up, it also clears the cache there. You do not need to use the “Clear Template Cache” button for this.

If you don’t see the change immediately, reload the page using Ctrl+F5 (on a Mac, Cmd+Shift+R). Always check changes in the store itself and on a smartphone; see Mobile & Tablet.

Product Badge Colors

For custom badges, such as “Organic” or “Made in Germany,” set the colors under Products → Product Badges on the badge: “Badge Background Color” and “Badge Text Color.” These two colors must not be the same. The “Additional CSS” field accommodates further specifications, such as a border.

The labels assigned by the store itself have fixed colors with sufficient contrast in the default template: the discount for special offers, “New,” “Top,” “Bundle,” “B-Grade,” “FSK 18,” “Free Shipping,” and “Exclusive Offer.” These do not follow the store’s color scheme. You can set different colors for them using custom CSS; see Custom CSS.

Under Settings → Design → Header, you can configure the logo width and height, icons, the mobile header, and the category menu. Click to enlarge.

Which Categories Appear in the Menu

The menu contains the categories for which the “Category as Header Tab” toggle is enabled under Products → Categories / Products. Subcategories appear in the drop-down menu if “Show subcategories in header tabs” is enabled; the number per column is determined by “Header Category Subnavigation: Maximum Number for 2nd Category Level.”

You can choose how a drop-down menu is structured for each main category in the “Navigation Template” field or for all categories under “Default Navigation Template”:

• simple: Text only, for a small number of subcategories.
• imagecard: Subcategories on the left, image and description of the category on the right.
• megamenu: Full width with multiple columns, for large product ranges.
• auto (Default): The store selects based on image, description, and number of subcategories.

On smartphones and tablets that the store recognizes as mobile devices, it always displays the simple version.

Long Category Names

If not all entries fit in the menu bar, entries wrap to a second line. The header area does not expand accordingly: The first line is truncated at the top, and the second line extends into the page. Therefore, keep the menu short enough to fit on one line:

1. Short name, long heading: The menu displays the “Category Name.” Enter a short form there, such as “Garden,” and the full name in “Alternative Category Heading.” The shop displays this heading at the top of the category page.
2. Fewer entries: Turn off “Category as Header Tab” for categories that don’t need to appear at the top. To ensure they remain accessible via the menu on a computer, turn on “Show Menu Icon in Desktop Mode”: The button opens the menu on the left with all categories.
3. More Space: Set “Header Navigation: Position” to “ below.” This gives the menu the full width.

With XONIC 4.10, items are now divided into “Highlights” and “More Categories”: Anything that no longer fits in the bar is moved by the store to the “More Categories” panel; see the Category Navigation Guide.from 4.10

The menu on the left on a smartphone

The menu button opens a menu on the left with all categories. Under Settings → Design → Off-Canvas, you can specify how deep it goes (“Off-Canvas Left: Maximum Category Depth,” default 2) and whether it displays category images (“Off-Canvas Left: Show Category Images”). Fewer levels and no images make the menu clearer on small screens.

With XONIC 4.10, the left-hand menu has been redesigned: Each level opens its own panel with a Back button, and there’s also a bar with category chips below the mobile header area; see the Category Navigation Guide.from 4.10

In “Product View in Product Listing,” each row represents a view of the category page with its own number of items per page and its own display options (tile or row). Click to enlarge.

Columns and Tiles

• Category Tiles: “Category Tiles: Number of Columns” determines how many tiles for subcategories and main categories are displayed side by side, with separate settings for smartphones, tablets, and computers. You can choose from “Standard (1 / 2 / 3)”, “Compact (1 / 2 / 4)”, “Many Categories (2 / 3 / 6)”, or custom values. Fewer columns result in larger category images.
• Products on smartphones: “Number of Products Side by Side (Mobile)” displays one product per row in full width (1) or two side by side (2, default) on narrow screens.
• Background color of product blocks: In the “Configurator for Product Presentation and Marketing,” each row has a “Background” column. The color applies specifically to this block on this page.from 4.9.135

Product Names: Rows and Capitalization

There is no setting for a custom font size for product names. You can set this using your own CSS.

Hover Effects

When the mouse hovers over a category tile, it casts a slight shadow, the image becomes slightly larger, and the name changes to the primary color. There is no toggle switch for this; you can disable the effect using your own CSS. For product tiles, you control the expansion of the buttons via the “Buttons” column (at the top). The “Images & Media” guide describes how the image changes when you hover over it.

Bestsellers and Other Product Blocks

The rows “Bestsellers,” “New Arrivals & Top Picks,” or “Special Offers” above and below the list come from the “Product Presentation and Marketing Configurator” in the same group. Each row is a block with a type and a landing page. For category pages, the rows with “/ Categories” apply: To remove the Bestsellers block there, delete the “Bestsellers / Categories” row using the trash can icon and save your changes. The columns are explained in the Designing the Homepage guide.

Under Settings → Design → Product Detail View, you can specify where the description appears and which controls are displayed on the product page. Click to enlarge.

The Description on a Smartphone

On mobile devices, the description does not appear below the images by default, but rather as a collapsed tab in the area with the price and shopping cart button. Here are two ways to make it visible right away:

• “Product Detail View: Description Tab Expanded” at true: The tab is already open when the page is loaded.
• “Product Detail View: Description Position on Mobile Devices” at inherit: The description appears where “Product Detail View: Description Position” places it on a computer—by default, below the images. from 4.9.6

“Description Column Expanded (Narrow Screens)” applies only to the description below the images in a narrow browser window on a computer, not on a smartphone.

Additional Toggle Switches

Zoom Magnifying Glass

By default, the product page displays images as shown at gallery: Clicking an image opens a full-size view. A magnifying glass that appears on hover is only available in the classic view legacy (Settings → Design → Product Detail View → Image Display in Product View). There, you can disable it via Settings → Design → Images → Product Image Zoom Type = none.

Arrows on the Product Page

Arrows appear in two places. For the arrows in the image gallery, see “Mobile Navigation Arrows” above and the Images & Media guide. The “Customers Also Bought” and “We Also Recommend” rows appear as sliders: With Settings → Design → Product Listing → Product Slider: Navigation Style = modern (default), the scroll buttons on a computer only appear when you hover over them. To remove the arrows entirely, go to the “Product Presentation and Marketing Configurator” and set the “Slider” column to “No” in the “Customers Also Bought / Products” or “We Also Recommend / Products” rows; the products will then be listed one below the other.

Which block is where? The edit mode

Under Settings → Design → General, the “Customer View Edit Mode” tab opens your store in a special view. A red button with the module’s name—such as “[CMS Page: $cms_footer]”—will then appear in front of each module from the CMS Manager. Clicking it opens the block in the backend in a new window. The “Edit Mode” box is located at the bottom left; click the X inside it to close the view. At the bottom of the page, the box covers the left-hand buttons in the footer. You can then open these blocks directly under CMS → CMS Manager.

In edit mode, a red button with its name appears next to each block from the CMS Manager; the “Edit Mode” box is located at the bottom left of the window (hidden in the footer section). Click to enlarge.

If a text element does not have a red button, it comes from the article editor or from xoLanguage. For Edit Mode, employees also need read access to redirect.php, found in the Permissions Editor under “Additional Areas (without menu item)”; see the Employee, Permissions & 2FA Guide.from 4.9.24

If your phone number changes, be sure to update it in the “Header Arguments” as well as under Settings → General → Basic Settings. The footer contact information is not automatically updated from there.

Your custom pop-up, the information box, as well as the pop-ups for newsletters, customer groups, shipping countries, and currencies are described in the Designing the Home Page guide. Set up the cookie window according to the Legal Text, Cookie Banners & Product Safety guide.

Under Settings → Design → General, select the template and font; the tabs above clear the template cache, import a font, or open edit mode. Click to enlarge.

Designing Individual Pages Without a CSS File

• In the xoContentEditor, every element under “Layout & Appearance” has a field labeled “Individual Classes.” There, you can enter classes that already exist in the template, as well as background color, spacing, and visibility settings for each device; see the xoContentEditor guide.
• In the standard text editor, the dialog for inserting a link offers predefined button styles—such as “Button Primary”—in the “Class” field.
• Rules that are intended to apply to multiple pages belong in the template’s CSS file, not in individual content items.

What Happens During an Update

• The folder containing your custom template remains unchanged during an update.
• New features in templates that your custom template includes will only appear there once those templates have been updated. The fewer templates your custom template copies, the more features are automatically included with the update.
• One example is the new navigation in XONIC 4.10: In a template with its own header section, the previous menu will continue to function until the templates are applied; see the Category Navigation Guide.

Switching Templates Without Losing Customizations

Customizations in your template folder—that is, your own templates and CSS—only apply as long as this template is selected. If you select a different one, they will no longer be visible in the store; however, they will not be deleted. Programming outside the template—such as additional functions in the backend—is not tied to the template. However, some custom programming may also include a component within the template.

Under “Template Change in Categories” (same group), you can assign a different template to a main category and its subcategories—for example, for a promotional section. You can then select it within the category.

Custom Applications in the Store

You cannot integrate your own configurator or another application that uses scripts via a text field: The xoContentEditor removes scripts when saving. If the provider offers embedding via an iframe, use the “Code / Custom HTML” module; see the xoContentEditor guide. If the embed loads content from a third-party provider, be sure to obtain consent; see the guide on Legal Texts, Cookie Banners & Product Safety. Anything beyond that, we’ll integrate as custom programming.

The same category page on a computer (1,440 pixels) and on a smartphone (390 pixels): At widths under 1,200 pixels, the menu button and search field replace the menu bar. Click to enlarge.

Why something is missing on the tablet

If the menu bar is missing in landscape mode, it’s because the tablet is narrower than 1,200 pixels: the categories are then hidden behind the menu button. A tablet can also be wide enough to display the menu bar and still be classified as a mobile device; in that case, it looks like a computer but displays the description as a tab, for example. Which tablets are classified as mobile devices depends on the identifier sent by their browser.

How to check the mobile view

• The most reliable way is to use a real smartphone.
• On a computer, use the device view in your browser’s developer tools (F12), which also sends a smartphone’s identifier. Then reload the page.
• A browser window that’s simply been resized to be narrow will display the mobile header, but not the content intended for mobile devices.

Settings for the mobile view

In the xoContentEditor, you can set the width, order, and visibility for each element separately for desktop and mobile; see the xoContentEditor guide.

• When using custom colors, check whether text remains easily readable on them. This applies especially to light primary colors and text on colored backgrounds in product blocks.
• Do not disable indicators and labels in a way that makes information recognizable only by color.
• The " Legal Texts, Cookie Banners & Product Safety" guide outlines what the store provides and what remains your responsibility.