I have a custom section that uses the following schema:

{% schema %}
  {
    "name": "Custom",
    "settings": [
    {
        "type": "textarea",
        "id": "custom_text_product",
        "label": "Insert name of the product here",
        "default": "Product"
      },
    {
        "type": "textarea",
        "id": "custom_text_msg",
        "label": "Custom text",
        "default": "Insert text here"
      }
    ]
  }
{% endschema %}

Basically what I want is to get the text from each textarea, manipulate via Javascript and then add it to the DOM.

Via .liquid I would simply do {{ section.settings.id }}, but I don't know how to access them in Javascript. Because it's a big text I can't add it to the DOM as a data-attribute either.

I have tried following this but no success.

Can someone help me or refer me to documents regarding this?

Thank you very much!

I have a custom section that uses the following schema:

{% schema %}
  {
    "name": "Custom",
    "settings": [
    {
        "type": "textarea",
        "id": "custom_text_product",
        "label": "Insert name of the product here",
        "default": "Product"
      },
    {
        "type": "textarea",
        "id": "custom_text_msg",
        "label": "Custom text",
        "default": "Insert text here"
      }
    ]
  }
{% endschema %}

Basically what I want is to get the text from each textarea, manipulate via Javascript and then add it to the DOM.

Via .liquid I would simply do {{ section.settings.id }}, but I don't know how to access them in Javascript. Because it's a big text I can't add it to the DOM as a data-attribute either.

I have tried following this but no success.

Can someone help me or refer me to documents regarding this?

Thank you very much!

• javascript
• shopify
• liquid

Share Improve this question Follow edited May 5, 2018 at 20:22 Diego Fortes asked May 5, 2018 at 20:15 Diego FortesDiego Fortes 9,80044 gold badges3535 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Ok, so after much research and ments saying this was not possible, I found a way.

If you're on a .liquid file, you want to assign your {% schema %} variable to a local .liquid variable like this:

{%- assign product_text = section.settings.custom_text_product -%}

After that, you can access it in Javascript by doing so:

<script>
  var productText = `{{ product_text }}`;
</script>

I hope it helps everyone.

So while this was exactly what I needed when I gave up on a timer I was setting up for checkout, I had to slightly change the code to get it working, but this is perfect:

{%- assign timer_amt = settings.timer -%}
var time_amt = `{{ settings.timer }}`;

I am not pulling from the section this is straight from the main Schema, so slightly different but a huge help.