For modern design, you can use an elegant shortcut. Many dozens of fantastic design elements are already available in Smartstore. They are amazingly easy to integrate into many areas. The standard behind them: Bootstrap 4.
With it you design, for example
- Buttons with advanced features
- Navigation elements such as menus, tabs and boxes with text that is first hidden and then released on click
- Beautiful "map" elements with visually detachable header and footer areas
Normally, a store owner would have to work like a web designer and for all this painstakingly neat HTML and CSS code program. Not so with Bootstrap.
Bootstrap 4, already integrated into Smartstore, is a professionally designed, out-of-the-box, fully responsive HTML and CSS library. It is readily available in any HTML editor of the store software.
Where to use Bootstrap elements?
- in Smartstore widgets
- in Smartstore article long texts
- in pagebuilder text and HTML blocks
- on Smartstore pages
Shortly, anywhere a store admin can enter longer, formatted text into an HTML editor.
The technical effort is minimal. All you need to do is add your content to a pre-built HTML block in the HTML code view. It's quick to learn and the achieved result will convince you and your customers!
Thus, you can inspire at least 1,000 percent more customers with minimal effort! In the following, we will introduce you to just a few of the Bootstrap ready-made elements, with which you can easily expand a standard smartstore online store to an individual sales machine!
Even javascript and animations have been thought of. This will bring your elements to life and shine.
Example: Show content at the touch of a button
Example: Nav Pills
The example presented here contains three Nav Pills. A click on "Bonus" shows hidden content.
Example: Jumbotron
Buy me!
This is a template for a simple marketing message in your smartstore store. You can see a large Jumbotron text box here. It contains this body text and a ...
Example: Bootstrap Card
Standard-Card
This is a simple hero unit to point store visitors to special content or information.
This card uses utility classes for typography and spacing to distribute the content within the larger container.
How to get started
You can easily get the bootstrap code for first attempts from the HTML source of this page. You can find more code examples in the Bootstrap documentation (see below).
Start with a few components first and build e-commerce projects for smartphones, tablets, desktops all in one! You can also develop websites, marketplaces and product catalogs with this ingenious system.
Responsive Design with Bootstrap
HTML content can be captured in Smartstore via an HTML editor, such as in the detailed product description, widgets or HTML pages, in the content slider, the mega menu, etc. This content should look good on all devices. Nothing easier than that with Bootstrap. There are a few things to keep in mind for responsive rendering of this content.
Responsive images
After inserting an image via the HTML editor, you need to go once into the HTML source code, which can be conveniently accessed via a button
button in the HTML editor. The style attribute of the img element should be removed and the image should be inserted with the
class img-fluid.
<img class="img-fluid" scr="#" ...="">
Layout: Arrange elements
.Layout here means the arrangement of different elements on a web page or area. Maybe you want to display images in
multiple columns, but only do so on the desktop?
Since Smartstore was built with Bootstrap 4, you can use the classes that are
provided by Bootstrap for these purposes.
Responsive tables
If you want to display a tabular listing, there is no way around using an HTML table tag. To make
make this table responsive - that is, independent of the screen size - all you need to do is add CSS classes as in the following
example:
<table class="table table-responsive"> … </table>