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
  • Colors
  • Basic configuration
  • Product title
  • Product price
  • Product configurator
  • Product details
  • Product features

Was this helpful?

  1. Styling
  2. Product

Detail

Last updated 5 months ago

Was this helpful?

Colors

-

Basic configuration

These settings also affect the layout of the quickview function.

Product title position (1): Sets the position for the product title.

In Shopping Experience layouts, the position of the product name is controlled by the product name block or the various gallery and buybox blocks which includes the product name.

Short description (2): The theme supports displaying an additional short description, which is used from the meta description of the product.

Variant characteristics (3): The main features of a variant can be displayed or hidden below the product title.

Rating position (4): Ratings can be displayed in the title area or below the price.

Rating placeholder (5): Displays inactive stars as placeholders if the product does not have any ratings yet.

Wishlist position (6): Position the Add to Wish List link above the gallery or below the shopping cart button.

Manufacturer position (7): The manufacturer's name or logo can be displayed in different places. You can also disable it.

Quantity field (8): Quantity selection/input can be hidden. The user can only place one delivery quantity in the shopping cart in the first step. The quantity can still be adjusted in the checkout and shopping cart.

In listings, you can show or hide the quantity selection/input under category > product boxes > product actions, too.

In quickview, the setting of the detail page is adopted.

Delivery status indicator appearance (9): Changes the appearance of the delivery status.

Example:

The spacings (10, 11, 12, 13) are analogous to the layout spacing of the elements/blocks of the shopping experiences. If the value is set to auto, the global container spacings from General > Basic layout > Basic configuration > Container spacings are used.

In Shopping Experience layouts, these settings are overwritten by the individual block/element settings.

Sticky (13): If active, the buybox is sticky, as long as the content is not higher than the viewport.

If the Sticky option is also activated for the adjacent gallery, the element with the smaller height will always be sticky.

Force Sticky (14): The sticky function only works if all parent elements do not use the "overflow:hidden" CSS property. There may be extensions that set this property. If active, the sticky function will be enforced and all parent elements with "overflow: hidden" will be rewritten to "overflow: visible".

Product title

-

Product price

-

Product configurator

The colors of the product configurator (variant selection) can be customized via the settings. In addition, non-combinable properties could be crossed out (1), are displayed with a dashed border (2) and/or have a reduced opacity (3). Tooltips (4) are used to show the option name of colors and images.

Tip: The reduction of opacity distorts the colors of a color selection, so it may be useful to use the strike-through and/or dashed display options.

Example:

Product details

Example:

Product features

Any number of advantages of a product can be displayed on the detail page via the product features. In addition to global activation (1), two different display modes (2) and the selection of an icon (4) are available. Via the position (3) you can determine where these features are displayed. The heading (5) is optional and can be hidden.

The content is stored directly in the product in the area of the custom fields in the Custom content (1) tab. In the Product features (2) input, any number of advantages can be inserted and separated by a semicolon.

Example:

🎨
Delivery status a badge
Decreasing the opacity alters the shade of blue