Shopify Theme Customizer: How to Make Custom Section Content Editable?

I have a custom section on my Shopify website where I display a title, text, and images. The HTML structure includes specific styles and a JavaScript function that renders text in a circular pattern. Here’s my Liquid code of my custom component:

<style>
  body {
    margin: 0;
  }
  
  .custom-section {
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
    width: 1440px;
    height: 650px;
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    border: 2px dashed red;
    overflow: hidden;
    left: 75px;
    top:110px;
  }
  
  .custom-section .text-section {
    width: 520px;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px dashed blue;
  }
  
  .custom-section .title-container h2 {
    font-family: 'ITC Garamond Std';
    font-size: 64px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: -2px;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  
  .custom-section .text-container {
    font-family: 'iCiel Internacional', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    width: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .custom-section .spacer {
    flex: 1;
    border: 2px dashed green;
  }
  
  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 550px;
    display: flex;
    gap: 30px;
    border: 2px dashed purple;
  }
  
  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }
  
  .circular span {
    font: 13px Monaco, MonoSpace;
    height: 80px;
    position: absolute;
    left: 75px;
    transform-origin: bottom center;
  }
  
  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
  }
  
</style>

<script src="{{ 'custom-section.js' | asset_url }}" defer="defer"></script>


<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      
      <div class="title-container">
        <h2>Our jewelry</h2>
      </div>
      
      <div class="text-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit.</p>
      </div>
      
      <div class="spacer"></div>
      
      <h1 class="circular">
        
      </h1>
    </div>
    
    <div class="images-wrapper">
      <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
      <img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
      <img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
    </div>
  </div>

 
</section>

<!--
{% schema %}
{
  "name": "Custom section",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Text"
    }
  ],
  "presets": [
    {
      "name": "Default custom section"
    }
  ],
  "tag": "section",
  "class": "custom-section",
  "limit": 1
}
{% endschema %}
-->

And this is my “custom-section.js”:

document.addEventListener('DOMContentLoaded', () => {

  const text = document.querySelector('.circular');

  const message = "We’re the bestie that you can be yourself with. ";

  text.innerHTML = '';

  for (let i = 0; i < message.length; i++) {
    let circularTextSpan = document.createElement('span');
    circularTextSpan.textContent = message[i];
    text.appendChild(circularTextSpan);
    circularTextSpan.style.transform = `rotate(${360 * i / message.length}deg)`;
  }
});

The JavaScript (custom-section.js) creates circular text inside <h1 class="circular">.

However, this section isn’t customizable from Shopify’s Theme Customizer. I want users to be able to edit the title, text content, and possibly change images through the customizer without needing to modify the theme files directly.

What I’ve Tried:

Schema Definition: I’ve defined a schema for the custom section in the Shopify theme settings, but I’m not sure how to integrate it properly.

{% schema %}
{
  "name": "Custom section",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Text"
    }
    // Other settings for images, etc.
  ],
  "presets": [
    {
      "name": "Default custom section"
    }
  ],
  "tag": "section",
  "class": "custom-section",
  "limit": 1
}
{% endschema %}

Question:

• How can I modify the HTML structure and JavaScript (custom-section.js) to ensure that the content inside .custom-section is fully customizable using Shopify’s Theme Customizer?

• Specifically, how do I ensure that changes made through the Theme Customizer (like modifying the title, text content, or images) reflect correctly in the frontend without breaking the circular text functionality implemented in JavaScript?

Any guidance or examples on integrating the custom section with Shopify’s Theme Customizer would be greatly appreciated. Thank you!