Customize the Home Page
Sliders, banners, welcome text, product blocks such as new arrivals and special offers, tiles with category links, headers, footers, and pop-ups: This guide shows you where to manage each section of your homepage and answers the questions we receive most frequently in our support section.
At a Glance
- Welcome text: under CMS → CMS Manager in the “
$cms_startseite” module, for each language. - Slider: under Settings → Design → Slider; image dimensions for desktop and mobile devices under Settings → Design → Images.
- Product Blocks: New Arrivals, Special Offers, Best Sellers, and custom content—including their order—under Settings → Design → Product Listing → Configurator for Product Presentation and Marketing. Each block displays 4 to 16 products; on smartphones, half that number.
- Header and Footer: Phone number and benefits in the “Header Arguments,” footer links and copyright in the modules
$cms_footer_naviand$cms_footer. - Pop-up: The information box
$cms_adviceis your customizable pop-up. The maintenance page appears every time a data backup is performed.
In this guide
How the Home Page Is Structured
The home page consists of sections that you maintain in various places in the backend. In the standard template, they appear one below the other in this order. An empty or disabled section is simply omitted.
| Section | Where to Maintain It |
|---|---|
| Banner above the slider | Tools → Banner Manager, banner group “index_static,” see Banners |
| Slider | Settings → Design → Slider, see Slider |
| Welcome text | CMS → CMS Manager, " $cms_startseite" module, see homepage text |
| Main Category Tiles | Settings → Design → General, see Tiles |
| Product Advisor | Products → Product Advisor, “Show on Homepage” toggle |
| Product blocks such as New Arrivals, Special Offers, and Best Sellers, with custom content in between | Settings → Design → Product Listing, see Product Blocks |
| Icon row highlighting your benefits | Settings → Design → General → Center Section Arguments, see Icon Row |
| News | CMS → News Articles; the number displayed on the homepage is set under Settings → Design → News Articles → Number of Articles on Homepage (default: 10), see News Article Guide |
| SEO Text | CMS → CMS Manager, Module $cms_seo_startseite |
| Brand Logos | Products → Manufacturers; for each manufacturer, the “Highlight Manufacturer on Homepage” toggle |
The homepage in the default template from top to bottom: slider, welcome text, main category tiles, a product block, and the icon row highlighting your benefits. Click to enlarge.
The header, menu, and footer are part of every page; they are described further down under “Header ” and “Footer.” You cannot change the order of these sections via a setting. However, you can decide for yourself what appears between the product blocks—see “Custom Content.” If you’re using your own template, your homepage may be structured differently.
Homepage Text and SEO Text
The welcome text below the slider and the additional text further down are two modules in the CMS Manager: $cms_startseite and $cms_seo_startseite.
- Under CMS → CMS Manager, enter “startseite” in the search field. The list will display both building blocks.
- For
$cms_startseite, select “Edit” from the action menu and edit the text in the tab for each language. The name of the module is fixed and does not appear in the store. - Save and reload the homepage.
If the text is missing
The shop only displays the text if the “Status” setting is enabled for the module and there is text available in the visitor’s language. There is no fallback to German. If there are two active entries with the same name in the CMS Manager, the field remains blank. A custom, older template also requires the placeholder for the text.
Remove the heading
The welcome text does not have a toggle for the heading: The heading, which defaults to “Welcome …,” is part of the text. Delete it in the editor. On a CMS page that you place between product blocks, the “Title” column hides the name; see Custom Content.
SEO text at the bottom
$cms_seo_startseite is located at the bottom of the home page, below the news. It appears only if Settings → SEO / SEA → SEO Settings → SEO Advanced Settings is enabled and the module contains text, not just an image.
You can set text color, alignment, and formatting using the editor’s toolbar. With the xoContentEditor, you can build the text using modules such as cards, images, and buttons; see the xoContentEditor Guide. The CMS Manager & Emails Guide explains how pages and modules generally work in the CMS Manager.
Homepage Slider
You can manage the large image carousel at the top of the homepage under Settings → Design → Slider in the “Customize Slider (Homepage)” tab. This tab appears as long as the “Slider” toggle on the same page is enabled.
- “Add Slider Element” creates a new slide. The shop recommends 3 to 6 slides to ensure the homepage loads quickly.
- The header of the slide displays the name and “Status.” In the expanded slide, select the “Slider Type” and specify the destination. “Sort Order” determines the sequence, with the smallest number first. Use “Start Date” and “End Date” to display a slide only during a specific time period, including both dates; leaving these fields blank means the display is unlimited.
- In the tab for each language, enter the “Slide Name” (which also serves as the image’s alt text), “Image,” and, if needed, “Image (Mobile).” Instead of an image, you can use a “Video” in MP4 format, including a separate version for mobile devices.
- “Description” is the text displayed on the image. “Slider Text Alignment” sets the text to left, centered, or right; “Slider Text Width (in %)” specifies its width. The text appears on a semi-transparent light-colored box: Use dark font; white text is unreadable there.
- Save. To remove it, click the red trash can icon at the top of the slide and save.
A slide from the home page: The link destination, order, and time period are in the header; images and text are in the language tab. Click to enlarge.
Image sizes for desktop and smartphone
What dimensions
The dimensions are listed under Settings → Design → Images: “Slider Width (Large)” and “Slider Height (Large)” for desktop, “Slider Width (Large/Mobile)” and “Slider Height (Large/Mobile)” for mobile devices. By default, both are 2280 × 962 pixels, i.e., landscape orientation. Upload images with exactly this aspect ratio; the template displays the current values below the image field. If you change the dimensions, the store will regenerate the scaled-down versions.
When the mobile image appears
The store detects smartphones and tablets based on the browser’s identifier, not the window width. You’ll see the “Image (Mobile),” otherwise the standard image—both scaled to mobile dimensions. A mobile image will only display if a standard image has also been entered. If you want to display a portrait-oriented image on mobile devices, set the mobile dimensions to portrait orientation and assign a mobile image for each slide; otherwise, the standard image will be heavily cropped.
White Bars on the Image
If your image’s aspect ratio differs from the specified dimensions, the shop will crop it to fit, provided that “slider” is selected under Settings → Design → Images → Crop Function for Images (this is the default setting). Without this selection, the entire image is displayed, and the rest is filled with “Thumbnails: Background Color,” which is white by default. With “Fullscreen Slider,” areas on the left and right remain empty on screens wider than “Slider Width (Large).”
Text on Smartphones
There is no separate description for mobile devices. On smartphones, the description is centered; “Slider Text Width (in %)” does not apply there. Therefore, keep the text brief so that it does not obscure the image.
If you replace an image, upload it with a new filename. The store generates the resized versions only for files it doesn’t already recognize; if you use the old filename, visitors may continue to see the old image.
Slider Settings
| Field under Settings → Design → Slider | Effect |
|---|---|
| "Slider" | turns all sliders in the store on or off, including those on categories, CMS pages, and news |
| "Change Interval" | Display duration per slide in milliseconds; default is 5000 (5 seconds) |
| “Speed” | Transition duration in milliseconds; factory setting: 1,000 |
| “Slider Effect” | Type of transition; factory setting: “fade” |
| “Show Controls,” “Page Counter” | Arrows or dots for scrolling; the dots only appear when there are two or more slides |
| “Full-Screen Slider” | Slider spanning the entire screen width instead of the shop’s width |
| “Video Slider: Brightness (in %)”, “Video Slider: Blur” | Filters for videos in the slider, for example, to ensure text remains legible |
Link Destinations
The “Slider Type” determines where a click leads: “Link to Category,” “Link to Product,” “Link to CMS Page,” “Custom Link,” or “Image/Video” without a link. For a custom link, enter the full URL including https://. If you enter something like “/aktion/,” the store will append it to an invalid URL, and the click will result in an error page. For information on what the store does when destinations are deleted or deactivated, see the Getting Started guide.
Sliders for Categories, CMS Pages, and News
You can manage your own sliders directly in the category (under “Category Slider”), on the CMS page (“CMS Slider”), and in the news article (“News Slider”). No separate toggle is needed for this: The section is already available when creating a category, as long as “Slider” is enabled. If a category has a slider, the “Hide Category Header Image” option under Settings → Design → General hides the category image by default.
Banner Manager
You can manage advertising banners for fixed positions in the store under Tools → Banner Manager. A banner’s “banner group” determines where it appears.
- To create a new banner and select the “Banner Group,” see the table.
- In the tab for each language, enter the “Banner Name,” “Banner URL (including http://),” and “Banner Image File”; for smartphones and tablets, also enter the “Banner Image File (Mobile).” Instead of an image, or in addition to it, you can use “HTML Text.”
- Optionally, enter “Valid from” and “Valid until” or a number of impressions after which the banner will stop displaying.
- Enable “Status” and save. A new banner is initially inactive.
A banner for the homepage: Group “index_static,” full destination URL, and one image each for desktop and mobile devices. Click to enlarge.
The positions
| Banner group | Where the banner appears |
|---|---|
| “index_static” | only on the home page, at the very top above the slider |
| “header_static” | at the top of every page |
| “footer_static” | in the footer of every page |
| “left_smooth,” “right_smooth” | narrow banner on the left or right edge that slides in after a few seconds; only on larger screens; the visitor can close it |
| "box" | in the “Ad Box” section; it must be active in the Box Manager |
| “offcanvas_nav” | as a tile in the left menu on a smartphone; no more than two from 4.10 |
Link to a promotion
Enter the full URL of the landing page in “Banner URL”—for example, the one for your promotion category—in each language. There is no drop-down list for categories here. Banners open their destination in a new tab; “Statistics” in the promotions menu tracks impressions and clicks.
Mobile View
Smartphones and tablets display only the “Banner Image File (Mobile).” If it’s missing, they’ll see only the HTML text or nothing at all; the standard image won’t appear. Therefore, always upload both images.
Multiple Banners, Languages
If multiple banners are active in a group, the store displays one of them at random each time a page is loaded. For a new banner, the store uses the default language settings for any empty language fields. “Valid until” is the first day on which the banner will no longer appear.
Product Blocks: New Arrivals, Specials, Bestsellers
You can specify which product categories appear on the home page, in what order, and with how many products, all in one place: Settings → Design → Product Listing → Configurator for Product Presentation and Marketing.
- Each row is a block. The “Type / Landing Page” column specifies what it displays and where, such as “New Arrivals & Top Picks / Home Page.” For the homepage, only the rows with “/ Homepage” are relevant; the same table also controls the blocks on category, product, and manufacturer pages, as well as in the shopping cart.
- To add a block, click “New Entry”; to remove one, click the trash can icon in its row. The store will discard any row with a “Quantity” of 0 or left blank when saving.
- The order of the rows is the order in which they appear on the page. Drag a row up or down with the mouse.
- Save. The home page will display the updated content the next time you visit it.
Each row is a block; the rows labeled “/ Home” appear in this order on the home page—in this example, with a CMS page between “New Arrivals” and “Special Offers.” Click to enlarge.
The columns in a row
| Column | Effect |
|---|---|
| “Listingstyle” | “gal” displays tiles, “list” displays a list, “special” displays a special view across the full width. |
| “Sorting” | Order of the products in the block, such as “Sort in ascending order,” “Creation date in descending order,” “Order count in descending order,” “Views in descending order,” or “Random order.” For special offers, there are also “Special Offer: Creation Date” and “Special Offer Expiration Date.” |
| “Number” | Maximum number of products. The store displays a minimum of 4 and a maximum of 16; on smartphones and tablets, it displays half that number. |
| “Slider” | Yes: all products in a single row for scrolling. No: products are displayed in multiple rows, one below the other. |
| “Background” | Background color of the block. This applies specifically to this row; previously, the color of one row applied to all rows of the same type.from 4.9.135 |
| “Title” | Shows or hides the block’s heading |
| “Full Width” | The block spans the entire screen width instead of the width of the store. |
| Last column | Select the category for “Products from Category,” the CMS page for “CMS Page,” and the manufacturer for rows on manufacturer pages |
For rows of the “CMS Page” type, the configurator hides the listing style, sorting, and count; “Slider” is disabled there.
The blocks for the homepage
| Type | Which products |
|---|---|
| “New Arrivals & Top Picks” | Products marked as “New/Top Pick (Top-New)”; see New Arrivals |
| “Highlights” | Products marked as “Highlight” (Product Mask, “General” tab, with “Highlight from/to”) or from Products → Highlights |
| “Special Offers” | Products with an active special price from Products → Special Offers for the visitor’s customer group. For customer groups where “Show Special Prices” is turned off under Customers → Customer Groups, this section is missing. |
| “Bestsellers” | Products with the highest number of orders; see Bestsellers |
| “Promotion” | Products with a “Product Promotion” (Product Details screen, “General” tab, with “Promotion From/To”) |
| “Coming Soon” | Products whose “Release Date” is today or later; an overview shows products → Upcoming Products |
| “Products from Category” | Products from the category in the last column, with “Use subcategories in category listing” (enabled by default) including subcategories. You may create multiple entries of this type. |
| “Bundle Products,” “Reviews,” “Free Products” | Bundles, featured reviews (“Promotion Status” under Products → Product Reviews), or the free products from the rewards program |
| “CMS Page” | Not products, but the content of a CMS page; see Custom Content. Can also be created multiple times. |
All blocks display only active products that the visitor is permitted to view. Sold-out products are hidden if Settings → Checkout → Inventory → Hide Sold-Out Products is enabled. Variants appear only via their main product as long as “Slaves in Product Sliders” under Settings → Design → Product Listing is turned off. You can change the block headings under Tools → xoLanguage.
Feature New Arrivals on the Home Page
- Check to see if the row “New Arrivals & Top Picks / Home Page” exists; if not, create it using “New Entry.”
- Select products: In the product editor, under the “General” tab, enable “Product as New Arrival/Top Pick (Top-New),” and optionally include “Top-New from/to.” To select multiple products at once, go to Products → Top-New Products.
- If Settings → Design → Product Listing → New Arrivals and Buying Tips “Top-New” is set to Yes (default), the store will additionally populate the block with products created in recent weeks; the number of weeks is determined by “Duration of ‘New’ Product Marking” (default: 4). If set to “No,” the block displays only your “Top-New” products.
This is how bestsellers are determined
Each product has a counter for the number of units ordered. It increases with every order placed in the store and with imported marketplace orders; for variants, the main item is included in the count. The block displays products with at least one order, sorted by default by “Order Count Descending.” Coupons and free products are not considered bestsellers. If you select a different “Sort Order,” the store selects different products from the same set.
Removing a block
Whether it’s “New Arrivals & Top Picks,” “Bestsellers,” or “Coming Soon”: Delete the row labeled “/ Home” using the trash can icon and save. You can restore the block at any time by clicking “New Entry.” The “Coming Soon” toggle in the same group does not affect the home page; only the row in the configurator matters.
Sorting Special Offers
In the “Special Offers / Home Page” row, set the “Sorting” option: “Special Offer Expiration Date (ascending)” displays offers that are ending soon first, while “Special Offer: Creation Date (descending)” displays the newest ones. A separate setting applies to the page listing all special offers: “Product Sorting (Special Offers Page)” in the same group.
Custom Content Between Product Blocks
A promotional image, a note, or text between “New Arrivals” and “Special Offers”: To do this, create a CMS page and add it as a separate row in the configurator.
- Under CMS → CMS Manager, create a page, leave “Status” and “Shop Content Page (can be accessed and linked to in the shop)” enabled, and design the content—using the xoContentEditor if desired. The configurator only offers these types of pages.
- In the configurator, create a row using “New Entry,” select “CMS Page / Home Page” as the type, and select the page in the last column.
- Turn off “Title” if you don’t want the page name to appear as a heading; turn on “Full Width” for an image that spans the entire screen width.
- Drag the row to the desired location and save.
For example, here’s how to display new arrivals using a promotional image: first, the row “New Arrivals & Shopping Tips / Home Page,” followed by the CMS page with the image. In the standard template, product blocks do not appear above the slider and welcome text. With the “Shopping Cart” landing page, the same row displays the content of the CMS page at the bottom of the shopping cart—such as a note about delivery times.
Tiles with Category Links
You can create clickable tiles that link to categories in two ways: automatically from your main categories or custom-designed in the welcome text.
Automatically: Main Categories as Tiles
Under Settings → Design → General → Show Main Categories on the Home Page (enabled by default), the home page displays a tile for each main category below the welcome text, featuring an image, name, and short description. The order follows the “sort order” of the categories.
- Image: the category’s “image.” Selecting “Hide category images on the home page” in the same group displays text only.
- Text: the “short description” of the category, if “Enable short descriptions for categories and CMS pages” is turned on.
- Columns: Settings → Design → Product Listing → Category Tiles: Number of columns, set separately for smartphones, tablets, and desktops.
- Redirect: If the “Page Type” in the category is set to “Internal Link” or “External Link,” its tile leads directly to that address. This turns a tile into a link to an action, a CMS page, or another category.
Custom Design: Your Own Tiles
You can create custom tiles with an image, text, and button in the welcome text or on a CMS page between product blocks—most easily using the “Map” block in the xoContentEditor; see the xoContentEditor guide. If you want the entire tile to be clickable—not just the button—open the HTML code in the standard text editor using the “Source Code” button and add the attribute ` data-xo-href="ziel-adresse/"` to the enclosing `div `; for a new window, also add ` data-xo-href-target="_blank"`.
Icon Row with Your Benefits
The row with icons and short texts such as “Ships in 24 hours” or “Purchase on account” consists of the “middle section arguments.”
- Under Settings → Design → General → Middle Section Arguments, use “New Entry” to create a line for each benefit.
- Select a “Language” (“---” applies to all languages), choose an “Icon” from the selection, and enter the text.
- Arrange the order by dragging the entries and then save.
The three entries in the icon row at the top of the home page, each with language, icon, and text. Click to enlarge.
The icon row appears below the product blocks on the home page as well as on category and manufacturer pages. On smartphones and tablets, it displays one entry at a time and changes every 4.5 seconds. The same list for the narrow bar at the very top of each page is called “Header Arguments”; see Header.
Header: Phone Number, Benefits, Seals
Fill the narrow bar at the very top above the logo with the “Header Arguments.” The phone number is also displayed there, since there is no separate phone field for the header.
- Open the table under Settings → Design → Header → Header Arguments. Each row is an entry with “Language,” “Icon,” and text.
- For the phone number, edit the existing entry or create a new one using “New Entry,” for example, with the phone icon and the text “
<a href="tel:+4930123456">030 123456</a>.” “---” as the language applies to all languages. - Save. On the desktop, all entries appear side by side; on smartphones and tablets, they cycle every 4.5 seconds. The bar is hidden during checkout.
The number appears in several places
The header does not automatically update with a number from elsewhere. If your phone number changes, you must update it in three places: in the header arguments, in the “Footer Contact Information” (see Footer), and under Settings → General → Basic Settings → Store Address and Contact Information. The shop uses the latter for the contact page, emails, and information provided to search engines.
Seals and Certificates
The header does not have a dedicated seal field. You can add a brief note such as “Verified Store” as a header argument with the appropriate icon, and a seal image as a banner in the “header_static” group (see Banners). You can set up the Trusted Shops seal under Settings → Interfaces → Review Portals → Trusted Shops.
You can configure the logo width, header height, and shopping cart, wish list, and language selection in the same group; the logo file itself is “Shop Logo” under Settings → General → Basic Settings. The guide on Category Navigation explains the category menu.
Pop-ups and Notification Boxes
The notification box is a customizable pop-up for your visitors. In addition, there are pop-ups with specific purposes: newsletter sign-up and preselection of customer groups, delivery countries, or currencies.
Information Box: Your Own Pop-up
- Under CMS → CMS Manager, edit the “
$cms_advice” module and enter the text in each language—for example, a notice about company holidays. - Under Settings → General → Maintenance → Note Box, enable “Show on homepage.”
- You can only turn it off using this toggle. The module’s “Status” toggle is grayed out in the CMS Manager, as is the case with most of the included modules.
How the notification box works
Despite its name, it appears on every page—not just the home page—until the visitor closes it by clicking “Notification Read”; after that, it remains closed until the end of their visit. Logged-in customers do not see it. Clicking next to it or pressing the Escape key does not close it. If the module is empty, no notification box appears.
Pop-ups with a specific purpose
| Popup | Enable under |
|---|---|
| Newsletter Signup | Settings → Interfaces → Email Marketing / CRM → Email Options → Newsletter Popup: On/Off; see the Newsletter Guide for details |
| Customer Group (Individual or Business) | Settings → Checkout → Customer Details → Customer Group Preselection Popup |
| Shipping Country | Settings → Checkout → Shipping/Packaging → Delivery Country Preselection: On/Off |
| Currency by Location | Settings → Checkout → General → Offer currency change (IP detection) |
For each page view, the store opens at most one pop-up, in a fixed order: first the cookie notice, then the preselection of store, currency, customer group, and delivery country, followed by the information box, and finally the newsletter pop-up. The next pop-up will not appear until the visitor has completed the previous one and navigates to another page.
Maintenance Page During Backup
While the store is backing up its database, visitors see a maintenance page. You can set how often this happens yourself.
When it appears
Every time a backup is performed—whether automatically or manually via Tools → Database Tools → Database Backup—and when restoring a backup. Once the backup is complete, the store reopens immediately, or within 15 minutes at the latest. The Contact page and Legal Notice remain accessible.
How often
Settings → General → Maintenance → Database Auto-Backup specifies the interval in days; the default is 7. There is no specific time: The backup starts as soon as an administrator with access to the database backup opens a page in the backend after the interval has elapsed. Setting this to 0 disables the auto-backup; in that case, please perform backups manually on a regular basis.
Text and Stuck Pages
You can change the page text under “Autobackup Message” in the same group, for each language. If the maintenance page freezes after an aborted backup, close it under Tools → Database Tools → Database Backup using the “Delete ‘Maintenance Due to Backup’” button.
Frequently Asked Questions
Where do I edit the content of the home page?
$cms_startseite), the slider under Settings → Design → Slider, and the product blocks under Settings → Design → Product Listing. The table under “Homepage Structure ” lists each section.Why isn’t my homepage text appearing?
$cms_startseite has “Status” enabled and contains text in your visitors’ language; there is no fallback to German. Two active entries with the same name will also leave the field blank.How do I display new arrivals on the homepage?
How do I remove a block such as “New Products” or “Coming Soon”?
Why does a block display a maximum of 16 products?
How are bestsellers determined?
How do I change the order of the sliders?
What image size is required for mobile slider images?
Why does my slider have a white bar?
Why does a slider link lead to a 404 page?
https://) is usually missing, or the address is out of date. Enter the complete address. For links to categories, products, or CMS pages, the Slider Management and Health Check display deleted or deactivated destinations; see “Slider Link Destinations.”How do I link a banner to a promotional category?
Can I display different messages to merchants and private customers?
Where do I change the phone number in the header?
Where do I change the year or hours in the footer?
$cms_footer ” module in the CMS Manager and does not increment automatically. You can update opening and service hours under Settings → Design → Footer → Footer Contact Information in the “Additional Information” column.How do I place a pop-up on the homepage?
$cms_advice ” module and enable “Display Notice Box on Homepage” under Settings → General → Maintenance. It appears to guests once per visit; see Pop-ups.Why is a module’s status toggle grayed out?
$cms_advice,” are permanently active. Whether their content appears is controlled by a setting in the “ ” module: “Show on the homepage.” You can toggle the welcome text, the homepage SEO text, the footer modules, and your own pages.How do I remove the “Autobackup Notification” message?
Where do I change the message text for the product inquiry?
TEXT_QUESTION_INTRO). You can enable or disable the button itself under Settings → Design → Product Detail View → Product Inquiry “Questions about this item.”Additional Guides
We'll help you design your homepage
We’ll work with you to set up sliders, product blocks, and the footer, and let you know what can be customized in your template.
Contact Support Now