TYB Community Landing Page Template – Tyb

Use this template to build your own "Join Our TYB Community" landing page on your Shopify store, fully customizable through your theme customizer with no code required after setup.

Here's what the base template looks like out of the box, before any brand customization:

This is the starting point. Once installed, you'll customize all text, images, colors, and your join link to match your brand.

This template is part of our guidance on Getting Customers Into Your TYB Community. A landing page like this is one of the highest-leverage tools for turning site visitors into members. [See the full strategy HERE]

What You Get

A modular set of Shopify sections you can drag, drop, reorder, add, or remove directly in your theme customizer:

Hero — heading, subheading, image, Join CTA

Value Props — "What You'll Get" perks grid

Earn Rewards — challenge showcase cards

Obsessions+: explains how members earn commission by sharing their personal link.

How It Works — numbered steps + CTA

FAQ — accordion

Follow Along (optional) — static image grid for brands without a live Instagram feed app

💡 Built by referencing how brands like Banu, The Skinny Confidential, Saie, SET Active, and Ouai each structure their own TYB community pages.

How to Install on Your Store

Follow these steps in your own Shopify Admin to add this page to your store.

This template requires an Online Store 2.0 theme. If your theme doesn’t support JSON page templates, reach out to your TYB onboarding manager.

Go to Online Store → Themes, find your active theme, click the "..." menu, and select Edit code.

Add the CSS: In the left-hand file explorer, click into the assets folder, click "..." → New File, name it exactly tyb-community.css, then paste in the CSS code below and save.

Add each section: Click into the sections folder, click "..." → New File, name it exactly as shown below (e.g. tyb-hero.liquid, include the .liquid at the end), paste in that section's code, and save. Repeat for all 7 section files. Shopify automatically treats any .liquid file placed in the sections folder as a usable section, there's no separate button to click.

Add the page template: Click into the templates folder, click "..." → New File, name it exactly page.tyb-community.json (include .json at the end), paste in the JSON code below, and save.

Create your page: Go to Online Store → Pages → Add page, title it (e.g. "Join Our Community"), and under Template on the right, select tyb-community from the dropdown.

Customize it: Go to Online Store → Themes, find your active theme, and click Edit theme. At the top of the customizer, click the page dropdown (it defaults to "Home page"), select Pages, then choose the page you just created. From here, you can edit all text, images, and your TYB join link directly in each section; no code needed.

Add it to your navigation: Go to Content → Menus (in your main left sidebar), select the menu you want to update (usually Main menu for your top nav, or your footer menu), click Add menu item, give it a name (e.g. "Join Our Community"), set the Link type to Page, and select your new page.

What You Can Customize (No Code Needed)

All heading and body text

Hero, challenge, and step images

Number of value props, challenges, steps, and FAQ items (add/remove freely)

Section background and text colors

Your TYB join link (https://invite.tyb.xyz/brand/[yourbrand])

The order of entire sections (drag and drop)

Code Files

CSS Asset — tyb-community.css

.tyb-community-section,
.tyb-community-section * {
  box-sizing: border-box;
}

.tyb-community-section img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tyb-community-section h1,
.tyb-community-section h2,
.tyb-community-section h3,
.tyb-community-section p {
  margin-top: 0;
}

.tyb-community-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px;
  font-family: inherit;
}

/* Hero */
.tyb-hero {
  position: relative;
  text-align: center;
}

.tyb-hero__image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 24px;
}

