> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling.md). # 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)