# Styling - [General](https://themedocs.zenit.design/en/styling/general.md): In the basic settings of the layout you can design the essential appearance of your store. These settings are settings with the most impact on the storefront. - [Basic layout](https://themedocs.zenit.design/en/styling/general/basic-layout.md) - [Product images](https://themedocs.zenit.design/en/styling/general/product-images.md) - [Produkt Layout-Typ](https://themedocs.zenit.design/en/styling/general/produkt-layout-typ.md) - [Global background](https://themedocs.zenit.design/en/styling/general/global-background.md) - [Preloader](https://themedocs.zenit.design/en/styling/general/preloader.md) - [Accent line](https://themedocs.zenit.design/en/styling/general/accent-line.md) - [Animations](https://themedocs.zenit.design/en/styling/general/animations.md) - [Typo & Colors](https://themedocs.zenit.design/en/styling/typo-and-colors.md): The global colors and fonts of the shop - [Theme colors](https://themedocs.zenit.design/en/styling/typo-and-colors/theme-colors.md) - [Status messages](https://themedocs.zenit.design/en/styling/typo-and-colors/status-messages.md): Depending on the action in the store, status messages are displayed by the system. You can find the typical colors of different status messages here. - [Fonts](https://themedocs.zenit.design/en/styling/typo-and-colors/fonts.md) - [Typography](https://themedocs.zenit.design/en/styling/typo-and-colors/typography.md) - [E-Commerce](https://themedocs.zenit.design/en/styling/typo-and-colors/e-commerce.md) - [Buttons](https://themedocs.zenit.design/en/styling/typo-and-colors/buttons.md) - [Logos](https://themedocs.zenit.design/en/styling/logos.md) - [Header](https://themedocs.zenit.design/en/styling/header.md): The header area of the shop - [Header](https://themedocs.zenit.design/en/styling/header/header.md) - [Search](https://themedocs.zenit.design/en/styling/header/search.md) - [Top bar](https://themedocs.zenit.design/en/styling/header/top-bar.md) - [Shop navigation](https://themedocs.zenit.design/en/styling/header/shop-navigation.md): Shop navigation (Search, Wishlist, Account, Cart) - [Main navigation](https://themedocs.zenit.design/en/styling/header/main-navigation.md) - [Flyout navigation](https://themedocs.zenit.design/en/styling/header/flyout-navigation.md) - [Dropdown navigation](https://themedocs.zenit.design/en/styling/header/dropdown-navigation.md) - [Footer](https://themedocs.zenit.design/en/styling/footer.md): The footer is the bottom area of your online shop. - [Footer](https://themedocs.zenit.design/en/styling/footer/footer.md) - [Content](https://themedocs.zenit.design/en/styling/footer/content.md) - [Columns](https://themedocs.zenit.design/en/styling/footer/columns.md) - [Columns styling](https://themedocs.zenit.design/en/styling/footer/columns-styling.md) - [Footer bottom](https://themedocs.zenit.design/en/styling/footer/footer-bottom.md): The footer bottom is the lower part of the footer. This is where the tax notes, copyright and, depending on the settings, the social media icons and shipping/payment methods are displayed. - [Components](https://themedocs.zenit.design/en/styling/components.md): Design of components, which are displayed at different places in the storefront. - [Sidebar](https://themedocs.zenit.design/en/styling/components/sidebar.md) - [Sidebar navigation](https://themedocs.zenit.design/en/styling/components/sidebar-navigation.md) - [Forms](https://themedocs.zenit.design/en/styling/components/forms.md) - [Image & gallery slider](https://themedocs.zenit.design/en/styling/components/image-and-gallery-slider.md): In Shopware 6 there are different slider navigation elements. Basically, a distinction is made between the dot navigation and the arrows. - [Produkt slider](https://themedocs.zenit.design/en/styling/components/produkt-slider.md) - [Category Listing Slider](https://themedocs.zenit.design/en/styling/components/category-listing-slider.md) - [Pagination](https://themedocs.zenit.design/en/styling/components/pagination.md) - [Breadcrumbs](https://themedocs.zenit.design/en/styling/components/breadcrumbs.md): Breadcrumbs are an additional navigation, where the travelled path from the home page to the current page is shown. It shows the level depth in which you are. - [Cookie banner](https://themedocs.zenit.design/en/styling/components/cookie-banner.md) - [Offcanvas](https://themedocs.zenit.design/en/styling/components/offcanvas.md) - [Backdrop](https://themedocs.zenit.design/en/styling/components/backdrop.md) - [Scroll-Up button](https://themedocs.zenit.design/en/styling/components/scroll-up-button.md) - [Category](https://themedocs.zenit.design/en/styling/category.md): The category or also called listing lists your products. - [Category header](https://themedocs.zenit.design/en/styling/category/category-header.md) - [Hero section](https://themedocs.zenit.design/en/styling/category/hero-section.md): The category image can be automatically set into the first section of the shopping experience (cms) as background image. This makes it possible to place the elements/blocks on the background image. - [Filter](https://themedocs.zenit.design/en/styling/category/filter.md) - [Listing actions](https://themedocs.zenit.design/en/styling/category/listing-actions.md): Listing actions (pagination, sorting) - [Product boxes](https://themedocs.zenit.design/en/styling/category/product-boxes.md) - [Quickview](https://themedocs.zenit.design/en/styling/category/quickview.md) - [Product](https://themedocs.zenit.design/en/styling/product.md): The product page / product detail page. - [Product-Header](https://themedocs.zenit.design/en/styling/product/product-header.md) - [Buybox](https://themedocs.zenit.design/en/styling/product/buybox.md) - [Gallery](https://themedocs.zenit.design/en/styling/product/gallery.md) - [Description](https://themedocs.zenit.design/en/styling/product/description.md) - [Description navigation](https://themedocs.zenit.design/en/styling/product/description-navigation.md) - [Description content](https://themedocs.zenit.design/en/styling/product/description-content.md) - [Documents](https://themedocs.zenit.design/en/styling/product/documents.md): The documents section is an evolution of the theme's datasheet feature. In addition to displaying embedded PDF files, documents can now be offered for download. - [Account](https://themedocs.zenit.design/en/styling/account.md) - [Overview](https://themedocs.zenit.design/en/styling/account/overview.md) - [Checkout](https://themedocs.zenit.design/en/styling/checkout.md): The checkout area of your online shop. - [Cart](https://themedocs.zenit.design/en/styling/checkout/cart.md) - [Offcanvas cart](https://themedocs.zenit.design/en/styling/checkout/offcanvas-cart.md) - [Checkout](https://themedocs.zenit.design/en/styling/checkout/checkout.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://themedocs.zenit.design/en/styling.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.