.tyb-hero__heading {
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.tyb-hero__subheading {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 24px;
  opacity: 0.85;
}

/* Button */
.tyb-button {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 999px;
  background-color: var(--tyb-button-bg, #000000);
  color: var(--tyb-button-text, #FFFFFF);
  border: 2px solid var(--tyb-button-bg, #000000);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.tyb-button:hover {
  opacity: 0.8;
}

/* Section headings */
.tyb-section-heading {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}

/* Value props */
.tyb-value-props__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  text-align: center;
}

.tyb-value-prop__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.tyb-value-prop__title {
  font-size: 18px;
  margin-bottom: 8px;
}

.tyb-value-prop__text {
  font-size: 15px;
  opacity: 0.8;
  line-height: 1.5;
}

/* Earn Rewards (Challenges) */
.tyb-challenges__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.tyb-challenge {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.tyb-challenge:hover {
  transform: translateY(-4px);
}

.tyb-challenge__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.tyb-challenge__title {
  font-size: 16px;
  margin-bottom: 4px;
}

.tyb-challenge__reward {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.75;
}

/* How it works */
.tyb-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto 40px;
}

.tyb-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tyb-step__number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.tyb-step__text {
  font-size: 16px;
  line-height: 1.5;
  padding-top: 4px;
}

/* FAQ */
.tyb-faq {
  max-width: 700px;
  margin: 0 auto;
}

.tyb-faq__item {
  border-bottom: 1px solid currentColor;
  padding: 16px 0;
}

.tyb-faq__question {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
}

.tyb-faq__question::-webkit-details-marker {
  display: none;
}

.tyb-faq__answer {
  padding-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Follow Along */
.tyb-follow__handle {
  display: block;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
  margin-top: 6px;
}

.tyb-follow__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.tyb-follow__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Final CTA (used inside How It Works section) */
.tyb-final-cta {
  text-align: center;
  margin-top: 20px;
}

/* Obsessions+ */
.tyb-obsessions {
  text-align: center;
}

.tyb-obsessions__image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 24px;
}

.tyb-obsessions__heading {
  margin-bottom: 12px;
}

.tyb-obsessions__intro {
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 12px;
  opacity: 0.85;
}

.tyb-obsessions__rate {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 32px;
}

.tyb-obsessions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}

.tyb-obsessions__step .tyb-step__number {
  margin: 0 auto 12px;
}

.tyb-obsessions__step-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.tyb-obsessions__step-text {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.8;
}

.tyb-obsessions__fine-print {
  font-size: 13px;
  opacity: 0.6;
  margin-top: 16px;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .tyb-community-section {
    padding: 30px 16px;
  }

  .tyb-value-props__grid {
    grid-template-columns: 1fr;
  }
}

Hero Section — tyb-hero.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section tyb-hero-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }}; --tyb-button-bg: {{ section.settings.button_bg_color }}; --tyb-button-text: {{ section.settings.button_text_color }};">
  <div class="tyb-hero">
    {% if section.settings.hero_image %}
      <img src="{{ section.settings.hero_image | image_url: width: 1600 }}" alt="{{ section.settings.hero_heading | escape }}" class="tyb-hero__image" loading="lazy">
    {% endif %}
    <div class="tyb-hero__content">
      <h1 class="tyb-hero__heading">{{ section.settings.hero_heading }}</h1>
      {% if section.settings.hero_subheading != blank %}
        <p class="tyb-hero__subheading">{{ section.settings.hero_subheading }}</p>
      {% endif %}
      {% if section.settings.tyb_join_url != blank %}
        <a href="{{ section.settings.tyb_join_url }}" class="tyb-button" target="_blank" rel="noopener">
          {{ section.settings.cta_button_text | default: 'Join Now' }}
        </a>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "TYB Hero",
  "settings": [
    { "type": "image_picker", "id": "hero_image", "label": "Hero image" },
    { "type": "text", "id": "hero_heading", "label": "Hero heading", "default": "Join Our Community & Earn Rewards" },
    { "type": "textarea", "id": "hero_subheading", "label": "Hero subheading", "default": "Complete challenges, earn coins, and unlock exclusive perks." },
    { "type": "url", "id": "tyb_join_url", "label": "TYB join link", "info": "e.g. https://invite.tyb.xyz/brand/yourbrand" },
    { "type": "text", "id": "cta_button_text", "label": "CTA button text", "default": "Join Now" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" },
    { "type": "color", "id": "button_bg_color", "label": "Button color", "default": "#000000" },
    { "type": "color", "id": "button_text_color", "label": "Button text color", "default": "#FFFFFF" }
  ],
  "presets": [{ "name": "TYB Hero" }]
}
{% endschema %}

