Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Let's get started
  • Step 1 - Installation
  • Step 2 - Select configuration set (optional)
  • Step 3 - Theme Assignment
  • Step 4 - Styling (Theme configuration)
  • Step 5 - Settings (Plugin/App configuration)
  • Step 6 - Demodata
  • Use advanced functions
  • Which areas does the theme change?
  • Dashboard
  • Styling
  • Settings
  • Custom fields
  • Shopping experiences
  • What you should pay attention to!
  • [ ! ] - Special configuration
  • [ ≡ ] - Fallback Feld

Was this helpful?

First steps

Documentation for the themes ATMOS | STRATUS | GRAVITY | SPHERE | HORIZON

Last updated 5 months ago

Was this helpful?

Congratulations! You have chosen one of our themes, making it one of the most versatile and powerful themes for Shopware 6! We are thrilled to welcome you as part of the Shopware community!

Our theme stands out with genuine premium features that go far beyond simple customizations. With an extensive yet user-friendly theme configuration, you can create your unique shop layout with just a few clicks.

Additionally, our theme can be extended with third-party plugins and benefits from continuous development. This way, you stay up to date and can continuously improve your shop.

But you probably already know that, otherwise, you wouldn't have made it this far into the documentation. So, let's dive right in!

To get you started right away, we have prepared a step-by-step guide for the basic initial steps. Your success story with Shopware 6 begins now!

Admin Demo

Visit our admin demo to see the settings from our demos. There you can also see our configuration of the shopping experiences. Url: Name: demo Password: shopware

Let's get started

Our themes are based on the same core. The versatile displays are created solely by the countless configuration options of the theme. When choosing the theme, you can simply choose the theme that best suits your needs.

You can not only choose one of the versions (Atmos, Stratus, Gravity, Sphere, Horizon) - we offer a selection of different for our themes from which you can choose and additionally install. More on that below.

Follow the to get an easier start with the chosen template.

Step 1 - Installation

After you have purchased the theme from the store, the theme will appear in the Settings > My Extensions section in the Themes tab. You can use the Install (1) link in the entry to install the theme and activate it using the toggle switch (2).

Step 2 - Select configuration set (optional)

Before you start assigning and configuring the theme, you should be clear about two things:

  1. Do I want to (have) individual programming in the future?

  2. Is there a preconfigured template that I would like to use?

As soon as you can answer "yes" to one of these questions, we recommend you to use one of our preconfigured templates.

Import preset via Plugin

theme version 4.4.0 or higher | pro version

Since theme version 4.4.0, you have the option to generate a personalized child theme using our free child theme generator plugin and then import the desired demo template.

After installing the extension, navigate to Content > Themes. In the context menu of the selected theme, you can generate your personalized child theme.

Download configuration set manually

all pro und cloud versions

Navigate to demos (1) and filter (2) on the name of the theme you purchased. Via the Download Set (3) link you can download the installable zip file of the child-theme.

Please note that the images and demo data shown in the demos are not part of the theme and templates.

Install configuration set

You can upload the configuration set in the administration of the store under Extensions > My extensions > Upload extension (1) upload.

The installation of the template works the same way as the purchased theme by clicking on the Install (2) link and activating it through the toggle button (3).

Step 3 - Theme Assignment

In the sales channel settings in the Theme (1) tab you can change the theme of your sales channel.

To do this, click on the button Change Theme (2) and select the installed theme in the popup. If you are using a preconfigured set, please select the template you want to use.

If you generated the child theme using our child theme generator plugin, you can import the desired template under Content > Themes with a click on your generated theme via the "Select preset" button. To do this, click on the mentioned button (1), select the desired template in the popup (2), and click on Import (3) or Import and save (4).

Step 4 - Styling (Theme configuration)

The styling area includes all styling-related settings. You can access this either via the theme's own dashboard (Content > Theme [Variant] > Tab: Styling > select assigned sales channel) or via the sales channel area (Sales channel > Tab: Theme > Button: Edit theme).

Sometimes it happens that due to a selected setting other areas change as well. We do this to optimize the overall look of the store for you.

We do not want to make every element adjustable, because otherwise the configuration would no longer be practical and it would then be easier in principle to program the elements directly yourself. The configurations are optimized so that the operation is easy and leads you quickly to the goal.

Step 5 - Settings (Plugin/App configuration)

Besides the actual theme styling, there are other basic settings in the Plugin / App Configuration.

Reach settings via Dashboard (Pro version only)

You can access this either via the theme's own dashboard (Pro): Contents > Theme [Variant] > Tab: Settings > Button: Select configuration

Reach settings via extensions (Cloud | Pro)

For users of the Cloud version and Pro version, the way via the extensions is also available: Extensions > My extensions > Tab: Themes > Theme [Variant] > Context menu: Configuration

Step 6 - Demodata

To make it as easy as possible for you to get started with the theme, we have a free extension for demo data in the store. With this extension you can import and adapt the experience worlds and demo data from our demos directly into your shop.

Use advanced functions

Not every setting in the theme is as simple as setting a color. To prepare the content and use the special features of the theme, we offer you in the CONTENTS-Section of this coumentation helpful entries on the topics shopping experience overlaying header, category image, image formats and different experience settings.

Which areas does the theme change?

The theme offers you not only a theme configuration with over 657+ configurations. Other areas of the storefront and admin area are also enhanced by the theme.

Dashboard

The administration is extended via another dashboard, which gives you easy access to the theme functions.

Styling

The heart of the theme is the Theme Configuration. There you will find all the settings that change the appearance of your store..

Settings

This refers to the settings in the theme plugin. Here are settings that change the system, but do not affect the design. Here you can, for example, also store additional code.

Custom fields

Are extensions of the database to enrich areas like the categories with further configurations. You will find more configurations especially in the categories and products.

Shopping experiences

A new area in the worlds of experience should offer you more possibilities through additional elements. CMS elements like the new breadcrumb element let you put the breadcrumbs on the header background image.

What you should pay attention to!

In our theme configuration some settings get a sign. If you see such a sign, there are special hints or dependencies to other configurations. It's worth taking a look at the help tooltips.

[ ! ] - Special configuration

If you see this character in the theme configuration, it is a configuration field with a dependency to another field or it has a special feature. Read about this in the help tooltip at the configuration field to learn more about this field..

[ ≡ ] - Fallback Feld

This character indicates a theme configuration field, which is additionally used in each category or product setting or can be inherited. The value stored in the theme configuration then serves as a fallback value if a different setting was made in the category / product.

We provide installable . In it, you will not only find the ready-made configuration according to the template of the demo - the template also allows you or an agency to perform special programming as update-safe changes in the future.

Technically, configuration templates are so-called - what it is and what are the benefits from using child themes, we told you in a post about Child-Themes.

Download the desired template as a zip file on our for free.

Follow the to get an easier start with the selected set.

Generally you should not change everything at once. Work in small steps and look at the result in the storefront after saving. Just start with the highlighted styling area in the first tab of settings - the . Here you can find the "most global" settings.

You can also from our demo stores that matches your theme.

configuration sets
Child-Themes
webseite
Start Guides
Basic settings
import the theme configuration
shopwaredemos.com/admin
preconfigured designs
Start Guides
LogoChild theme generator for Zenit Design themesShopware Store
LogoDemodaten für Zenit Design ThemesShopware Store
Free demodata
Dashboard
Sales channels
Weg über Dashboard
Weg über Erweiterungen
Page cover image