How to correctly display a slider within tabs?
yeah sure, that's what the section looks like on the website.
That is, in all the tabs at the top, absolutely all the snippets are displayed, although I try to separate them so that each tab corresponds to a specific snippet.
I've attached the full code below
<div class="tab-section">
<div class="page-width">
<div class="section-header text-center">
{% if section.settings.section_title != blank %}
<h2 class="h2">{{ section.settings.section_title | escape }}</h2>
{% endif %}
{% if section.settings.subheading != blank %}
<div class="rte">{{ section.settings.subheading }}</div>
{% endif %}
</div>
<div class="tab-container">
<!-- Tab items -->
<div class="tabs">
{% for block in section.blocks %}
<div class="tab-item {% if forloop.first == true %}active{% endif %}">
{% case block.type %}
{% when 'face-care-slideshow' %}
{{ block.settings.heading_tab }}
{% when 'hair-care-slideshow' %}
{{ block.settings.heading_tab }}
{% when 'body-care-slideshow' %}
{{ block.settings.heading_tab }}
{% endcase %}
</div>
{% endfor %}
<div class="line"></div>
</div>
<!-- Tab content -->
<div class="tab-content">
{% for block in section.blocks %}
<div class="tab-pane {% if forloop.first == true %}active{% endif %}">
{% if block.type == 'face-care-slideshow' %}
{% render 'slideshow-face-steps-snippet' %}
{% endif %}
{% if block.type == 'hair-care-slideshow' %}
{% render 'slideshow-hair-steps-snippet' %}
{% endif %}
{% if block.type == 'body-care-slideshow' %}
{% render 'slideshow-body-steps-snippet' %}
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<style>
.tabs {
display: flex;
position: relative;
gap: 5px;
}
.tabs .line {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 6px;
border-radius: 15px;
background-color: {{ section.settings.line_color }};
transition: all 0.2s ease;
}
.tab-item {
min-width: 80px;
padding: 16px 20px 11px 20px;
font-size: 20px;
text-align: center;
color: {{ section.settings.button_color }};
background-color: {{ section.settings.button_background }};
cursor: pointer;
transition: all 0.5s ease;
}
.tab-icon {
font-size: 24px;
width: 32px;
position: relative;
top: 2px;
}
.tab-item.active,
.tab-item:hover {
color: {{ section.settings.button_hover_color }};
background-color: {{ section.settings.button_hover_background }};
}
.tab-pane {
color: #333;
display: none;
}
.tab-pane.active {
display: block;
}
</style>
{% schema %}
{
"name": "Tab Section",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "section_title",
"label": "Heading",
"default": "Talk about your brand"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "header",
"content": "Tab Settings"
},
{
"type": "color",
"id": "button_color",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background",
"label": "Button background",
"default": "#3a3a3a"
},
{
"type": "color",
"id": "button_hover_color",
"label": "Hover color",
"default": "#3a3a3a"
},
{
"type": "color",
"id": "button_hover_background",
"label": "Hover background",
"default": "#fed7e0"
}
],
"blocks": [
{
"type": "face-care-slideshow",
"name": "Face care slideshow",
"settings": [
{
"type": "text",
"id": "heading_tab",
"label": "Heading Tab",
"default": "Tab heading"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "Tagline style"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "Tagline size"
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
},
{
"type": "header",
"content": "Slide#1"
},
{
"type": "product",
"id": "product_slide1",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide1",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide1",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide1",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide1",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#2"
},
{
"type": "product",
"id": "product_slide2",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide2",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide2",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide2",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide2",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#3"
},
{
"type": "product",
"id": "product_slide3",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide3",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide3",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide3",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide3",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#4"
},
{
"type": "product",
"id": "product_slide4",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide4",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide4",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide4",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide4",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#5"
},
{
"type": "product",
"id": "product_slide5",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide5",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide5",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide5",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide5",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#6"
},
{
"type": "product",
"id": "product_slide6",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide6",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide6",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide6",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide6",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
}
]
},
{
"type": "hair-care-slideshow",
"name": "Hair care slideshow",
"settings": [
{
"type": "text",
"id": "heading_tab",
"label": "Heading Tab",
"default": "Tab heading"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "Tagline style"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "Tagline size"
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
},
{
"type": "header",
"content": "Slide#1"
},
{
"type": "product",
"id": "product_slide1",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide1",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide1",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide1",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide1",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#2"
},
{
"type": "product",
"id": "product_slide2",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide2",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide2",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide2",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide2",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#3"
},
{
"type": "product",
"id": "product_slide3",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide3",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide3",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide3",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide3",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#4"
},
{
"type": "product",
"id": "product_slide4",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide4",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide4",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide4",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide4",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#5"
},
{
"type": "product",
"id": "product_slide5",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide5",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide5",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide5",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide5",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#6"
},
{
"type": "product",
"id": "product_slide6",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide6",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide6",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide6",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide6",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
}
]
},
{
"type": "body-care-slideshow",
"name": "Body care slideshow",
"settings": [
{
"type": "text",
"id": "heading_tab",
"label": "Heading Tab",
"default": "Tab heading"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "Tagline style"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "Tagline size"
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
},
{
"type": "header",
"content": "Slide#1"
},
{
"type": "product",
"id": "product_slide1",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide1",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide1",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide1",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide1",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide1",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#2"
},
{
"type": "product",
"id": "product_slide2",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide2",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide2",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide2",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide2",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide2",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#3"
},
{
"type": "product",
"id": "product_slide3",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide3",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide3",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide3",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide3",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide3",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#4"
},
{
"type": "product",
"id": "product_slide4",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide4",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide4",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide4",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide4",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide4",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#5"
},
{
"type": "product",
"id": "product_slide5",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide5",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide5",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide5",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide5",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide5",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "header",
"content": "Slide#6"
},
{
"type": "product",
"id": "product_slide6",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "inline_richtext",
"id": "heading_slide6",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "inline_richtext",
"id": "subheading_slide6",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label_slide6",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "text",
"id": "caption_slide6",
"default": "Add a tagline",
"label": "Tagline"
},
{
"type": "url",
"id": "link_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "checkbox",
"id": "show_text_box_slide6",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
}
]
}
],
"presets": [
{
"name": "Tab Section",
"category": "Tab Section"
}
]
}
{% endschema %}
<script >
window.onload = function() {
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
const tabs = $$('.tab-item');
const panes = $$('.tab-pane');
const tabActive = $('.tab-item.active')
const line = $('.tabs .line');
function tabLine(t) {
line.style.left = t.offsetLeft + 'px';
line.style.width = t.offsetWidth + 'px';
}
console.log(tabActive.offsetWidth, 'donny')
// tabLine(tabActive);
tabs.forEach((tab, index) => {
const pane = panes[index];
tab.onclick = function () {
$('.tab-pane.active').classList.remove('active');
$('.tab-item.active').classList.remove('active');
// tabLine(this)
pane.classList.add('active');
this.classList.add('active')
}
})
}
</script>
Community Blog Articles
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Recap | An AMA with 2H Media: Marketing Your Shopify Store!
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024