Value Props Section — tyb-value-props.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
  <div class="tyb-value-props">
    <h2 class="tyb-section-heading">{{ section.settings.heading | default: "What You'll Get" }}</h2>
    <div class="tyb-value-props__grid">
      {% for block in section.blocks %}
        <div class="tyb-value-prop" {{ block.shopify_attributes }}>
          {% if block.settings.icon %}
            <img src="{{ block.settings.icon | image_url: width: 80 }}" alt="" class="tyb-value-prop__icon" loading="lazy">
          {% endif %}
          <h3 class="tyb-value-prop__title">{{ block.settings.title }}</h3>
          <p class="tyb-value-prop__text">{{ block.settings.text }}</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "TYB Value Props",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "What You'll Get" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" }
  ],
  "blocks": [
    {
      "type": "value_prop",
      "name": "Value Prop",
      "settings": [
        { "type": "image_picker", "id": "icon", "label": "Icon (optional)" },
        { "type": "text", "id": "title", "label": "Title", "default": "Exclusive Content" },
        { "type": "textarea", "id": "text", "label": "Description", "default": "First access to new launches and sales." }
      ]
    }
  ],
  "presets": [
    {
      "name": "TYB Value Props",
      "blocks": [{ "type": "value_prop" }, { "type": "value_prop" }, { "type": "value_prop" }]
    }
  ]
}
{% endschema %}

Earn Rewards Section — tyb-challenges.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
  <div class="tyb-challenges">
    <h2 class="tyb-section-heading">{{ section.settings.heading | default: 'Earn Rewards' }}</h2>
    <div class="tyb-challenges__grid">
      {% for block in section.blocks %}
        <a href="{{ section.settings.tyb_join_url }}" class="tyb-challenge" target="_blank" rel="noopener" {{ block.shopify_attributes }}>
          {% if block.settings.image %}
            <img src="{{ block.settings.image | image_url: width: 500 }}" alt="{{ block.settings.title | escape }}" class="tyb-challenge__image" loading="lazy">
          {% endif %}
          <h3 class="tyb-challenge__title">{{ block.settings.title }}</h3>
          <p class="tyb-challenge__reward">{{ block.settings.reward_text }}</p>
        </a>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "TYB Earn Rewards",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Earn Rewards" },
    { "type": "url", "id": "tyb_join_url", "label": "TYB join link", "info": "e.g. https://invite.tyb.xyz/brand/yourbrand" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" }
  ],
  "blocks": [
    {
      "type": "challenge",
      "name": "Challenge Card",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Challenge image" },
        { "type": "text", "id": "title", "label": "Challenge title", "default": "Welcome Challenge" },
        { "type": "text", "id": "reward_text", "label": "Reward text", "default": "100 Coins" }
      ]
    }
  ],
  "presets": [
    {
      "name": "TYB Earn Rewards",
      "blocks": [{ "type": "challenge" }, { "type": "challenge" }, { "type": "challenge" }, { "type": "challenge" }]
    }
  ]
}
{% endschema %}

