shopify模块新增内容或图片

1、后台找到指定的liquid页面，在该页面下方{% schema %} 新增需求

2、添加轮播图功能

        {% comment %} 轮播代码 {% endcomment %}
              {% if block.settings.enable_slider %}
                <div
                  class="size-guide-slider swiper"
                  data-slides-per-view="{{ block.settings.slides_per_view | default: 2 }}"
                >
                  <div class="swiper-wrapper">
                    {% for slide in section.blocks %}
                      {% if slide.type == 'slide' %}
                        <div class="swiper-slide">
                          {% if slide.settings.slide_image %}
                            <img
                              src="{{ slide.settings.slide_image | image_url: width: 2000 }}"
                              alt="{{ slide.settings.slide_title }}"
                              loading="lazy"
                              width="{{ slide.settings.slide_image.width }}"
                              height="{{ slide.settings.slide_image.height }}"
                            >
                          {% endif %}
                          {% if slide.settings.slide_title != blank %}
                            <div class="slide-title">{{ slide.settings.slide_title }}</div>
                          {% endif %}
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                  <div class="swiper-pagination"></div>
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>
                </div>
              {% endif %}

3、补充JQ

<script type="text/javascript" defer="">
  document.addEventListener('DOMContentLoaded', function () {
    (() => {
      const node = document.querySelector('#shopify-section-{{section.id}}');
      const carousels = node.querySelectorAll('[carousel]');

      let swipers = [];

      carousels.forEach((carousel, i) => {
        const swiper = new Swiper(carousel, {
          allowTouchMove: false,
          loop: true,
        });
        swipers.push(swiper);
      });

      const contentCarousel = node.querySelector('[content]');

      const prevEl = node.querySelector('[prev]');
      const nextEl = node.querySelector('[next]');

      const swiper = new Swiper(contentCarousel, {
        effect: 'fade',
        loop: true,
        fadeEffect: {
          crossFade: true,
        },
        navigation: {
          nextEl: nextEl,
          prevEl: prevEl,
        },
      });

      swiper.controller.control = swipers;
      swiper.controller.control = swipers;

      swiper.controller.control = swipers;
    })();
  });
  document.addEventListener('DOMContentLoaded', function () {
    // Function to initialize tabs
    function initializeTabs() {
      // Get all tab headers
      const tabHeaders = document.querySelectorAll('.tab-header');
      // Get all tab content elements
      const tabContents = document.querySelectorAll('.tab-content');

      // Add click event listener to each tab header
      tabHeaders.forEach(function (header) {
        header.addEventListener('click', function () {
          // Remove 'active' class from all headers and contents
          tabHeaders.forEach(function (item) {
            item.classList.remove('active');
          });
          tabContents.forEach(function (content) {
            content.classList.remove('active');
          });

          // Add 'active' class to the clicked header and corresponding content
          this.classList.add('active');
          document.getElementById(this.getAttribute('data-tab')).classList.add('active');
        });
      });
    }

    // Initialize tabs when the document is ready
    initializeTabs();

    // Initialize size guide slider
    const sizeGuideSlider = new Swiper('.size-guide-slider', {
      slidesPerView: parseInt(document.querySelector('.size-guide-slider').dataset.slidesPerView),
      slidesPerGroup: parseInt(document.querySelector('.size-guide-slider').dataset.slidesPerView),
      spaceBetween: 30,
      slidesPerGroup: 2,
      loop: false,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  });
</script>

后台的tab 模块区域 ，
{% schema %}
{
  "name": "Tab Content",
  "settings": [
    {
      "type": "url",
      "id": "video_url",
      "label": "Video URL",
      "info": "Enter the URL of the video you want to display."
    },
    {
      "type": "image_picker",
      "id": "cover_image",
      "label": "Cover Image",
      "info": "Select the cover image that appears before the video plays."
    }
  ],
  "blocks": [
    {
      "type": "FAQ",
      "name": "FAQ",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title"
        },
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Tab Icon"
        },
        {
          "type": "number",
          "id": "icon_width",
          "label": "Icon Width",
          "info": "Enter the width of the icon in pixels.",
          "default": 50
        },
        {
          "type": "number",
          "id": "icon_height",
          "label": "Icon Height",
          "info": "Enter the height of the icon in pixels.",
          "default": 50
        }
      ]
    },
    {
      "type": "faq_item",
      "name": "FAQ Item",
      "limit": 20, // 可以限制 FAQ 项的数量
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "Do you ship overseas?"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.</p>"
        }
      ]
    },
    {
      "type": "size_guide",
      "name": "Size Help",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "enable_slider",
          "label": "Enable Image Slider",
          "default": false
        },
        {
          "type": "range",
          "id": "slides_per_view", // 一屏幕显示几个
          "min": 1,
          "max": 4,
          "step": 1,
          "label": "Slides Per View",
          "default": 2
        },
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title"
        },
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Tab Icon"
        },
        {
          "type": "number",
          "id": "icon_width",
          "label": "Icon Width",
          "info": "Enter the width of the icon in pixels.",
          "default": 50
        },
        {
          "type": "number",
          "id": "icon_height",
          "label": "Icon Height",
          "info": "Enter the height of the icon in pixels.",
          "default": 50
        },
        {
          "type": "richtext",
          "id": "size_help_text",
          "label": "Size help text"
        },
        {
          "type": "image_picker",
          "id": "size_guide_image",
          "label": "Size help image"
        },
        {
          "type": "video",
          "id": "video",
          "label": "Size help video"
        },
        {
          "type": "checkbox",
          "id": "enable_video_looping",
          "label": "Enable video looping"
        }
      ]
    },
    {
      "type": "slide",
      "name": "Slider Image", // 轮播图
      "settings": [
        {
          "type": "image_picker",
          "id": "slide_image",
          "label": "Slide Image"
        },
        {
          "type": "text",
          "id": "slide_title",
          "label": "Slide Title",
          "default": "Slide Title"
        }
      ]
    },
    {
      "type": "help_text_item",
      "name": "Help Text Item",
      "limit": 20, // 可以限制 FAQ 项的数量
      "settings": [
        {
          "type": "text",
          "id": "helpText",
          "label": "title",
          "default": "title"
        },
        {
          "type": "richtext",
          "id": "helpContent",
          "label": "content",
          "default": "<p>conent</p>"
        }
      ]
    },

    {
      "type": "materials_care",
      "name": "Materials and Care",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title"
        },
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Tab Icon"
        },
        {
          "type": "number",
          "id": "icon_width",
          "label": "Icon Width",
          "info": "Enter the width of the icon in pixels.",
          "default": 50
        },
        {
          "type": "number",
          "id": "icon_height",
          "label": "Icon Height",
          "info": "Enter the height of the icon in pixels.",
          "default": 50
        },
        {
          "type": "header",
          "content": "Material content"
        },
        {
          "type": "text",
          "id": "material_title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "material_content",
          "label": "Content"
        },
        {
          "type": "header",
          "content": "Care"
        },
        {
          "type": "text",
          "id": "care_title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "care_content",
          "label": "Content"
        }
      ]
    }
  ]
}
{% endschema %}

4、后台效果：