当前位置：首页 > news >正文

shopify模块新增内容或图片

news 2025/7/17 10:32:21

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

2、添加轮播图功能

        {% comment %} 轮播代码 {% endcomment %}{% if block.settings.enable_slider %}<divclass="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 %}<imgsrc="{{ 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 tabsfunction initializeTabs() {// Get all tab headersconst tabHeaders = document.querySelectorAll('.tab-header');// Get all tab content elementsconst tabContents = document.querySelectorAll('.tab-content');// Add click event listener to each tab headertabHeaders.forEach(function (header) {header.addEventListener('click', function () {// Remove 'active' class from all headers and contentstabHeaders.forEach(function (item) {item.classList.remove('active');});tabContents.forEach(function (content) {content.classList.remove('active');});// Add 'active' class to the clicked header and corresponding contentthis.classList.add('active');document.getElementById(this.getAttribute('data-tab')).classList.add('active');});});}// Initialize tabs when the document is readyinitializeTabs();// Initialize size guide sliderconst 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 %}