Obsessions+ Section — tyb-obsessions.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }}; --tyb-button-bg: {{ section.settings.button_bg_color }}; --tyb-button-text: {{ section.settings.button_text_color }};">
  <div class="tyb-obsessions">
    {% if section.settings.image %}
      <img src="{{ section.settings.image | image_url: width: 1200 }}" alt="{{ section.settings.heading | escape }}" class="tyb-obsessions__image" loading="lazy">
    {% endif %}
    <h2 class="tyb-section-heading tyb-obsessions__heading">{{ section.settings.heading | default: 'Share What You Love & Earn' }}</h2>
    {% if section.settings.intro != blank %}
      <p class="tyb-obsessions__intro">{{ section.settings.intro }}</p>
    {% endif %}
    {% if section.settings.highlight_text != blank %}
      <p class="tyb-obsessions__rate">{{ section.settings.highlight_text }}</p>
    {% endif %}
    <div class="tyb-obsessions__grid">
      {% for block in section.blocks %}
        <div class="tyb-obsessions__step" {{ block.shopify_attributes }}>
          <div class="tyb-step__number">{{ forloop.index }}</div>
          <h3 class="tyb-obsessions__step-title">{{ block.settings.title }}</h3>
          <p class="tyb-obsessions__step-text">{{ block.settings.text }}</p>
        </div>
      {% endfor %}
    </div>
    {% if section.settings.tyb_join_url != blank %}
      <div class="tyb-final-cta">
        <a href="{{ section.settings.tyb_join_url }}" class="tyb-button" target="_blank" rel="noopener">
          {{ section.settings.cta_button_text | default: 'Start Sharing' }}
        </a>
      </div>
    {% endif %}
    {% if section.settings.fine_print != blank %}
      <p class="tyb-obsessions__fine-print">{{ section.settings.fine_print }}</p>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "TYB Obsessions+",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image (optional)" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Share What You Love & Earn" },
    { "type": "textarea", "id": "intro", "label": "Intro text", "default": "Already love our products? Share them with friends, family, and your followers, and earn when they buy. No follower count needed, just post what you love and share your link." },
    { "type": "text", "id": "highlight_text", "label": "Highlight text", "default": "Earn commission when anyone shops through your link", "info": "Leave blank to hide this line." },
    { "type": "url", "id": "tyb_join_url", "label": "TYB join link", "info": "e.g. https://invite.tyb.xyz/brand/yourbrand" },
    { "type": "text", "id": "cta_button_text", "label": "CTA button text", "default": "Start Sharing" },
    { "type": "text", "id": "fine_print", "label": "Fine print (optional)", "info": "e.g. eligibility or terms" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" },
    { "type": "color", "id": "button_bg_color", "label": "Button color", "default": "#000000" },
    { "type": "color", "id": "button_text_color", "label": "Button text color", "default": "#FFFFFF" }
  ],
  "blocks": [
    {
      "type": "obsessions_step",
      "name": "Step",
      "settings": [
        { "type": "text", "id": "title", "label": "Step title", "default": "Post your Obsessions" },
        { "type": "textarea", "id": "text", "label": "Step text", "default": "Share the products you love in the TYB app." }
      ]
    }
  ],
  "presets": [
    {
      "name": "TYB Obsessions+",
      "blocks": [
        { "type": "obsessions_step", "settings": { "title": "Post your Obsessions", "text": "Share the products you love in the TYB app." } },
        { "type": "obsessions_step", "settings": { "title": "Share your link", "text": "Share your personal link anywhere you talk: the TYB app, group chats, DMs, and social." } },
        { "type": "obsessions_step", "settings": { "title": "Earn commission", "text": "When someone buys through your link, you earn a share of the sale." } }
      ]
    }
  ]
}
{% endschema %}

How It Works Section — tyb-how-it-works.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }}; --tyb-button-bg: {{ section.settings.button_bg_color }}; --tyb-button-text: {{ section.settings.button_text_color }};">
  <div class="tyb-how-it-works">
    <h2 class="tyb-section-heading">{{ section.settings.heading | default: 'How It Works' }}</h2>
    <div class="tyb-steps">
      {% for block in section.blocks %}
        <div class="tyb-step" {{ block.shopify_attributes }}>
          <div class="tyb-step__number">{{ forloop.index }}</div>
          <p class="tyb-step__text">{{ block.settings.text }}</p>
        </div>
      {% endfor %}
    </div>
    {% if section.settings.tyb_join_url != blank %}
      <div class="tyb-final-cta">
        <a href="{{ section.settings.tyb_join_url }}" class="tyb-button" target="_blank" rel="noopener">
          {{ section.settings.cta_button_text | default: 'Join Now' }}
        </a>
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "TYB How It Works",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "How It Works" },
    { "type": "url", "id": "tyb_join_url", "label": "TYB join link (optional CTA below steps)" },
    { "type": "text", "id": "cta_button_text", "label": "CTA button text", "default": "Join Now" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" },
    { "type": "color", "id": "button_bg_color", "label": "Button color", "default": "#000000" },
    { "type": "color", "id": "button_text_color", "label": "Button text color", "default": "#FFFFFF" }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        { "type": "textarea", "id": "text", "label": "Step text", "default": "Create an account on the TYB app and follow the steps to join." }
      ]
    }
  ],
  "presets": [
    {
      "name": "TYB How It Works",
      "blocks": [{ "type": "step" }, { "type": "step" }, { "type": "step" }]
    }
  ]
}
{% endschema %}

