DOCS
MembershipsBasics

Membership Page

Learn how to create a dedicated membership page.

To add the following membership section to your store, you can use the following code. Create a new sections/membership-tiers.liquid file in your theme and add the following code to it.

Show Code
{% schema %}
{
  "name": "Membership Tiers",
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Vorteile im Club"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Treue wird belohnt! Je mehr du bestellst, umso weiter steigst du auf."
    },
    {
      "type": "richtext",
      "id": "footer_text",
      "label": "Footer Text",
      "default": "<p>Bitte beachte, dass nicht genutztes Cashback nach 24 Monaten verfällt.</p>"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "header",
      "content": "Style Settings"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f9fafb"
    },
    {
      "type": "color",
      "id": "cashback_background",
      "label": "Cashback Banner Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "cashback_text",
      "label": "Cashback Banner Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_background",
      "label": "Card Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tier_info_background",
      "label": "Tier Info Background",
      "default": "#F9FAFC"
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card Border Color",
      "default": "#e5e7eb"
    },
    {
      "type": "select",
      "id": "card_shadow",
      "label": "Card Shadow",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "range",
      "id": "section_padding",
      "min": 20,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Section Padding",
      "default": 64
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Card Border Radius",
      "default": 8
    },
    {
      "type": "select",
      "id": "container_width",
      "label": "Container Width",
      "options": [
        {
          "value": "max-w-5xl",
          "label": "Narrow (1024px)"
        },
        {
          "value": "max-w-6xl",
          "label": "Normal (1200px)"
        },
        {
          "value": "max-w-7xl",
          "label": "Wide (1400px)"
        }
      ],
      "default": "max-w-6xl"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    }
  ],
  "blocks": [
    {
      "type": "membership_tier",
      "name": "Membership Tier",
      "settings": [
        {
          "type": "text",
          "id": "cashback_text",
          "label": "Cashback Text",
          "default": "5% Cashback pro Bestellung"
        },
        {
          "type": "text",
          "id": "tier_name",
          "label": "Tier Name",
          "default": "Bronze"
        },
        {
          "type": "text",
          "id": "tier_description",
          "label": "Tier Description",
          "default": "Hier geht es los."
        },
        {
          "type": "text",
          "id": "price_threshold",
          "label": "Price Threshold",
          "default": "ab 0€"
        },
        {
          "type": "text",
          "id": "price_description",
          "label": "Price Description",
          "default": "jährlichem Umsatz profitierst du bereits von diesen Vorteilen."
        },
        {
          "type": "text",
          "id": "benefits_heading",
          "label": "Benefits Heading"
        },
        {
          "type": "richtext",
          "id": "benefits_list",
          "label": "Benefits List",
          "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>"
        },
        {
          "type": "richtext",
          "id": "exclusive_benefits_list",
          "label": "Exclusive Benefits List"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Membership Tiers",
      "blocks": [
        {
          "type": "membership_tier"
        }
      ]
    }
  ]
}
{% endschema %}

{% style %}
  .membership-section {
    background-color: {{ section.settings.background_color }};
    padding: {{ section.settings.section_padding }}px 0;
  }

  .membership-container {
    max-width: {% case section.settings.container_width %}
      {% when 'max-w-5xl' %}
        1024px
      {% when 'max-w-6xl' %}
        1200px
      {% when 'max-w-7xl' %}
        1400px
    {% endcase %};
    margin: 0 auto;
    padding: 0 1rem;
  }

  .membership-header {
    max-width: 768px;
    margin: 0 auto;
    text-align: {{ section.settings.text_alignment }};
  }

  .membership-heading {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .membership-subheading {
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }

  .membership-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  @media (min-width: 768px) {
    .membership-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .membership-card {
    background: {{ section.settings.card_background }};
    border-radius: {{ section.settings.border_radius }}px;
    overflow: hidden;
    border: 1px solid {{ section.settings.card_border_color }};
    {% case section.settings.card_shadow %}
      {% when 'none' %}
      {% when 'small' %}
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      {% when 'medium' %}
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      {% when 'large' %}
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    {% endcase %}
  }

  .membership-card-header {
    border-bottom: 1px solid {{ section.settings.card_border_color }};
  }

  .membership-cashback {
    background-color: {{ section.settings.cashback_background }};
    color: {{ section.settings.cashback_text }};
    padding: 0.5rem;
    text-align: center;
    font-weight: 500;
  }

  .membership-tier-info {
    padding: 1.5rem 2rem;
    background-color: {{ section.settings.tier_info_background }};
  }

  .membership-tier-name {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .membership-tier-description {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.5rem;
  }

  .membership-card-main {
    padding: 2rem;
  }

  .membership-price {
    font-size: 2.5rem;
    font-weight: 600;
  }

  .membership-price-description {
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 0;
  }

  .membership-benefits {
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid {{ section.settings.card_border_color }};
    color: #282828;
  }

  .membership-benefits ul {
    margin-top: 0.25rem;
    list-style: none;
    padding: 0;
  }

  .membership-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .membership-benefits li:before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    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");
    background-size: contain;
    flex-shrink: 0;
  }

  .benefits-heading {
    font-weight: bold;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .membership-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
  }

  .membership-footer p {
    margin-bottom: 0;
  }

  .membership-cta {
    margin-top: 2rem;
    text-align: center;
  }

   @media (max-width: 699px) {
      .membership-heading {
        font-size: 2rem;
        line-height: 1.2;
      }
     .membership-subheading {
      font-size: 1.1rem;
      line-height: 1.5rem;   
      }
     .membership-section {
      padding: 48px 0;
      }
}
{% endstyle %}

<div class="membership-section">
  <div class="membership-container">
    <div class="membership-header">
      <h2 class="membership-heading">{{ section.settings.heading }}</h2>
      <p class="membership-subheading">{{ section.settings.subheading }}</p>
    </div>

    <div class="membership-grid">
      {%- for block in section.blocks -%}
        {%- if block.type == 'membership_tier' -%}
          <article class="membership-card">
            <header class="membership-card-header">
              <div class="membership-cashback">
                <strong>{{ block.settings.cashback_text }}</strong>
              </div>
              <div class="membership-tier-info">
                <h4 class="membership-tier-name">{{ block.settings.tier_name }}</h4>
                {%- if block.settings.tier_description != blank -%}
                  <p class="membership-tier-description">{{ block.settings.tier_description }}</p>
                {%- endif -%}
              </div>
            </header>

            <main class="membership-card-main">
              <div>
                <span class="membership-price">{{ block.settings.price_threshold }}</span>
                {%- if block.settings.price_description != blank -%}
                  <p class="membership-price-description">{{ block.settings.price_description }}</p>
                {%- endif -%}
              </div>

              <div class="membership-benefits">
                {{ block.settings.benefits_list }}

                {%- if block.settings.benefits_heading != blank -%}
                  <p class="benefits-heading">{{ block.settings.benefits_heading }}</p>
                  {{ block.settings.exclusive_benefits_list }}
                {%- endif -%}
              </div>
            </main>
          </article>
        {%- endif -%}
      {%- endfor -%}
    </div>

    <div class="membership-footer">
      {{ section.settings.footer_text }}
    </div>

    {%- if section.settings.button_text != blank and section.settings.button_link != blank -%}
      <div class="membership-cta">
        <a href="{{ section.settings.button_link }}" class="button button--primary">
          {{- section.settings.button_text -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>
memberr shopify store credit membership section

After adding the code to your theme, you can add the section using the Theme Editor.

memberr shopify store credit membership section theme editor

Mailflows

Learn how to create dedicated membership mailflows.

Anniversary Present

Offer a gift on the membership anniversary of the customer.