themes - Shopify Section load event in Liquid file (Shopify)

Solution:

Instead of usingshopify:section:load which fires only inside the theme editor (that's why you can't get it working outside of theme editor), you should include this<script> tag in the end of your section's code and change it a bit:

<script>
  {% if request.design_mode %}
        console.log("123");
        let flkty; // for later use
        document.addEventListener("DOMContentLoaded", function() { // run this script after window is ready and scripts are loaded
            console.log("abc");
            var elem = document.querySelector('.carousel');
            if (elem) { // check if element was found before using it
                 flkty = new Flickity( elem, {
                    autoPlay: "{{ section.settings.autoplay_slide }}", 
                    pageDots: true, 
                    contain: true, 
                    wrapAround: false, 
                    imagesLoaded: true, 
                    accessibility: false
                 });
             }
        });
      {% endif %}
</script>
Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.