FAQ Section — tyb-faq.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
  <div class="tyb-faq">
    <h2 class="tyb-section-heading">{{ section.settings.heading | default: 'FAQs' }}</h2>
    <div class="tyb-faq__list">
      {% for block in section.blocks %}
        <details class="tyb-faq__item" {{ block.shopify_attributes }}>
          <summary class="tyb-faq__question">{{ block.settings.question }}</summary>
          <div class="tyb-faq__answer">{{ block.settings.answer }}</div>
        </details>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "TYB FAQ",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "FAQs" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ Item",
      "settings": [
        { "type": "text", "id": "question", "label": "Question", "default": "What is TYB?" },
        { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>TYB is our community platform, a space where you can connect with us, complete fun challenges, and earn rewards.</p>" }
      ]
    }
  ],
  "presets": [
    {
      "name": "TYB FAQ",
      "blocks": [
        { "type": "faq_item" },
        { "type": "faq_item" },
        { "type": "faq_item" },
        { "type": "faq_item" }
      ]
    }
  ]
}
{% endschema %}

Follow Along Section (optional) — tyb-follow-along.liquid

{{ 'tyb-community.css' | asset_url | stylesheet_tag }}

<div class="tyb-community-section" style="background-color: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
  <div class="tyb-follow">
    <h2 class="tyb-section-heading">
      {{ section.settings.heading | default: 'Follow Along' }}
      {% if section.settings.instagram_handle != blank %}
        <a href="https://www.instagram.com/{{ section.settings.instagram_handle }}" target="_blank" rel="noopener" class="tyb-follow__handle">
          @{{ section.settings.instagram_handle }}
        </a>
      {% endif %}
    </h2>
    <div class="tyb-follow__grid">
      {% for block in section.blocks %}
        <a href="{% if section.settings.instagram_handle != blank %}https://www.instagram.com/{{ section.settings.instagram_handle }}{% else %}#{% endif %}" target="_blank" rel="noopener" {{ block.shopify_attributes }}>
          {% if block.settings.image %}
            <img src="{{ block.settings.image | image_url: width: 500 }}" alt="" class="tyb-follow__image" loading="lazy">
          {% endif %}
        </a>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "TYB Follow Along",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Follow Along" },
    { "type": "text", "id": "instagram_handle", "label": "Instagram handle (without @)" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#FFFFFF" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#000000" }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [{ "type": "image_picker", "id": "image", "label": "Image" }]
    }
  ],
  "presets": [
    {
      "name": "TYB Follow Along",
      "blocks": [{ "type": "image" }, { "type": "image" }, { "type": "image" }, { "type": "image" }]
    }
  ]
}
{% endschema %}

Page Template — page.tyb-community.json

