Home

Membership Page

Coming soon.


_445
{% schema %}
_445
{
_445
"name": "Membership Tiers",
_445
"settings": [
_445
{
_445
"type": "header",
_445
"content": "Content"
_445
},
_445
{
_445
"type": "text",
_445
"id": "heading",
_445
"label": "Heading",
_445
"default": "Vorteile im Club"
_445
},
_445
{
_445
"type": "text",
_445
"id": "subheading",
_445
"label": "Subheading",
_445
"default": "Treue wird belohnt! Je mehr du bestellst, umso weiter steigst du auf."
_445
},
_445
{
_445
"type": "richtext",
_445
"id": "footer_text",
_445
"label": "Footer Text",
_445
"default": "<p>Bitte beachte, dass nicht genutztes Cashback nach 24 Monaten verfällt.</p>"
_445
},
_445
{
_445
"type": "text",
_445
"id": "button_text",
_445
"label": "Button Text"
_445
},
_445
{
_445
"type": "url",
_445
"id": "button_link",
_445
"label": "Button Link"
_445
},
_445
{
_445
"type": "header",
_445
"content": "Style Settings"
_445
},
_445
{
_445
"type": "color",
_445
"id": "background_color",
_445
"label": "Background Color",
_445
"default": "#f9fafb"
_445
},
_445
{
_445
"type": "color",
_445
"id": "cashback_background",
_445
"label": "Cashback Banner Background",
_445
"default": "#000000"
_445
},
_445
{
_445
"type": "color",
_445
"id": "cashback_text",
_445
"label": "Cashback Banner Text",
_445
"default": "#ffffff"
_445
},
_445
{
_445
"type": "color",
_445
"id": "card_background",
_445
"label": "Card Background",
_445
"default": "#ffffff"
_445
},
_445
{
_445
"type": "color",
_445
"id": "tier_info_background",
_445
"label": "Tier Info Background",
_445
"default": "#F9FAFC"
_445
},
_445
{
_445
"type": "color",
_445
"id": "card_border_color",
_445
"label": "Card Border Color",
_445
"default": "#e5e7eb"
_445
},
_445
{
_445
"type": "select",
_445
"id": "card_shadow",
_445
"label": "Card Shadow",
_445
"options": [
_445
{
_445
"value": "none",
_445
"label": "None"
_445
},
_445
{
_445
"value": "small",
_445
"label": "Small"
_445
},
_445
{
_445
"value": "medium",
_445
"label": "Medium"
_445
},
_445
{
_445
"value": "large",
_445
"label": "Large"
_445
}
_445
],
_445
"default": "medium"
_445
},
_445
{
_445
"type": "range",
_445
"id": "section_padding",
_445
"min": 20,
_445
"max": 100,
_445
"step": 4,
_445
"unit": "px",
_445
"label": "Section Padding",
_445
"default": 64
_445
},
_445
{
_445
"type": "range",
_445
"id": "border_radius",
_445
"min": 0,
_445
"max": 20,
_445
"step": 2,
_445
"unit": "px",
_445
"label": "Card Border Radius",
_445
"default": 8
_445
},
_445
{
_445
"type": "select",
_445
"id": "container_width",
_445
"label": "Container Width",
_445
"options": [
_445
{
_445
"value": "max-w-5xl",
_445
"label": "Narrow (1024px)"
_445
},
_445
{
_445
"value": "max-w-6xl",
_445
"label": "Normal (1200px)"
_445
},
_445
{
_445
"value": "max-w-7xl",
_445
"label": "Wide (1400px)"
_445
}
_445
],
_445
"default": "max-w-6xl"
_445
},
_445
{
_445
"type": "select",
_445
"id": "text_alignment",
_445
"label": "Text Alignment",
_445
"options": [
_445
{
_445
"value": "left",
_445
"label": "Left"
_445
},
_445
{
_445
"value": "center",
_445
"label": "Center"
_445
},
_445
{
_445
"value": "right",
_445
"label": "Right"
_445
}
_445
],
_445
"default": "center"
_445
}
_445
],
_445
"blocks": [
_445
{
_445
"type": "membership_tier",
_445
"name": "Membership Tier",
_445
"settings": [
_445
{
_445
"type": "text",
_445
"id": "cashback_text",
_445
"label": "Cashback Text",
_445
"default": "5% Cashback pro Bestellung"
_445
},
_445
{
_445
"type": "text",
_445
"id": "tier_name",
_445
"label": "Tier Name",
_445
"default": "Bronze"
_445
},
_445
{
_445
"type": "text",
_445
"id": "tier_description",
_445
"label": "Tier Description",
_445
"default": "Hier geht es los."
_445
},
_445
{
_445
"type": "text",
_445
"id": "price_threshold",
_445
"label": "Price Threshold",
_445
"default": "ab 0€"
_445
},
_445
{
_445
"type": "text",
_445
"id": "price_description",
_445
"label": "Price Description",
_445
"default": "jährlichem Umsatz profitierst du bereits von diesen Vorteilen."
_445
},
_445
{
_445
"type": "text",
_445
"id": "benefits_heading",
_445
"label": "Benefits Heading"
_445
},
_445
{
_445
"type": "richtext",
_445
"id": "benefits_list",
_445
"label": "Benefits List",
_445
"default": "<ul><li>5€ zu deinem Geburtstag</li><li>2€ für Text Reviews</li><li>10€ für jeden Freund, den du empfiehlst</li></ul>"
_445
},
_445
{
_445
"type": "richtext",
_445
"id": "exclusive_benefits_list",
_445
"label": "Exclusive Benefits List"
_445
}
_445
]
_445
}
_445
],
_445
"presets": [
_445
{
_445
"name": "Membership Tiers",
_445
"blocks": [
_445
{
_445
"type": "membership_tier"
_445
}
_445
]
_445
}
_445
]
_445
}
_445
{% endschema %}
_445
_445
{% style %}
_445
.membership-section {
_445
background-color: {{ section.settings.background_color }};
_445
padding: {{ section.settings.section_padding }}px 0;
_445
}
_445
_445
.membership-container {
_445
max-width: {% case section.settings.container_width %}
_445
{% when 'max-w-5xl' %}
_445
1024px
_445
{% when 'max-w-6xl' %}
_445
1200px
_445
{% when 'max-w-7xl' %}
_445
1400px
_445
{% endcase %};
_445
margin: 0 auto;
_445
padding: 0 1rem;
_445
}
_445
_445
.membership-header {
_445
max-width: 768px;
_445
margin: 0 auto;
_445
text-align: {{ section.settings.text_alignment }};
_445
}
_445
_445
.membership-heading {
_445
font-size: 2.5rem;
_445
color: #000;
_445
margin-bottom: 1rem;
_445
}
_445
_445
.membership-subheading {
_445
font-size: 1.125rem;
_445
margin-top: 0.5rem;
_445
}
_445
_445
.membership-grid {
_445
display: grid;
_445
grid-template-columns: 1fr;
_445
gap: 1.25rem;
_445
margin-top: 2.5rem;
_445
}
_445
_445
@media (min-width: 768px) {
_445
.membership-grid {
_445
grid-template-columns: repeat(3, 1fr);
_445
}
_445
}
_445
_445
.membership-card {
_445
background: {{ section.settings.card_background }};
_445
border-radius: {{ section.settings.border_radius }}px;
_445
overflow: hidden;
_445
border: 1px solid {{ section.settings.card_border_color }};
_445
{% case section.settings.card_shadow %}
_445
{% when 'none' %}
_445
{% when 'small' %}
_445
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
_445
{% when 'medium' %}
_445
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
_445
{% when 'large' %}
_445
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
_445
{% endcase %}
_445
}
_445
_445
.membership-card-header {
_445
border-bottom: 1px solid {{ section.settings.card_border_color }};
_445
}
_445
_445
.membership-cashback {
_445
background-color: {{ section.settings.cashback_background }};
_445
color: {{ section.settings.cashback_text }};
_445
padding: 0.5rem;
_445
text-align: center;
_445
}
_445
_445
.membership-tier-info {
_445
padding: 2rem;
_445
background-color: {{ section.settings.tier_info_background }};
_445
}
_445
_445
.membership-tier-name {
_445
font-size: 2.25rem;
_445
font-weight: 600;
_445
margin-top: 0.5rem;
_445
margin-bottom: 0.5rem;
_445
}
_445
_445
.membership-tier-description {
_445
font-size: 1rem;
_445
font-weight: 700;
_445
margin-top: 0.5rem;
_445
}
_445
_445
.membership-card-main {
_445
padding: 2rem;
_445
}
_445
_445
.membership-price {
_445
font-size: 3rem;
_445
font-weight: 600;
_445
}
_445
_445
.membership-price-description {
_445
font-size: 0.875rem;
_445
opacity: 0.7;
_445
margin-top: 0.5rem;
_445
}
_445
_445
.membership-benefits {
_445
padding: 1rem 0;
_445
margin-top: 1rem;
_445
border-top: 1px solid {{ section.settings.card_border_color }};
_445
}
_445
_445
.membership-benefits ul {
_445
margin-top: 0.25rem;
_445
list-style: none;
_445
padding: 0;
_445
}
_445
_445
.membership-benefits li {
_445
display: flex;
_445
align-items: flex-start;
_445
gap: 0.5rem;
_445
margin-bottom: 0.75rem;
_445
}
_445
_445
.membership-benefits li:before {
_445
content: '';
_445
width: 1.25rem;
_445
height: 1.25rem;
_445
margin-top: 0.125rem;
_445
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M389-267 195-460l51-52 143 143 325-324 51 51-376 375Z' fill='currentColor'/%3E%3C/svg%3E");
_445
background-size: contain;
_445
flex-shrink: 0;
_445
}
_445
_445
.benefits-heading {
_445
font-weight: bold;
_445
}
_445
_445
.membership-footer {
_445
margin-top: 2rem;
_445
text-align: center;
_445
font-size: 0.875rem;
_445
opacity: 0.7;
_445
}
_445
_445
.membership-footer p {
_445
margin-bottom: 0.5rem;
_445
}
_445
_445
.membership-cta {
_445
margin-top: 2rem;
_445
text-align: center;
_445
}
_445
{% endstyle %}
_445
_445
<div class="membership-section">
_445
<div class="membership-container">
_445
<div class="membership-header">
_445
<h2 class="membership-heading">{{ section.settings.heading }}</h2>
_445
<p class="membership-subheading">{{ section.settings.subheading }}</p>
_445
</div>
_445
_445
<div class="membership-grid">
_445
{%- for block in section.blocks -%}
_445
{%- if block.type == 'membership_tier' -%}
_445
<article class="membership-card">
_445
<header class="membership-card-header">
_445
<div class="membership-cashback">
_445
<strong>{{ block.settings.cashback_text }}</strong>
_445
</div>
_445
<div class="membership-tier-info">
_445
<h4 class="membership-tier-name">{{ block.settings.tier_name }}</h4>
_445
{%- if block.settings.tier_description != blank -%}
_445
<p class="membership-tier-description">{{ block.settings.tier_description }}</p>
_445
{%- endif -%}
_445
</div>
_445
</header>
_445
_445
<main class="membership-card-main">
_445
<div>
_445
<span class="membership-price">{{ block.settings.price_threshold }}</span>
_445
{%- if block.settings.price_description != blank -%}
_445
<p class="membership-price-description">{{ block.settings.price_description }}</p>
_445
{%- endif -%}
_445
</div>
_445
_445
<div class="membership-benefits">
_445
{{ block.settings.benefits_list }}
_445
_445
{%- if block.settings.benefits_heading != blank -%}
_445
<p class="benefits-heading">{{ block.settings.benefits_heading }}</p>
_445
{{ block.settings.exclusive_benefits_list }}
_445
{%- endif -%}
_445
</div>
_445
</main>
_445
</article>
_445
{%- endif -%}
_445
{%- endfor -%}
_445
</div>
_445
_445
<div class="membership-footer">
_445
{{ section.settings.footer_text }}
_445
</div>
_445
_445
{%- if section.settings.button_text != blank and section.settings.button_link != blank -%}
_445
<div class="membership-cta">
_445
<a href="{{ section.settings.button_link }}" class="button button--primary">
_445
{{- section.settings.button_text -}}
_445
</a>
_445
</div>
_445
{%- endif -%}
_445
</div>
_445
</div>