Elements

Content

Choice

Time

Date

Switch

Number

Selection

Range

Page

Article

Product

Collection

Color

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam blanditiis dicta, dolore nostrum rem reprehenderit rerum sit totam ut voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, dolorem?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut autem, deleniti eaque, error et, ex minima obcaecati quia ratione similique sunt tenetur vel. Accusantium, aperiam asperiores, aspernatur at culpa delectus deserunt, ea eius enim exercitationem fugit modi perspiciatis suscipit!

Liquid Code

{% assign mf_choice = page.metafields.general.mf_choice %}

{% assign handle = mf_choice %}
{% case handle %}
    {% when 'left' %}
        Left
    {% when 'middle' %}
        Middle
    {% when 'right' %}
        Right
    {% else %}
        Else
{% endcase %}

<!-- Result-->
custom-page

CSS Code

    .timer {
        background: #f6fafd;
        padding: 10px;
        margin: 10px 0;
    }
    .timer--expired {
        display: none;
    }
    .timer__title {
        @extend .paragraph;
        text-align: center;
    }
    .timer-display {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 5px;
    }
    .timer-block {
        position: relative;
        width: 25%;
        padding: 0 10px;
    }
    .timer-block:not(:last-child):after {
        content: ':';
        position: absolute;
        right: 0;
        top: 3px;
    }
    .timer-block__num,
    .timer-block__unit {
        display: block;
        text-align: center;
    }

Attention Block Title

Attention Block Description

Helpful Links

Link 1
Link2
Link3

Time

12:00:00

Time

Date

14-06-2021

Date

Switch

blank

Switch

Number

33333333333333

Number

Selection

top|middle|bottom

Selection

Page

lp1|lp2|lp3

Example

LP1 {{ page.title }}

LP 1 - Content {{ page.content }}

2021-06-04 08:07:55 -0400 {{ page.published_at }}

multi-lp {{ page.template_suffix }}

{{ page.author }}

/pages/lp1 {{ page.url }}

82102354072 {{ page.id }}

LP2 {{ page.title }}

LP 2 - Content {{ page.content }}

2021-06-04 08:08:05 -0400 {{ page.published_at }}

multi-lp {{ page.template_suffix }}

{{ page.author }}

/pages/lp2 {{ page.url }}

82102386840 {{ page.id }}

LP3 {{ page.title }}

LP 3 - Content {{ page.content }}

2021-06-04 08:08:13 -0400 {{ page.published_at }}

multi-lp {{ page.template_suffix }}

{{ page.author }}

/pages/lp3 {{ page.url }}

82102419608 {{ page.id }}

From the custom field we get the handles of the pages and through the loop we get access to their title and content.

Also through them we can get custom fields that are linked to this page:

page[handle]metafields.namespace.field_id

Attention Block Title

Attention Block Description

Documentation

page.title

Desc

page.title

Desc

page.title

Desc

page.title

Desc

Liquid Code

{% assign mf_choice = page.metafields.general.mf_choice %}

{% assign handle = mf_choice %}
{% case handle %}
    {% when 'left' %}
        Left
    {% when 'middle' %}
        Middle
    {% when 'right' %}
        Right
    {% else %}
        Else
{% endcase %}

<!-- Result-->
custom-page

JS Code

CSS Code

    .timer {
        background: #f6fafd;
        padding: 10px;
        margin: 10px 0;
    }
    .timer--expired {
        display: none;
    }
    .timer__title {
        @extend .paragraph;
        text-align: center;
    }
    .timer-display {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 5px;
    }
    .timer-block {
        position: relative;
        width: 25%;
        padding: 0 10px;
    }
    .timer-block:not(:last-child):after {
        content: ':';
        position: absolute;
        right: 0;
        top: 3px;
    }
    .timer-block__num,
    .timer-block__unit {
        display: block;
        text-align: center;
    }

Helpful Links

Article

news/test-blog-2

Blog

news

Article

main-menu

Convenient to use when there are a limited number of choices.

Lorem ipsum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam blanditiis dicta, dolore nostrum rem reprehenderit rerum sit totam ut voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, dolorem?

Liquid Code

{% assign mf_choice = page.metafields.general.mf_choice %}

{% assign handle = mf_choice %}
{% case handle %}
    {% when 'left' %}
        Left
    {% when 'middle' %}
        Middle
    {% when 'right' %}
        Right
    {% else %}
        Else
{% endcase %}

<!-- Result-->
custom-page

CSS Code

    .timer {
        background: #f6fafd;
        padding: 10px;
        margin: 10px 0;
    }
    .timer--expired {
        display: none;
    }
    .timer__title {
        @extend .paragraph;
        text-align: center;
    }
    .timer-display {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 5px;
    }
    .timer-block {
        position: relative;
        width: 25%;
        padding: 0 10px;
    }
    .timer-block:not(:last-child):after {
        content: ':';
        position: absolute;
        right: 0;
        top: 3px;
    }
    .timer-block__num,
    .timer-block__unit {
        display: block;
        text-align: center;
    }

Attention Block Title

Attention Block Description

Helpful Links

Link 1
Link2
Link3

Attention Block Title

Attention Block Description

pro-default

Product

