# Contents - [Shopping experiences](https://themedocs.zenit.design/en/content/shopping-experiences.md) - [Sections](https://themedocs.zenit.design/en/content/shopping-experiences/sections.md): A section is an area which contains blocks and elements. - [Blocks](https://themedocs.zenit.design/en/content/shopping-experiences/blocks.md): Blocks are design grids which in turn contain elements. - [Elements](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements.md): Elements are the contents that can be used in the shopping experience blocks. - [Image text slider](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/image-text-slider.md): Image sliders bring movement to your site and usually get the most attention. - [Search banner](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/search-banner.md): From theme version 3.5.0, you can use the search banner element to edit the experience worlds - exclusively for the Pro version of the themes on Shopware self-managed systems. - [Text banner](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/text-banner.md): From theme version 3.5.0, you can use the text banner element to edit the shopping experiences - [Teaser](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/teaser.md): Teaser elements are used to visually link categories or other important pages. - [Features](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/features.md): With the help of the features element, you can present unique selling propositions (USPs) in the shopping experiences. - [Breadcrumbs](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/breadcrumbs.md) - [Code](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/code.md): The code element allows you to add custom HTML/TWIG, CSS or Javascript code to your shopping experiences. - [Divider](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/divider.md): The divider element lets you separate blocks with spacings - [Category-navigation](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/category-navigation.md): The category navigation is a supplement to Shopware's standard category navigation and offers options for configuring the display of the menu. - [Footer navigation](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/footer-navigation.md): From theme version 4.0.0, you can use the footer navigation element to edit the experience worlds - exclusively for the Pro version of the themes on Shopware self-managed systems. - [Placeholder](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/elements/placeholder.md) - [Commerce](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/commerce.md) - [Image gallery and buy box with product name & manufacturer logo](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/commerce/image-gallery-and-buy-box-with-product-name-and-manufacturer-logo.md): By using this block, the theme standard layout of the product page can also be recreated with the shopping experience layouts. - [Image gallery and buy box with product name & manufacturer logo & description](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/commerce/image-gallery-and-buy-box-with-product-name-and-manufacturer-logo-and-description.md) - [Image gallery and buy box with description](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/commerce/image-gallery-and-buy-box-with-description.md) - [Image gallery with description and buy box with product name & manufacturer logo](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/commerce/image-gallery-with-description-and-buy-box-with-product-name-and-manufacturer-logo.md) - [Category](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/category.md) - [Category listing](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/category/category-listing.md): From theme version 4.3.0, you can use the category listing element to edit the experience worlds - exclusively for the Pro version of the themes on Shopware self-managed systems. - [Columns](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/columns.md) - [Layouts](https://themedocs.zenit.design/en/content/shopping-experiences/blocks/layouts.md): Layouts are multidimensional grid blocks with multiple items per row or column. - [Block inner spacings](https://themedocs.zenit.design/en/content/shopping-experiences/block-inner-spacings.md): Spacings between blocks (columns and grids) can be set using simple classes. - [Block outer spacings](https://themedocs.zenit.design/en/content/shopping-experiences/block-outer-spacings.md): Use automatic spacings of the theme in your shopping experience pages. - [Animations](https://themedocs.zenit.design/en/content/shopping-experiences/animations.md): The shopping experience animations are triggered when the page is scrolled by the user. - [CSS Variables](https://themedocs.zenit.design/en/content/shopping-experiences/css-variables.md): CSS variables are an official part of the CSS specification and are called CSS Custom Properties - [Category](https://themedocs.zenit.design/en/content/category.md) - [Subnavigation](https://themedocs.zenit.design/en/content/category/subnavigation.md) - [Hero section](https://themedocs.zenit.design/en/content/category/category-image.md): This setting is located in the custom fields of your category: Catalogues > Categories > \[select category] - [Category header](https://themedocs.zenit.design/en/content/category/overlay-header.md): You can create a very special design by overlaying the shopping experiences with a transparent or partially transparent header. - [CSS classes](https://themedocs.zenit.design/en/content/category/css-classes.md): Via the custom fields under Catalogues > Categories > \[Select category] in the tab "Additional" you will find a field for configuring CSS classes. - [Category badges](https://themedocs.zenit.design/en/content/category/category-badges.md): Via the custom fields under Catalogues > Categories > \[Select category] in the tab "Additional" you will find fields for configuring category labels. - [Category Icons](https://themedocs.zenit.design/en/content/category/category-icons.md): Add icons to your categories and display them in the main navigation, the mobile off-canvas menu, the flyout menu, the dropdown menu and in the sidebar navigation. - [Products per row](https://themedocs.zenit.design/en/content/category/products-per-row.md): Via the custom fields under Catalogues > Categories > \[Select category] > Custom fields in the tab "Products per row" you can configure the number of products per row in this category. - [Product page](https://themedocs.zenit.design/en/content/details-page.md) - [Layouts](https://themedocs.zenit.design/en/content/details-page/layout.md): These settings are located in the custom fields of the products under: Catalogues > Products > \[select product] > Tab: Layout - [Default layout](https://themedocs.zenit.design/en/content/details-page/default-layout.md): With Shopware 6.6 at the latest you should define your own standard layout. We'll show you how to do it here. - [Gallery mode](https://themedocs.zenit.design/en/content/details-page/gallery-mode.md): These settings are located in the custom fields of the products under Catalogues > Products > \[Select Product] > Tab: Specifications > Custom Fields > Gallery - [Additional elements in buybox](https://themedocs.zenit.design/en/content/details-page/additional-elements-in-buybox.md): With the theme’s commerce blocks, you can display additional elements in the buy box on the product detail page. - [Custom tabs](https://themedocs.zenit.design/en/content/details-page/custom-tabs.md): These settings are located in the custom fields of the products under: Catalogues > Products > \[Select Product] > Tab: Specifications > Custom Fields > Custom content - [Videos tab](https://themedocs.zenit.design/en/content/details-page/videos-tab.md): These settings are located in the custom fields of the products under: Catalogues > Products > \[Select Product] > Tab: Specifications > Custom Fields > Custom content - [Documents](https://themedocs.zenit.design/en/content/details-page/documents.md): These settings are located in the custom fields of the products under: Catalogues > Products > \[Select Product] > Tab: Specifications > Custom Fields > Documents - [Product header](https://themedocs.zenit.design/en/content/details-page/product-header.md) - [Product images](https://themedocs.zenit.design/en/content/product-images.md) - [Image sizes](https://themedocs.zenit.design/en/content/product-images/image-sizes.md): Image size is the resolution of the image in pixels. - [Aspect ratio](https://themedocs.zenit.design/en/content/product-images/aspect-ratio.md): The aspect ratio means if an image is in landscape, square or portrait mode. - [File format](https://themedocs.zenit.design/en/content/product-images/file-format.md) - [Product image background](https://themedocs.zenit.design/en/content/product-images/product-image-background.md): Most of the product images are on a white background or transparent background. With our themes you can define a background color for the article image. - [Layout type](https://themedocs.zenit.design/en/content/layout-type.md) - [Responsive tables](https://themedocs.zenit.design/en/content/responsive-tables.md): The display of tables often causes problems in responsive web design. Responsive tables allow easy horizontal scrolling of tables. - [Multilingualism](https://themedocs.zenit.design/en/content/multilingualism.md): Text in theme styling or theme configuration can be delivered in different languages using Text Snippets. --- # 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/content.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.