Shipping policy
{% doc %}
@prompt
I need Shiping Delivery Tab Like Using Some Icons
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% style %}
.ai-shipping-tabs-{{ ai_gen_id }} {
padding: 40px 20px;
background-color: {{ block.settings.background_color }};
}
.ai-shipping-tabs__container-{{ ai_gen_id }} {
max-width: 1200px;
margin: 0 auto;
}
.ai-shipping-tabs__header-{{ ai_gen_id }} {
text-align: center;
margin-bottom: 40px;
}
.ai-shipping-tabs__title-{{ ai_gen_id }} {
font-size: {{ block.settings.title_size }}px;
color: {{ block.settings.title_color }};
margin: 0 0 10px;
}
.ai-shipping-tabs__subtitle-{{ ai_gen_id }} {
font-size: {{ block.settings.subtitle_size }}px;
color: {{ block.settings.subtitle_color }};
margin: 0;
}
.ai-shipping-tabs__nav-{{ ai_gen_id }} {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.ai-shipping-tabs__tab-button-{{ ai_gen_id }} {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background-color: {{ block.settings.tab_bg_color }};
color: {{ block.settings.tab_text_color }};
border: 2px solid {{ block.settings.tab_border_color }};
border-radius: {{ block.settings.tab_border_radius }}px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.ai-shipping-tabs__tab-button-{{ ai_gen_id }}:hover {
background-color: {{ block.settings.tab_hover_bg_color }};
color: {{ block.settings.tab_hover_text_color }};
border-color: {{ block.settings.tab_hover_border_color }};
}
.ai-shipping-tabs__tab-button-{{ ai_gen_id }}.active {
background-color: {{ block.settings.tab_active_bg_color }};
color: {{ block.settings.tab_active_text_color }};
border-color: {{ block.settings.tab_active_border_color }};
}
.ai-shipping-tabs__tab-icon-{{ ai_gen_id }} {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.ai-shipping-tabs__content-{{ ai_gen_id }} {
display: none;
padding: 30px;
background-color: {{ block.settings.content_bg_color }};
border-radius: {{ block.settings.content_border_radius }}px;
border: 1px solid {{ block.settings.content_border_color }};
}
.ai-shipping-tabs__content-{{ ai_gen_id }}.active {
display: block;
}
.ai-shipping-tabs__content-title-{{ ai_gen_id }} {
font-size: 24px;
color: {{ block.settings.content_title_color }};
margin: 0 0 15px;
display: flex;
align-items: center;
gap: 12px;
}
.ai-shipping-tabs__content-icon-{{ ai_gen_id }} {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.ai-shipping-tabs__content-text-{{ ai_gen_id }} {
font-size: 16px;
line-height: 1.6;
color: {{ block.settings.content_text_color }};
}
@media screen and (max-width: 749px) {
.ai-shipping-tabs__nav-{{ ai_gen_id }} {
flex-direction: column;
}
.ai-shipping-tabs__tab-button-{{ ai_gen_id }} {
width: 100%;
justify-content: center;
}
.ai-shipping-tabs__content-{{ ai_gen_id }} {
padding: 20px;
}
}
{% endstyle %}
{% if block.settings.title != blank %}
{% endif %}
(function() {
class ShippingTabs{{ ai_gen_id }} extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.tabButtons = this.querySelectorAll('.ai-shipping-tabs__tab-button-{{ ai_gen_id }}');
this.tabContents = this.querySelectorAll('.ai-shipping-tabs__content-{{ ai_gen_id }}');
this.setupEventListeners();
}
setupEventListeners() {
this.tabButtons.forEach((button) => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
this.switchTab(tabId);
});
});
}
switchTab(tabId) {
this.tabButtons.forEach((btn) => {
btn.classList.remove('active');
btn.setAttribute('aria-selected', 'false');
});
this.tabContents.forEach((content) => {
content.classList.remove('active');
});
const activeButton = this.querySelector(`[data-tab="${tabId}"]`);
const activeContent = this.querySelector(`[data-content="${tabId}"]`);
if (activeButton && activeContent) {
activeButton.classList.add('active');
activeButton.setAttribute('aria-selected', 'true');
activeContent.classList.add('active');
}
}
}
customElements.define('shipping-tabs-{{ ai_gen_id }}', ShippingTabs{{ ai_gen_id }});
})();
{% schema %}
{
"name": "Shipping delivery tabs",
"tag": null,
"settings": [
{
"type": "header",
"content": "Header"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Shipping & Delivery Information"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Learn about our shipping options and policies"
},
{
"type": "range",
"id": "title_size",
"min": 20,
"max": 50,
"step": 2,
"unit": "px",
"label": "Title size",
"default": 32
},
{
"type": "range",
"id": "subtitle_size",
"min": 12,
"max": 24,
"step": 2,
"unit": "px",
"label": "Subtitle size",
"default": 16
},
{
"type": "color",
"id": "title_color",
"label": "Title color",
"default": "#121212"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle color",
"default": "#666666"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Tab style"
},
{
"type": "color",
"id": "tab_bg_color",
"label": "Background",
"default": "#f3f3f3"
},
{
"type": "color",
"id": "tab_text_color",
"label": "Text",
"default": "#121212"
},
{
"type": "color",
"id": "tab_border_color",
"label": "Border",
"default": "#e0e0e0"
},
{
"type": "color",
"id": "tab_hover_bg_color",
"label": "Hover background",
"default": "#e8e8e8"
},
{
"type": "color",
"id": "tab_hover_text_color",
"label": "Hover text",
"default": "#121212"
},
{
"type": "color",
"id": "tab_hover_border_color",
"label": "Hover border",
"default": "#cccccc"
},
{
"type": "color",
"id": "tab_active_bg_color",
"label": "Active background",
"default": "#121212"
},
{
"type": "color",
"id": "tab_active_text_color",
"label": "Active text",
"default": "#ffffff"
},
{
"type": "color",
"id": "tab_active_border_color",
"label": "Active border",
"default": "#121212"
},
{
"type": "range",
"id": "tab_border_radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Border radius",
"default": 8
},
{
"type": "header",
"content": "Content style"
},
{
"type": "color",
"id": "content_bg_color",
"label": "Background",
"default": "#f9f9f9"
},
{
"type": "color",
"id": "content_border_color",
"label": "Border",
"default": "#e0e0e0"
},
{
"type": "color",
"id": "content_title_color",
"label": "Title",
"default": "#121212"
},
{
"type": "color",
"id": "content_text_color",
"label": "Text",
"default": "#333333"
},
{
"type": "range",
"id": "content_border_radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"label": "Border radius",
"default": 8
},
{
"type": "header",
"content": "Tab 1 - Standard shipping"
},
{
"type": "checkbox",
"id": "tab_1_enabled",
"label": "Enable tab 1",
"default": true
},
{
"type": "text",
"id": "tab_1_label",
"label": "Label",
"default": "Standard Shipping"
},
{
"type": "richtext",
"id": "tab_1_content",
"label": "Content",
"default": "{{ block.settings.title }}
{% if block.settings.subtitle != blank %}{{ block.settings.subtitle }}
{% endif %}
{% if block.settings.tab_1_enabled %}
{{ block.settings.tab_1_label }}
{% endif %}
{% if block.settings.tab_2_enabled %}
{{ block.settings.tab_2_label }}
{% endif %}
{% if block.settings.tab_3_enabled %}
{{ block.settings.tab_3_label }}
{% endif %}
{% if block.settings.tab_4_enabled %}
{{ block.settings.tab_4_label }}
{% endif %}
{% if block.settings.tab_1_enabled %}
{% endif %}
{% if block.settings.tab_2_enabled %}
{% endif %}
{% if block.settings.tab_3_enabled %}
{% endif %}
{% if block.settings.tab_4_enabled %}
{% endif %}
{{ block.settings.tab_1_label }}
{{ block.settings.tab_1_content }}
{{ block.settings.tab_2_label }}
{{ block.settings.tab_2_content }}
{{ block.settings.tab_3_label }}
{{ block.settings.tab_3_content }}
{{ block.settings.tab_4_label }}
{{ block.settings.tab_4_content }}
Free standard shipping on orders over €50. Delivery within 5-7 business days. Track your order with our tracking system.
" }, { "type": "header", "content": "Tab 2 - Delivery info" }, { "type": "checkbox", "id": "tab_2_enabled", "label": "Enable tab 2", "default": true }, { "type": "text", "id": "tab_2_label", "label": "Label", "default": "Delivery Info" }, { "type": "richtext", "id": "tab_2_content", "label": "Content", "default": "We deliver to all EU countries. Orders are processed within 24 hours. You will receive a confirmation email with tracking details once your order ships.
" }, { "type": "header", "content": "Tab 3 - Secure packaging" }, { "type": "checkbox", "id": "tab_3_enabled", "label": "Enable tab 3", "default": true }, { "type": "text", "id": "tab_3_label", "label": "Label", "default": "Secure Packaging" }, { "type": "richtext", "id": "tab_3_content", "label": "Content", "default": "All items are carefully packaged to ensure they arrive in perfect condition. We use eco-friendly packaging materials whenever possible.
" }, { "type": "header", "content": "Tab 4 - Returns" }, { "type": "checkbox", "id": "tab_4_enabled", "label": "Enable tab 4", "default": true }, { "type": "text", "id": "tab_4_label", "label": "Label", "default": "Returns" }, { "type": "richtext", "id": "tab_4_content", "label": "Content", "default": "Easy returns within 30 days. Items must be unused and in original packaging. Contact our customer service team to initiate a return.
" } ], "presets": [ { "name": "Shipping delivery tabs" } ] } {% endschema %}