New Section Impulse theme

Store Design
, ,
1

I need your help in creating a new section in the Impulse theme. In the file I am sharing, there is a Liquid file for tabs. The tabs currently allow me to add four types of blocks: image, liquid, product, and collection.

I want to create a similar tab section but with the ability to add Advanced Content to the tabs as a block.

Here is tabs section code:

Create a new section :section-tab.liquid and paste all below code in that section

{% if section.settings.section_title != blank %}

{{ section.settings.section_title | escape }}

{% endif %} {% if section.settings.subheading != blank %}
{{ section.settings.subheading }}
{% endif %}
{% for block in section.blocks %}
{% case block.type %} {% when 'image' %} {{ block.settings.heading }} {% when 'html' %} {{ block.settings.heading }} {% when 'liquid' %} {{ block.settings.heading }} {% when 'collection' %} {{ block.settings.heading }} {% endcase %}
{% endfor %}
{% for block in section.blocks %}
{% case block.type %} {% when 'image' %} {{ block.settings.image | img_url: '2048x' | img_tag }} {% when 'html' %} {{ block.settings.html }} {% when 'liquid' %} {{ block.settings.liquid }} {% when 'collection' %} {%- liquid assign collection = collections[block.settings.collection] case block.settings.grid when 2 assign max_height = 530 assign grid_item_width = 'medium-up--one-half' when 3 assign max_height = 345 assign grid_item_width = 'small--one-half medium-up--one-third' when 4 assign max_height = 250 assign grid_item_width = 'small--one-half medium-up--one-quarter' when 5 assign max_height = 195 assign grid_item_width = 'small--one-half medium-up--one-fifth' endcase

assign product_limit = block.settings.grid | times: block.settings.rows
-%}

    {% for product in collection.products limit: product_limit %}
  • {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: block.settings.show_vendor %}
    • {% else %}

    {% for i in (1..product_limit) %}

  • {{ 'homepage.onboarding.product_title' | t }}
    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
    {{ 'homepage.onboarding.product_title' | t }}
    {% include 'product-price' %}
    • {% endfor %} {% endfor %}
{% endcase%}
{% endfor %}
.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;
flex: 1;
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-content {
padding: 28px 0;
}

.tab-pane {
color: #333;
display: none;
}

.tab-pane.active {
display: block;
}

.tab-pane h2 {
font-size: 24px;
margin-bottom: 8px;
}

{% 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”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

”
},
{
“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”: “image”,
“name”: “Block image”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Tab heading”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “image_url”,
“label”: “Link”
}
]
},
{
“type”: “html”,
“name”: “Block html”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Tab heading”
},
{
“type”: “html”,
“id”: “html”,
“label”: “HTML code”
}
]
},
{
“type”: “liquid”,
“name”: “Block liquid”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Tab heading”
},
{
“type”: “liquid”,
“id”: “liquid”,
“label”: “Liquid code”
}
]
},
{
“type”: “collection”,
“name”: “Block collection”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Tab heading”
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “collection”
},
{
“type”: “range”,
“id”: “grid”,
“label”: “Products per row”,
“min”: 2,
“max”: 5,
“step”: 1,
“default”: 3
},
{
“type”: “range”,
“id”: “rows”,
“label”: “Rows”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 2
}
]
}
],
“presets”: [
{
“name”: “Tab Section”,
“category”: “Tab Section”
}
]
}
{% endschema %}