Skip to content

Instantly share code, notes, and snippets.

@0x15f

0x15f/shoppable-hero-banner.liquid Secret

Created June 27, 2024 18:08
Show Gist options
  • Save 0x15f/834ad550e8ff95b1d27567de8c65a746 to your computer and use it in GitHub Desktop.
Save 0x15f/834ad550e8ff95b1d27567de8c65a746 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shoppable-hero-banner.liquid
{% liquid
assign ss = section.settings
assign desktop_image = ss.desktop_image
assign mobile_image = ss.mobile_image
assign video = ss.video
assign video_loop = ss.video_loop
assign desktop_sub_header = ss.sub_header
assign mobile_sub_header = ss.mobile_sub_header
assign desktop_header = ss.header
assign mobile_header = ss.mobile_header
assign show_button = ss.show_button
assign button_text = ss.button_text
assign button_link = ss.button_link
assign vertical_alignment = ss.vertical_alignment_mobile | append: ' ' | append: ss.vertical_alignment_desktop
assign horizontal_alignment = ss.horizontal_alignment_mobile | append: ' ' | append: ss.horizontal_alignment_desktop
assign base_space = '2.25rem'
assign preferred_color = null
assign show_header_on_mobile = ss.show_header_on_mobile
assign desktop_text_color = ss.text_color
assign mobile_text_color = ss.mobile_text_color
assign mobile_indicator_size = ss.mobile_indicator_size
assign desktop_indicator_size = ss.desktop_indicator_size
%}
<div
class="grid grid-cols-1 grid-rows-1 mx-[0.69rem] relative py-4"
data-cascade
style="--base-space: {{base_space}}">
<div class="col-start-1 row-start-1 row-end-1 col-end-1 relative rounded overflow-clip w-full">
{% if video != blank %}
<video
playsinline
autoplay
muted
{% if video_loop %}
loop
{% endif %}
preload="auto"
style="aspect-ratio: {{ video.aspect_ratio }}"
class="min-h-[44rem] object-cover max-h-screen w-full"
poster="{{ video.preview_image.src }}">
{% for source in video.sources %}
<source src="{{ source.url }}" type="{{ source.mime_type }}">
{% endfor %}
</video>
{% elsif desktop_image != blank or mobile_image != blank %}
{% render 'viewport-images-mobile-desktop'
, mobile_image: mobile_image
, desktop_image: desktop_image
, class: 'object-cover w-full min-h-[40rem] lg:min-h-0'
, fetch_priority: 'high'
, loading: 'eager'
%}
{% endif %}
</div>
<div class="{{vertical_alignment}} {{horizontal_alignment}} col-start-1 row-start-1 row-end-1 col-end-1 relative max-w-[35rem] text-center text-off-black px-4 lg:px-8 py-12">
<h3 class="typography__body-large mb-0.5 {% unless show_header_on_mobile %} hidden {% endunless %} lg:block text-[var(--mobile-text-color)] lg:text-[color:var(--desktop-text-color)] text-[length:var(--mobile-font-size)] lg:text-[length:var(--desktop-font-size)]" style="--mobile-text-color: {{ mobile_text_color }}; --desktop-text-color: {{ desktop_text_color }}; --mobile-font-size: {{ ss.sub_header_font_size_mobile }}px; --desktop-font-size: {{ ss.sub_header_font_size_desktop }}px;">
<span class="lg:hidden">{{ mobile_sub_header }}</span>
<span class="hidden lg:block">{{ desktop_sub_header }}</span>
</h3>
<h2 class="typography__display {% unless show_header_on_mobile %} hidden {% endunless %} lg:block text-[color:var(--mobile-text-color)] lg:text-[color:var(--desktop-text-color)] text-[length:var(--mobile-font-size)] lg:text-[length:var(--desktop-font-size)]" style="--mobile-text-color: {{ mobile_text_color }}; --desktop-text-color: {{ desktop_text_color }}; --mobile-font-size: {{ ss.header_font_size_mobile }}px; --desktop-font-size: {{ ss.header_font_size_desktop }}px;">
<span class="lg:hidden">{{ mobile_header }}</span>
<span class="hidden lg:block">{{ desktop_header }}</span>
</h2>
{% if show_button %}
<a
class="btn btn--primary mx-auto mt-5 lg:mt-[1.88rem] bg-[var(--button-bg-color)] text-[var(--button-text-color)] hover:bg-[var(--button-hover-color)]"
href="{{ button_link }}"
style="--button-bg-color: {{ ss.button_bg_color }}; --button-text-color: {{ ss.button_text_color }}; --button-hover-color: {{ ss.button_hover_color }};">
{{- button_text -}}
</a>
{% endif %}
</div>
{% for block in section.blocks %}
{% liquid
assign product = block.settings.product
assign mobile_left_position = block.settings.mobile_left_position | append: '%'
assign mobile_top_position = block.settings.mobile_top_position | append: '%'
assign desktop_left_position = block.settings.desktop_left_position | append: '%'
assign desktop_top_position = block.settings.desktop_top_position | append: '%'
assign current_variant = product.selected_or_first_available_variant
if current_variant.metafields.variation_fields.hide_variation
for variant in product.variants
unless variant.metafields.variation_fields.hide_variation
assign current_variant = variant
break
endunless
endfor
endif
assign image = current_variant.featured_image | default: product.images[0]
assign style = product.metafields.display.style
assign title = product.title
assign price = product.price | money_without_trailing_zeros
assign badge = product.metafields.display.badge
assign color_options = product.options_by_name.color.values
assign can_quick_buy = false
if product.options.size == 1 and color_options != blank
assign can_quick_buy = true
endif
if color_options != blank and preferred_color != blank
assign color_position = product.options_by_name.color.position
assign color_option_key = 'option1'
if color_position == 2
assign color_option_key = 'option2'
elsif color_position == 3
assign color_option_key = 'option3'
endif
assign preferred_variant = product.variants | where: color_option_key, preferred_color | first
if preferred_variant != blank
assign image = preferred_variant.featured_image | default: product.images[0]
endif
endif
%}
<shoppable-card
data-state="close"
data-product-id="{{ product.id }}"
class="block group w-[var(--indicator-size-mobile)] h-[var(--indicator-size-mobile)] lg:w-[var(--indicator-size-desktop)] lg:h-[var(--indicator-size-desktop)] absolute-position absolute [--absolute-position-left:var(--absolute-position-left-mobile)] [--absolute-position-top:var(--absolute-position-top-mobile)] lg:[--absolute-position-left:var(--absolute-position-left-desktop)] lg:[--absolute-position-top:var(--absolute-position-top-desktop)]"
style="--absolute-position-left-mobile: {{mobile_left_position}}; --absolute-position-top-mobile: {{mobile_top_position}}; --absolute-position-left-desktop: {{desktop_left_position}}; --absolute-position-top-desktop: {{desktop_top_position}}; --indicator-size-mobile: {{mobile_indicator_size}}px; --indicator-size-desktop: {{desktop_indicator_size}}px;">
<button
data-toggle-button
class="relative hover:scale-105 transition-transform "
style="--background-color: {{ ss.indicator_color_background }}; --foreground-color: {{ ss.indicator_color_foreground }}">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-[var(--indicator-size-mobile)] h-[var(--indicator-size-mobile)] lg:w-[var(--indicator-size-desktop)] lg:h-[var(--indicator-size-desktop)] transition-colors stroke-[var(--foreground-color)] group-data-[state=opening]:stroke-[var(--background-color)] group-data-[state=open]:stroke-[var(--background-color)]"
viewBox="0 0 35 35"
fill="none">
<circle
cx="17.5"
cy="17.5"
r="16.75"
class="transition-colors fill-[var(--background-color)] group-data-[state=opening]:fill-[var(--foreground-color)] group-data-[state=open]:fill-[var(--foreground-color)]"
stroke-width="1.5" />
<path
d="M9 17L26 17"
class="transition-colors "
stroke-width="1.25"
stroke-linecap="round" />
<path
d="M9 17L26 17"
class=" transition-opacity duration-500 opacity-100 group-data-[state=opening]:opacity-0 group-data-[state=open]:opacity-0 stroke-[var(--foreground-color)] rotate-90 origin-center"
stroke-width="1.25"
stroke-linecap="round" />
</svg>
<span class="sr-only">show/hide {{ product.title }} shoppable card</span>
</button>
<dialog
data-content
class=" left-[var(--position-offset-mobile)] bottom-[var(--position-offset-mobile)] lg:left-[var(--position-offset-desktop)] lg:bottom-[var(--position-offset-desktop)] shadow-product-card bg-white rounded-lg"
style="--position-offset-mobile: {{mobile_indicator_size | times: 0.666 | round}}px; --position-offset-desktop: {{desktop_indicator_size | times: 0.666 | round}}px;">
{% render 'product-card-content'
, product: product
, show_favorite: false
, is_tiny: true
, is_shoppable_card: true
%}
</dialog>
</shoppable-card>
{% endfor %}
</div>
{% schema %}
{
"name": "Shoppable Hero Banner",
"settings": [
{
"type": "header",
"content": "Header and SubHeader"
},
{
"type": "text",
"id": "sub_header",
"label": "Desktop Sub Header"
},
{
"type": "text",
"id": "mobile_sub_header",
"label": "Mobile Sub Header"
},
{
"type": "range",
"id": "sub_header_font_size_mobile",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "SubHeader Font size Mobile",
"default": 16
},
{
"type": "range",
"id": "sub_header_font_size_desktop",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "SubHeader Font size_desktop",
"default": 18
},
{
"type": "text",
"id": "header",
"label": "Desktop Header"
},
{
"type": "text",
"id": "mobile_header",
"label": "Mobile Header"
},
{
"type": "range",
"id": "header_font_size_mobile",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "Header Font size Mobile",
"default": 48
},
{
"type": "range",
"id": "header_font_size_desktop",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "Header Font size Desktop",
"default": 52
},
{
"type": "checkbox",
"id": "show_header_on_mobile",
"label": "Show Header and SubHeader on Mobile",
"default": true
},
{
"type": "select",
"id": "text_color",
"label": "Desktop Text Color",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#191B1D"
},
{
"type": "select",
"id": "mobile_text_color",
"label": "Mobile Text Color",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#191B1D"
},
{
"type": "select",
"id": "vertical_alignment_desktop",
"label": "Desktop Vertical alignment",
"options": [
{
"value": "lg:self-start",
"label": "Top"
},
{
"value": "lg:self-center",
"label": "Middle"
},
{
"value": "lg:self-end",
"label": "Bottom"
}
],
"default": "lg:self-center"
},
{
"type": "select",
"id": "vertical_alignment_mobile",
"label": "Mobile Vertical alignment",
"options": [
{
"value": "self-start",
"label": "Top"
},
{
"value": "self-center",
"label": "Middle"
},
{
"value": "self-end",
"label": "Bottom"
}
],
"default": "self-start"
},
{
"type": "select",
"id": "horizontal_alignment_desktop",
"label": "Desktop Horizontal alignment",
"options": [
{
"value": "lg:justify-self-start",
"label": "Left"
},
{
"value": "lg:justify-self-center",
"label": "Middle"
},
{
"value": "lg:justify-self-end",
"label": "Right"
}
],
"default": "lg:justify-self-start"
},
{
"type": "select",
"id": "horizontal_alignment_mobile",
"label": "Mobile Horizontal alignment",
"options": [
{
"value": "justify-self-start",
"label": "Left"
},
{
"value": "justify-self-center",
"label": "Middle"
},
{
"value": "justify-self-end",
"label": "Right"
}
],
"default": "justify-self-center"
},
{
"type": "header",
"content": "Background Images and Video"
},
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image"
},
{
"type": "video",
"id": "video",
"label": "Video and Video Cover Image"
},
{
"type": "checkbox",
"id": "video_loop",
"label": "Video Loop",
"default": true
},
{
"type": "header",
"content": "CTA Button"
},
{
"type": "checkbox",
"id": "show_button",
"label": "Show Button",
"default": true
},
{
"type": "text",
"id": "button_text",
"label": "Link Text"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "select",
"id": "button_text_color",
"label": "Button Text Color",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#191B1D"
},
{
"type": "select",
"id": "button_bg_color",
"label": "Button Background Color",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#F7F7F2"
},
{
"type": "select",
"id": "button_hover_color",
"label": "Button Background Hover Color",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#D9C9A6"
},
{
"type": "header",
"content": "Shoppable Card"
},
{
"type": "select",
"id": "indicator_color_background",
"label": "Indicator Color Background",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#fff"
},
{
"type": "select",
"id": "indicator_color_foreground",
"label": "Indicator Color Foreground",
"options": [
{
"value": "#fff",
"label": "White"
},
{
"value": "#000",
"label": "Black"
},
{
"value": "#191B1D",
"label": "Off Black"
},
{
"value": "#a17559",
"label": "Copper"
},
{
"value": "#d0baac",
"label": "Copper 50"
},
{
"value": "#ece3de",
"label": "Copper 20"
},
{
"value": "#f5f1ee",
"label": "Copper 005"
},
{
"value": "#F0F0E5",
"label": "Cream"
},
{
"value": "#F7F7F2",
"label": "Cream 50"
},
{
"value": "#D9C9A6",
"label": "Sand"
},
{
"value": "#ece4d2",
"label": "Sand 50"
},
{
"value": "#f7f4ed",
"label": "Sand 20"
},
{
"value": "#FCFBF8",
"label": "Sand 005"
},
{
"value": "#2E383D",
"label": "Slate"
},
{
"value": "#969B9E",
"label": "Slate 50"
},
{
"value": "#D5D7D8",
"label": "Slate 20"
},
{
"value": "#F5F5F5",
"label": "Slate 005"
},
{
"value": "#7394ab",
"label": "Sky"
},
{
"value": "#b9c9d5",
"label": "Sky 50"
},
{
"value": "#e3eaee",
"label": "Sky 20"
},
{
"value": "#f1f4f7",
"label": "Sky 005"
},
{
"value": "#169b4f",
"label": "Green"
},
{
"value": "transparent",
"label": "Transparent"
}
],
"default": "#191B1D"
},
{
"type": "range",
"id": "mobile_indicator_size",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "Mobile Indicator size",
"default": 24
},
{
"type": "range",
"id": "desktop_indicator_size",
"min": 8,
"max": 100,
"step": 1,
"unit": "px",
"label": "Desktop Indicator size",
"default": 36
}
],
"blocks": [
{
"type": "card",
"name": "Card",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "range",
"id": "mobile_left_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Mobile Horizontal Position",
"default": 50
},
{
"type": "range",
"id": "mobile_top_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Mobile Vertical Position",
"default": 50
},
{
"type": "range",
"id": "desktop_left_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Desktop Horizontal Position",
"default": 50
},
{
"type": "range",
"id": "desktop_top_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Desktop Vertical Position",
"default": 50
}
]
}
],
"presets": [
{
"name": "Shoppable Hero Banner"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment