> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Members Area Customization

> A comprehensive guide to building custom member experiences with Kiwify Themes

## Overview

The Members Area theme system enables you to:

* Customize your members area with code (using Liquid templates)
* Create tailored learning experiences with custom layouts
* Maintain full control over your students' experience
* Embed external tools and resources seamlessly
* Implement advanced features using global data objects

## How It Works

The Members Area customization works through two complementary interfaces:

<Tabs>
  <Tab title="Theme Editor">
    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/theme-editor.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=57d1ce32765a9e3912a963658dd409b4" alt="Theme Editor" width="3024" height="1716" data-path="images/members-area/theme-editor.webp" />
    </Frame>

    The Theme Editor provides a visual interface to customize your theme without writing code. Changes made in the Theme Editor are reflected in the code, and vice versa.
  </Tab>

  <Tab title="Code Editor">
    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/code-editor.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=38bcb38d6215a6d207fac6f08af71050" alt="Code Editor" width="3024" height="1716" data-path="images/members-area/code-editor.webp" />
    </Frame>

    The Code Editor is a full code environment where you can directly modify theme files.

    Access the code editor by clicking the "Code Editor" button on Theme Editor's top bar.

    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/main-code-button.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=28e87f54fa8320ca6abb76c35ae89e18" alt="Code Editor" width="1910" height="1092" data-path="images/members-area/main-code-button.webp" />
    </Frame>

    You can also access the Code Editor by clicking the "Code Editor" button in the sidebar when editing a section. This will make the Code Editor open ready for you to edit the corresponding section's template.

    <Frame>
      <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/section-code-button.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=fc8b956ecacda70bac45e930ed36cc00" alt="Code Editor" width="1910" height="1092" data-path="images/members-area/section-code-button.webp" />
    </Frame>
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={3}>
  <Card title="Explore Architecture" icon="puzzle-piece" href="/en/members-area/key-concepts/theme-architecture">
    Understand how the theme components work together
  </Card>

  <Card title="Learn About Objects" icon="database" href="/en/members-area/reference/objects">
    Learn how to use the global data objects
  </Card>

  <Card title="Browse Components" icon="code" href="/en/members-area/key-concepts/theme/templates">
    Dive into the details of each theme component
  </Card>
</CardGroup>