Products

         {% if choice == 'Collection' %}
             {% for product in collections[coll].products limit: quantity %}
                 {% assign prod_item = all_products[handle] %}
                 <a href="{{ product.url }}" class="prod__item prod-box {{ product_style }}">
                <div class="prod-box__img">
                    <img class="lazyload" data-src="{{ product.featured_image | img_url: grande }}" src="{{ product.featured_image | img_url: grande }}" alt="{{ product.title }}">
                </div>
                <div class="prod-box__title">{{product.title }} </div>
                    <div class="prod-box__price">{{product.first_available_variant.price | money }} </div>
                </a>
               {% endfor  %}
         {% else %}
               {% for handle in mf_product_handle limit: quantity %}
                   {% assign prod_item = all_products[handle] %}
                <a href="{{ prod_item.url }}" class="prod__item prod-box {{ product_style }}">
                    <div class="prod-box__img">
                        <img class="lazyload" data-src="{{ prod_item.featured_image | img_url: 'grande' }}" src="{{ prod_item.featured_image | img_url: 'grande' }}" alt="{{ prod_item }}">
                    </div>
                    <div class="prod-box__title">{{ prod_item.title }} </div>
                    <div class="prod-box__price">{{ prod_item.first_available_variant.price | money }} </div>
                </a>
               {% endfor %}
            {% endif %}

Liquid Code

CSS Code

.prod__item {
        display: flex;
        flex-direction: column;
    }
    .prod__item.product_style--one-to-one {
        width: 100%;
    }
    .prod__item.product_style--one-to-two {
        width: calc((100% / 2) - 15px);
    }
    .prod__item.product_style--one-to-three {
        width: calc((100% / 3) - 15px);
    }
    .prod__item.product_style--one-to-four {
        width: calc((100% / 4) - 15px);
    }

    .prod-wrap.product_style--one-to-one {
        display: flex;
        flex-wrap: wrap;
    }
    .prod-wrap.product_style--one-to-two {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .prod-wrap.product_style--one-to-three {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .prod-wrap.product_style--one-to-four {
        display: flex;
        flex-wrap: wrap;
    }

    .block-gallery {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

    .block-gallery__item  {
        width: calc((100% / 2 ) - 15px);
    }

JS Code

Collection

ProductDropProductDrop

CollectionDrop

Demo Product 3 Demo Products Sort by

Demo Product 3

₴0.00

Demo Products

₴111.00

Demo Product 3

₴0.00

Demo Products

₴111.00

Collection

Color

#E31F1F

Color

Special Offer End In

00 Days

00 Hours

00 Minutes

00 Seconds

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, consequuntur corporis dolorum enim esse est expedita hic incidunt itaque minima mollitia neque odio officia pariatur quod, repellat reprehenderit, sit voluptates! A accusantium aperiam aut commodi dicta doloribus dolorum eligendi enim est et maxime nemo omnis, quibusdam quos sed voluptatem voluptatum.

Liquid Code

<div class="timer">
    {% if title != blank %} <h4 class="timer__title">{{ title }} </h4>{% endif %}
    <div class="timer-display">
        <div class="timer-block">
            <span class="timer-block__num js-timer-days">00 </span>
            <span class="timer-block__unit">Days </span>
        </div>
        <div class="timer-block">
            <span class="timer-block__num js-timer-hours">00 </span>
            <span class="timer-block__unit">Hours </span>
        </div>
        <div class="timer-block">
             <span class="timer-block__num js-timer-minutes">00 </span>
             <span class="timer-block__unit">Minutes </span>
        </div>
        <div class="timer-block">
             <span class="timer-block__num js-timer-seconds">00 </span>
              <span class="timer-block__unit">Seconds </span>
        </div>
    </div>
 </div>

<!-- Include Snippet -->
{% include 'huratips-countdown-timer',
    title: "Special Offer End In",
    end_date: "Dec 31, 2022"
%}

JS Code

var second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;
var countDown = new Date('{{ end_date }}').getTime(),
    x = setInterval(function() {
        var now = new Date().getTime(),
        distance = countDown - now;
        document.querySelector('.js-timer-days').innerText = Math.floor(distance / (day)),
        document.querySelector('.js-timer-hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.querySelector('.js-timer-minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.querySelector('.js-timer-seconds').innerText = Math.floor((distance % (minute)) / second);
    }, second)

CSS Code

    .timer {
        background: #f6fafd;
        padding: 10px;
        margin: 10px 0;
    }
    .timer--expired {
        display: none;
    }
    .timer__title {
        @extend .paragraph;
        text-align: center;
    }
    .timer-display {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 5px;
    }
    .timer-block {
        position: relative;
        width: 25%;
        padding: 0 10px;
    }
    .timer-block:not(:last-child):after {
        content: ':';
        position: absolute;
        right: 0;
        top: 3px;
    }
    .timer-block__num,
    .timer-block__unit {
        display: block;
        text-align: center;
    }

Helpful Links

Accordion

Prima Klima! Der Impuls 2.6 Eco R290 sorgt für eine angenehme Temperierung in Innenräumen.

Mehr zum Produkt

Highlights und Zubehör

Downloads

1 2 3

Wishlist

Custom Page

4 collections