Edit this page on GitHub

Using the Responsive theme default components

Introduction

Within the new Shopware 5 Responsive Theme we provide you with many reusable components for easier template and plugin development. With our default components you can create buttons, panels, alert messages and other UI elements by using simple HTML code snippets. You can use these snippets within your smarty template *.tpl files.

We implemented a parent child class naming in our LESS structure that helps you to identify template components. A quick example: The panel class is a parent class and all related child classes are prefixed with a panel-- e.g. panel--title or panel--body. If you are already familiar with frontend frameworks like Bootstrap you will understand Shopware's components even more easily. This guide gives you a quick overview of the usage of the most important components. If you want further information take a look at our Shopware UI components overview.

Quick examples

Buttons

Creates a styled button which can have different appearances.

<a class="btn">Button</a>
<a class="btn is--primary">Primary Button</a>
<a class="btn is--secondary">Secondary Button</a>

More styling options by adding classes to the btn element:

  • is--large: larger button height
  • is--small: smaller button height
  • is--full: button with 100% width
  • is--center: button with centered text
  • is--icon-left button with icon on the left
  • is--icon-right button with icon on the right

Note: The button component can also be used on the HTML <button> element.

Panels

Creates a content Panel which can have different appearances.

<div class="panel has--border is--rounded">
    <div class="panel--title is--underline">
        Panel Title
    </div>
    <div class="panel--body is--wide">
        Panel Content
    </div>
</div>

More styling options by adding classes to the panel element:

  • has--border: Panel with border
  • is--rounded: Panel with rounded corners

Icons

Creates a webfont icon.

<i class="icon--basket"></i>

The Shopware 5 Responsive theme provides you with a large amount of webfont icons. You can find a list of all Icons in our Shopware UI components overview.

You can also use icons within buttons by adding the positioning classes from the Buttons example:

<a class="btn is--primary is--icon-left">
    <i class="icon--account"></i> Primary button with icon on the left
</a>

Alert messages

Creates a styled alert message box.

<div class="alert is--success is--rounded">
    <div class="alert--icon">
        <!-- Alert message icon -->
        <i class="icon--element icon--check"></i>
    </div>
    <div class="alert--content">
        Alert message text
    </div>
</div>

Display different alert message types by adding classes to the alert element:

  • is--success: Success message (green)
  • is--error: Error message (red)
  • is--info: Info message (blue)
  • is--warning: Warning message (yellow)

Note: At least one of those four types is required for proper appearance.

Creates an absolute and centered positioned modal box window.

<div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;">
    <div class="header">
        <div class="title">
            Modal box title
        </div>
    </div>
    <div class="content">
        Modal box content
    </div>
    <!-- Modal box close button -->
    <div class="btn icon--cross is--small btn--grey modal--close">
    </div>
</div>

Note: The inline styles are generated by the jquery.modal.js jQuery Plugin.

Product boxes

Creates a product box for product listings.

<div class="product--box box--basic">
    <div class="box--content is--rounded">
        <div class="product--info">
            <a href="#" class="product--image">
                <!-- Article images -->
            </a>

            <div class="product--rating-container">
                <!-- Product rating stars -->
            </div>

            <a href="#" class="product--title" title="">
                Product title
            </a>

            <div class="product--description">
                Product description
            </div>

            <div class="product--price-info">
                <div class="price--unit">
                    <!-- Optional unit price -->
                </div>
                <div class="product--price">
                    <span class="price--default is--nowrap">
                        35,00 €
                    </span>
                </div>
            </div>

            <div class="product--actions">
                <!-- Product action links e.g. product compare -->
            </div>
        </div>
    </div>
</div>

Product box types:

  • box--basic: Default product box
  • box--big-image: Product box with focus on a larger image
  • box--minimal: Smaller product box with less information

Product sliders

Creates a section with multiple product boxes which can be slide by direction arrows.

<div class="product-slider" data-product-slider="true">

    <!-- Product slider direction arrows -->
    <a class="product-slider--arrow arrow--next is--horizontal"></a>
    <a class="product-slider--arrow arrow--prev is--horizontal"></a>

    <div class="product-slider--container is--horizontal">

        <div class="product-slider--item">
            <!-- Include of the product box -->
        </div>

    </div>
</div>

The product slider can be both oriented in horizontal and vertical display mode by adding classes to the product-slider--container and product-slider--arrow elements:

  • is--horizontal: Horizontal slider alignment
  • is--vertical: Vertical slider alignment

Note: The jQuery plugin which actually slides the product boxes is called by the data-product-slider="true" attribute. For further modifications like e.g. animation speed take a look at the options in the jquery.product-slider.js jQuery Plugin.

Complete component overview

You can find the complete overview of the Responsive theme components in the Shopware UI components overview.

Top