Shopify Question posted in
The Shopify help center can be found here.

liquid schema works, but removes the section when modified from the editor – Shopify

I am new to the entire Shopify and liquid environment. However I was able to modify a section that used the {%schema%} tag to display a control to set a background and the maximum width of a text box.

So I ventured to create a section for myself to add a small FAQ block on one of the pages.

I have read everything I can to make sure that I am not forgetting anything, I have also checked the code on existing sections that work correctly, and I cant find the reason for this issue.

when I open the page with the section in it in the Theme editor, I loads correctly and displays the default color. I also see the modifier block on the left pane, however as soon as I change the value in the editor, it simply makes the entire section disappear.

can somebody help me to point out what am I doing wrong?

thank you very much

this is the entire code in the section:

    <style>
  
  .faq{
    max-width:900px;
    width:80%;
  }
  .faq-container{
    background-color:{{section.settings.container_background_color}};
    display: flex;
    justify-content:center;
    
  }
  
</style>


<div class="faq-container">
 
    <div class="faq" id="ndnappseasyfaqs-wrapper"></div>
  
</div>


{%schema%}
{
  "name": "FAQ section",
  "settings": [
    {
      "type": "color",
      "id": "container_background_color",
      "label": "Background color",
      "default": "#a0cf67"
    }
  ]


}
{% endschema %}

this is the result before I try to modify it:
before modification

this is the result as soon as I modify the color:
After modification

Tags:

2

Answers


  1. 0

    This might be an issue linked to preview update in JS.
    Did you try to save your changes and see if it works?

    Login or Signup to reply.
  2. 0

    According to Integration with the theme editor,

    When merchants customize sections, the HTML of those sections is dynamically added, removed, or re-rendered directly onto the existing DOM without reloading the entire page.

    JavaScript that runs when the page loads will not run again when a section is re-rendered or added to the page. This poses a problem for any custom scripts that would need to be re-run.

    If you’re running some js on page load, it won’t be run again after the user makes a change in section. So I guess you have to run the js manually. Just bind the event with your event listener

    document.addEventListener('shopify:section:load', function(event){
   [your code...]
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search