{
  "sections": {
    "tyb_hero": {
      "type": "tyb-hero",
      "settings": {
        "hero_heading": "Join Our Community & Earn Rewards",
        "hero_subheading": "Complete challenges, earn coins, and unlock exclusive perks.",
        "cta_button_text": "Join Now"
      }
    },
    "tyb_value_props": {
      "type": "tyb-value-props",
      "blocks": {
        "value_prop_1": {
          "type": "value_prop",
          "settings": { "title": "Early Access", "text": "First access to new launches and exclusive discounts." }
        },
        "value_prop_2": {
          "type": "value_prop",
          "settings": { "title": "Community", "text": "Connect with other members through chat and challenges." }
        },
        "value_prop_3": {
          "type": "value_prop",
          "settings": { "title": "Rewards", "text": "Earn coins by completing challenges and shopping with us." }
        }
      },
      "block_order": ["value_prop_1", "value_prop_2", "value_prop_3"]
    },
    "tyb_challenges": {
      "type": "tyb-challenges",
      "blocks": {
        "challenge_1": { "type": "challenge", "settings": { "title": "Welcome Challenge", "reward_text": "100 Coins" } },
        "challenge_2": { "type": "challenge", "settings": { "title": "Website Review", "reward_text": "100 Coins" } },
        "challenge_3": { "type": "challenge", "settings": { "title": "Follow On Social", "reward_text": "100 Coins" } },
        "challenge_4": { "type": "challenge", "settings": { "title": "Social Challenge", "reward_text": "100 Coins" } }
      },
      "block_order": ["challenge_1", "challenge_2", "challenge_3", "challenge_4"]
    },
    "tyb_obsessions": {
      "type": "tyb-obsessions",
      "settings": {
        "heading": "Share What You Love & Earn",
        "intro": "Already love our products? Share them with friends, family, and your followers, and earn when they buy. No follower count needed, just post what you love and share your link.",
        "highlight_text": "Earn commission when anyone shops through your link",
        "cta_button_text": "Start Sharing"
      },
      "blocks": {
        "obsessions_step_1": { "type": "obsessions_step", "settings": { "title": "Post your Obsessions", "text": "Share the products you love in the TYB app." } },
        "obsessions_step_2": { "type": "obsessions_step", "settings": { "title": "Share your link", "text": "Share your personal link anywhere you talk: the TYB app, group chats, DMs, and social." } },
        "obsessions_step_3": { "type": "obsessions_step", "settings": { "title": "Earn commission", "text": "When someone buys through your link, you earn a share of the sale." } }
      },
      "block_order": ["obsessions_step_1", "obsessions_step_2", "obsessions_step_3"]
    },
    "tyb_how_it_works": {
      "type": "tyb-how-it-works",
      "blocks": {
        "step_1": { "type": "step", "settings": { "text": "Download the TYB app or click Join Now." } },
        "step_2": { "type": "step", "settings": { "text": "Earn coins by completing fun challenges, posting content, and answering surveys." } },
        "step_3": { "type": "step", "settings": { "text": "Redeem your coins for discounts on our site." } }
      },
      "block_order": ["step_1", "step_2", "step_3"]
    },
    "tyb_faq": {
      "type": "tyb-faq",
      "blocks": {
        "faq_1": { "type": "faq_item", "settings": { "question": "What is TYB?", "answer": "<p>TYB is our community platform, a space where you can connect with us, complete fun challenges, and earn rewards.</p>" } },
        "faq_2": { "type": "faq_item", "settings": { "question": "Are there any associated costs?", "answer": "<p>Nope! Joining is completely free.</p>" } },
        "faq_3": { "type": "faq_item", "settings": { "question": "What kind of rewards can I earn?", "answer": "<p>TYB coins, redeemable for discounts, early access to launches, and more.</p>" } }
      },
      "block_order": ["faq_1", "faq_2", "faq_3"]
    }
  },
  "order": ["tyb_hero", "tyb_value_props", "tyb_challenges", "tyb_obsessions", "tyb_how_it_works", "tyb_faq"]
}

A Few Tips

The Follow Along section is a static image grid. If you already use a live Instagram feed app (e.g. Foursixty, Flowbox), use that app's native section instead for a live feed.

For Earn Rewards, we recommend featuring evergreen or longer-duration challenges so this section stays accurate without needing frequent updates. You can link each card to a specific challenge, or simply to your brand community link for ease.

Using Earn Rewards and Obsessions+ together: Place the two sections back to back and give them clear headings, like "Earn Coins" and "Earn Commission," so members can see both ways to earn at a glance.