Test
npx cascadekit add test
Files
Copied!
{%- comment -%}
How this works:
- If we only have one image, we want it to be full width
- If we have two images, we want them to be 50% width each
- If we have a mobile image, we want to hide the desktop image on mobile
- The first mobile image will be the size of the hero on mobile (only if there is one mobile image)
- If we have a second mobile image, the two mobile images are put together to make the hero on mobile
{%- endcomment -%}
{%- style -%}
#Banner-{{ section.id }} .hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
{%- liquid
if section.settings.image_2 != blank
assign image_sizes = '50%'
else
assign image_sizes = '100%'
endif
if section.settings.mobile_image != blank
assign image_classes = 'hidden sm:block object-cover w-full h-full'
else
assign image_classes = 'object-cover w-full h-full object-bottom'
endif
-%}
<section
id='Banner-{{ section.id }}'
data-block='hero'
class='{{ section.settings.padding_top }} {{ section.settings.padding_bottom }}'>
{% if section.settings.hero_link != blank %}
<a href='{{ section.settings.hero_link }}' class='block'>
{% endif %}
{% if section.settings.show_announcement %}
<div class="bg-red-600 text-white p-2 text-center">
<h1>Announcement
{% render 'icon-close', class: 'text-white text-center mx-auto size-6' %}
</h1>
</div>
{% endif %}
<div class='hero relative grid grid-cols-1 overflow-hidden {{ section.settings.width }}'>
<div class='
col-start-1 row-start-1 grid h-full sm:auto-cols-fr sm:grid-flow-col md:max-h-[1200px]
{%- if section.settings.image != blank and section.settings.image_2 != blank %} md:grid-cols-2 {%- endif-%}
'>
{%- if section.settings.image != blank -%}
{{
section.settings.image | image_url: width: 1920 | image_tag: loading: 'eager', width: section.settings.image.width, height: section.settings.image.height, sizes: image_sizes, class: image_classes, widths: '2560, 1920, 1536, 1080, 750, 640, 360'
}}
{%- else -%}
<div class='w-full bg-slate-800 md:aspect-video'></div>
{% endif %}
{%- if section.settings.image_2 != blank -%}
{{
section.settings.image_2 | image_url: width: 1920 | image_tag: loading: 'eager', width: section.settings.image_2.width, height: section.settings.image_2.height, sizes: image_sizes, class: image_classes, widths: '2560, 1920, 1536, 1080, 750, 640, 360'
}}
{%- endif -%}
{%- if section.settings.mobile_image != blank -%}
{{
section.settings.mobile_image | image_url: width: 700 | image_tag: loading: 'eager', width: 700, height: 700, class: 'sm:hidden w-full h-full object-cover'
}}
{%- endif -%}
</div>
<div class='z-10 col-start-1 row-start-1 flex items-center justify-center px-5 py-12 md:px-12 {{ section.settings.desktop_content_position }}'>
<div class='max-w-2xl text-white lg:max-w-4xl {{ section.settings.content_alignment }}'>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<div>
<h2 class='{{ block.settings.heading_size }} inline-block font-bold' {{ block.shopify_attributes }}>
{{ block.settings.heading }}
</h2>
</div>
{%- when 'text' -%}
<div class='content-minimal mt-2 {{ block.settings.width }} {{ block.settings.text_style }} {{ block.settings.text_size }}' {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- when 'buttons' -%}
<div class='mt-10 inline-flex flex-wrap gap-5 {{ block.settings.position }}' {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
{% render 'button-link'
, variant: block.settings.button_style_1
, text: block.settings.button_label_1
, href: block.settings.button_link_1
%}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{% render 'button-link'
, variant: block.settings.button_style_2
, text: block.settings.button_label_2
, href: block.settings.button_link_2
%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% if section.settings.hero_link != blank %}
</a>
{% endif %}
</section>
{% schema %}
{
"name": "Hero",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "header",
"content": "Layout",
"info": "Testing info"
},
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": true
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "text-center",
"label": "Center"
}, {
"value": "text-right",
"label": "Right"
}, {
"value": "text-left",
"label": "Left"
}
],
"default": "text-center",
"label": "Content Alignment"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "lg:items-start lg:justify-start",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "lg:items-start lg:justify-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "lg:items-start lg:justify-end",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "lg:items-center lg:justify-start",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
}, {
"value": "lg:items-center lg:justify-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
}, {
"value": "lg:items-center lg:justify-end",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
}, {
"value": "lg:items-end lg:justify-start",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
}, {
"value": "lg:items-end lg:justify-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
}, {
"value": "lg:items-end lg:justify-end",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "lg:items-center lg:justify-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
}, {
"type": "select",
"id": "width",
"label": "Section Width",
"options": [
{
"value": "",
"label": "Full Width"
}, {
"value": "mx-auto max-w-[1450px]",
"label": "Page Width"
}
],
"default": ""
}, {
"type": "select",
"id": "padding_top",
"label": "t:sections.all.padding.padding_top",
"options": [
{
"value": "pt-0",
"label": "None"
}, {
"value": "pt-9",
"label": "Small"
}, {
"value": "pt-14",
"label": "Normal"
}, {
"value": "pt-28",
"label": "Large"
}
],
"default": "pt-0"
}, {
"type": "select",
"label": "t:sections.all.padding.padding_bottom",
"id": "padding_bottom",
"options": [
{
"value": "pb-0",
"label": "None"
}, {
"value": "pb-9",
"label": "Small"
}, {
"value": "pb-14",
"label": "Normal"
}, {
"value": "pb-28",
"label": "Large"
}
],
"default": "pb-0"
}, {
"type": "header",
"content": "Content"
}, {
"type": "url",
"id": "hero_link",
"label": "Link for hero section (optional)"
}, {
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
}, {
"type": "image_picker",
"id": "mobile_image",
"label": "First Mobile Image"
}, {
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
}, {
"type": "image_picker",
"id": "mobile_image_2",
"label": "Second Mobile Image"
}, {
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 3,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
}, {
"type": "select",
"id": "heading_size",
"options": [
{
"value": "!font-medium text-lg",
"label": "Extra Small"
}, {
"value": "text-3xl lg:text-4xl",
"label": "t:sections.all.heading_size.options__1.label"
}, {
"value": "text-4xl lg:text-5xl",
"label": "t:sections.all.heading_size.options__2.label"
}, {
"value": "text-5xl lg:text-6xl",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "text-4xl lg:text-5xl",
"label": "t:sections.all.heading_size.label"
}
]
}, {
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "<p>Give customers details about the banner image(s) or content on the template.</p>",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
}, {
"type": "select",
"id": "text_size",
"options": [
{
"value": "text-base",
"label": "Base"
},
{
"value": "text-lg",
"label": "Large"
},
{
"value": "text-xl",
"label": "Extra Large"
},
{
"value": "text-2xl",
"label": "2 Extra Large"
}, {
"value": "text-3xl",
"label": "3 Extra Large"
}
],
"default": "text-base",
"label": "t:sections.all.heading_size.label"
}
]
}, {
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "position",
"label": "Buttons Position",
"options": [
{
"value": "justify-center",
"label": "Center"
}, {
"value": "justify-end",
"label": "Right"
}, {
"value": "justify-start",
"label": "Left"
}
],
"default": "justify-center"
},
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "select",
"id": "button_style_1",
"label": "First button style",
"options": [
{
"value": "primary",
"label": "Primary"
}, {
"value": "secondary",
"label": "Secondary"
}, {
"value": "tertiary",
"label": "Tertiary"
}, {
"value": "transparent",
"label": "Transparent"
}
],
"default": "primary"
}, {
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
}, {
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
}, {
"type": "select",
"id": "button_style_2",
"label": "Second button style",
"options": [
{
"value": "primary",
"label": "Primary"
}, {
"value": "secondary",
"label": "Secondary"
}, {
"value": "tertiary",
"label": "Tertiary"
}
],
"default": "primary"
}
]
}
],
"presets": [
{
"name": "Hero",
"blocks": [
{
"type": "heading",
"settings": {
"heading": "I'm changing it again",
"heading_size": "text-5xl lg:text-6xl"
}
}, {
"type": "text",
"settings": {
"text": "<p>Give customers details about the banner image(s) or content on the template.</p>",
"text_size": "text-3xl"
}
}, {
"type": "buttons"
}
],
"settings": {
"show_announcement": true,
"content_alignment": "text-left",
"desktop_content_position": "lg:items-center lg:justify-center",
"width": "",
"padding_top": "pt-0",
"padding_bottom": "pb-0",
"hero_link": "shopify://products/deck-sandal-sand",
"image": "https://images.unsplash.com/photo-1738447429433-69e3ecd0bdd0?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"image_overlay_opacity": 50
}
}
]
}
{% endschema %}