Content 1

Simple section with li-conent-for-blocks to easily add headline buttons and more text in the shopify editor

Small Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Button
Button 2

Content 2

Simple section with li-conent-for-blocks to easily add headline buttons and more text in the shopify editor. Custom Settings (li-settings:custom) to choose on which side the image should be.

Small Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Button
Button 2
{ "type": "select", "id": "image_position", "label": "Image position", "options": [ { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" } ], "default": "left" }

Content 3

A block based content section where you can use different text, heading and button elements.
You can also set the content width and rearrange the image.

[{ "type": "range", "id": "spacer_height", "min": 0.1, "max": 5, "step": 0.1, "unit": "rem", "label": "Spacer Height", "default": 1 }]

Heading H1

Heading H2

Heading H3

At Fortis, we push the boundaries of innovation to redefine the essence of the Tool Watch. The Novonaut, the ultimate space watch, is a testament to this spirit.
At Fortis, we push the boundaries of innovation to redefine the essence of the Tool Watch. The Novonaut, the ultimate space watch, is a testament to this spirit.
Button Text
Button Text
Button Text
Button Text
[ { "type": "range", "id": "content_width", "min": 14, "max": 46, "step": 0.5, "unit": "rem", "label": "Content Width", "default": 24 }, { "type": "select", "id": "image_order", "label": "Image Order", "options": [ { "value": "-9999", "label": "First" }, { "value": "9999", "label": "Last" } ], "default": "-9999" } ]

Links 1

Simple section with li-conent-for-blocks headline block and a card with li-block applied to easily create a list of cards.

Small Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Button
Button 2

Heading

Konzentrieren Sie sich auf die wirklich wichtigen Dinge im Leben und nicht aufs Putzen.

Mehr erfahren
{ "type": "select", "id": "background_color", "label": "Hintergrund Farbe", "options": [ { "value": "", "label": "Weiß" }, { "value": "background-color-light-blue", "label": "Hellblau" } ], "default": "" }

Tabs 1 (AlpineJS)

A tab section that works with li-blocks

Tabs

Tab Text
Button Text
This is some text inside of a div block.

Hero Slider 1 (SwiperJS)

A hero section that works with li-blocks.
You need to implement the SwiperJS CDN scripts to make this section work.

Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Button Text
Button Text
[ { "type": "video", "id": "video_desktop", "label": "Video Desktop" }, { "type": "video", "id": "video_mobile", "label": "Video Mobile" } ]

Hero Slider 2 (SwiperJS)

A hero section that works with li-blocks.
You need to implement the SwiperJS CDN scripts to make this section work.

This is some text inside of a div block.

Heading

Button Text

FAQ 1 (AlpineJS)

A FAQ section that works with li-blocks.
You need to implement the AlpineJS CDN collapse script to make this section work.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Blog with Limit (AlpineJS)

A blog section that limits the initial articles shown. It can be expanded to show all articles via AlpineJS.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rezepte
28.11.2024

Blog Title

This is some text inside of a div block.
[ { "type": "blog", "id": "blog", "label": "Blog" }, { "type": "range", "id": "initial_limit", "min": 0, "max": 100, "step": 1, "label": "Articles: Initial Limit", "default": 3 }, { "type": "range", "id": "total_limit", "min": 0, "max": 100, "step": 1, "label": "Articles: Total Limit", "default": 9 } ]

Product Slider 1

A product swiper that can also be used as the related products component.
You need to implement the SwiperJS CDN scripts to make this section work.

Lorem ipsum dolor sit amet

Not in Stock
Sale
Vendor
Product name
$55
$55
Variant
Add to Cart
Not in Stock
[ { "type": "product_list", "id": "product_list", "label": "Products" }, { "type": "range", "id": "products_limit", "min": 1, "max": 50, "step": 1, "label": "Products: Limit", "default": 12 } ]

Product Slider 2

A product swiper that can also be used as the related products component.
You need to implement the SwiperJS CDN scripts to make this section work.

Lorem ipsum dolor sit amet

Button Text
Not in Stock
Sale
Vendor
Product name
$55
$55
Variant
Add to Cart
Not in Stock
[ { "type": "product_list", "id": "product_list", "label": "Products" }, { "type": "range", "id": "products_limit", "min": 1, "max": 50, "step": 1, "label": "Products: Limit", "default": 12 } ]

Collection Swiper 1

A swiper that displays a list of collections.
You need to implement the SwiperJS CDN scripts to make this section work.

Lorem ipsum dolor sit amet

Collection title
[ { "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 20 }, { "type": "range", "id": "collection_limit", "min": 1, "max": 50, "step": 1, "label": "Collections: Limit", "default": 12 } ]

Collection Swiper 2

A swiper that displays a list of collections.
You need to implement the SwiperJS CDN scripts to make this section work.

Categories

Look at our categories

Taschen
{ "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 20 }

Collection Tabs (AlpineJS)

A list of collections with products in a tab.
You need to implement the AlpineJS CDN focus script for the section to be fully accessible.

Heading

[ { "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 4 }, { "type": "range", "id": "product_limit", "min": 1, "max": 24, "step": 1, "label": "Product per Tab", "default": 4 } ]

Block Tabs (SwiperJS, AlpineJS)

A swiper that displays products of collections inside a tab element.
You need to implement the SwiperJS CDN scripts to make this section work.
You need to implement the AlpineJS CDN focus script for the section to be fully accessible.

Heading

Not in Stock
Sale
Vendor
Product name
$55
$55
Variant
Add to Cart
Not in Stock
Button Text
[ { "type": "text", "id": "tab_label", "label": "Tab Label", "default": "Tab 1" }, { "type": "image_picker", "id": "tab_icon", "label": "Tab Icon" }, { "type": "product_list", "id": "product_list", "label": "Products", "limit": 12 } ]

Masonry Grid

A block based masonry grid.

[ { "type": "text", "id": "aria_label", "label": "Aria Label", "info": "Descriptive text for the link" }, { "type": "url", "id": "link", "label": "Link" } ]
[ { "type": "text", "id": "aria_label", "label": "Aria Label", "info": "Descriptive text for the link" }, { "type": "url", "id": "link", "label": "Link" } ]
[ { "type": "text", "id": "aria_label", "label": "Aria Label", "info": "Descriptive text for the link" }, { "type": "url", "id": "link", "label": "Link" } ]
{ "type": "number", "id": "columns", "label": "Columns", "default": 4, "info": "Only works on Desktop. Tablet and below are fixed columns." }

Hover Cards

The blocks are rows in this case, as we always need two cards next to eachother for the animation to work.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Button Text

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Button Text

Flip Cards (SwiperJS)

A block based swiper that allows to show extra content by flipping the card.
You need to implement the SwiperJS CDN scripts to make this section work.

Heading

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
{ "type": "video", "id": "video", "label": "Video" }

Collection Tabs

A block based swiper that allows to show extra content by flipping the card.
You need to implement the SwiperJS CDN scripts to make this section work.

{ "type": "collection_list", "id": "collection_list", "label": "Collections", "limit": 8 }

Card Swiper 1

A block based swiper.
You need to implement the SwiperJS CDN scripts to make this section work.

Lorem ipsum dolor sit amet

Card Swiper 2

A block based swiper.
You need to implement the SwiperJS CDN scripts to make this section work.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Card Swiper 3

A block based swiper.
You need to implement the SwiperJS CDN scripts to make this section work.

Heading

Test

Mehr erfahren

Newsletter 1

A newsletter section with a list, image and rich text element.
Attention: There is a hidden label above the input as every form input needs a label to make it accessible.

USP 1

A block based USP section.

USP 2

A block based USP section.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Dots 1

A block based dot section where you can showcase products in a large image.

Heading
Text
Text Link
{% assign dots_total = forloop.length %}
This is some text inside of a div block.
This is some text inside of a div block.

Heading

This is some text inside of a div block.
Button Text