Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="homepage-slideshow {{ section.settings.height }}" data-section-id="{{ section.id }}" data-section-type="slideshow">
- {% if section.blocks.size > 0 %}
- <div id="slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
- {% for block in section.blocks %}
- <div class="slick-slide slideshow__slide slideshow__slide--{{ block.id }} preventOverflow homepage-image {{ block.settings.color }}" {{ block.shopify_attributes }} data-color="{{ block.settings.color }}">
- {%- if block.settings.image -%}
- {%- assign slide_image = block.settings.image | img_url: '1800x' -%}
- {%- else -%}
- {%- assign slide_image = 'blank.svg' | asset_url -%}
- {%- endif -%}
- {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
- <a href="{{ block.settings.link }}">
- {% endif %}
- <div class="content--centered">
- <div class="{{ block.settings.text_align }} preventOverflowContent">
- {% if block.settings.button_image %}
- <a href="{{ block.settings.link }}" class="button-image-slide">
- <img src="{{ block.settings.button_image | img_url: '1000x' }}" alt="{{ block.settings.button_image.alt | default: block.settings.link_text }}" class="image--flex" />
- </a>
- {% else %}
- {% unless block.settings.title == '' %}<h1 class="title--flex">{{ block.settings.title }}</h1>{% endunless %}
- {% unless block.settings.description == '' %}<p class="content--flex h4--body">{{ block.settings.description }}</p>{% endunless %}
- {% unless block.settings.link_text == '' %}<a class="{{ block.settings.button_style }}" href="{{ block.settings.link }}">{{ block.settings.link_text | escape }}</a>{% endunless %}
- {% endif %}
- </div>
- </div>
- <div class="image-overlay image-overlay-{{ block.settings.overlay_opacity }}"></div>
- {% if section.settings.height == 'use_image' %}
- <img src="{{ slide_image }}" alt="{{ block.settings.image.alt | default: shop.name }}" class="responsive-wide-image"/>
- {% else %}
- <div class="background-size-cover" style="background-image: url('{{ slide_image }}');"></div>
- {% endif %}
- {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
- </a>
- {% endif %}
- {% if section.settings.height == 'use_screen_full' %}
- <div class="scroll_icon_wrap">
- <a href="#scroll-{{ section.id }}" class="scroll_link bloop">
- <span class="scroll_icon">{% include 'svg-down' %}</span>
- </a>
- </div>
- <div class="scroll__link" id="scroll-{{ section.id }}"></div>
- {% endif %}
- </div>
- {% endfor %}
- </div>
- {% endif %}
- {% if section.blocks.size == 0 %}
- <div class="slideshow__slide">
- <div class="text-center vertical-align">{{ 'home_page.onboarding.no_content' | t }}</div>
- <div class="image-overlay homepage--dark image-overlay-15"></div>
- </div>
- {% endif %}
- </div>
- {% schema %}
- {
- "name": "Slideshow",
- "settings": [
- {
- "type": "checkbox",
- "id": "autoplay",
- "label": "Auto-rotate slides",
- "default": false
- },
- {
- "type": "range",
- "id": "autoplay_speed",
- "min": 1,
- "max": 15,
- "step": 1,
- "unit": "sec",
- "label": "Change slides every",
- "default": 8
- },
- {
- "type": "select",
- "id": "height",
- "label": "Section height",
- "default": "use_screen_two_thirds",
- "options": [
- { "value": "use_screen_full", "label": "Full screen height"},
- { "value": "use_screen_two_thirds", "label": "Tall"},
- { "value": "use_screen_one_half", "label": "Medium"},
- { "value": "use_screen_one_third", "label": "Short"},
- { "value": "use_image", "label": "Image height"}
- ]
- }
- ],
- "blocks": [
- {
- "type": "image",
- "name": "Image slide",
- "settings": [
- {
- "type": "image_picker",
- "id": "image",
- "label": "Background image",
- "info": "Match size to other slides"
- },
- {
- "type": "range",
- "id": "overlay_opacity",
- "min": 0,
- "max": 100,
- "step": 5,
- "label": "Image overlay opacity",
- "info": "Increase contrast for legible text.",
- "default": 15
- },
- {
- "type": "header",
- "content": "Text"
- },
- {
- "type": "text",
- "id": "title",
- "label": "Headline",
- "default": "Image slide"
- },
- {
- "type": "textarea",
- "id": "description",
- "label": "Description",
- "default": "Tell your brand's story through images."
- },
- {
- "type": "select",
- "id": "text_align",
- "label": "Alignment",
- "default": "text-center",
- "options": [
- { "value": "text-left", "label": "Align Left"},
- { "value": "text-center", "label": "Align Center"},
- { "value": "text-right", "label": "Align Right"}
- ]
- },
- {
- "type": "select",
- "id": "color",
- "label": "Text color",
- "default": "homepage--white",
- "options": [
- { "value": "homepage--white", "label": "White"},
- { "value": "homepage--light", "label": "Light"},
- { "value": "homepage--splash", "label": "Accent"},
- { "value": "homepage--dark", "label": "Dark"}
- ]
- },
- {
- "type": "header",
- "content": "Button"
- },
- {
- "type": "text",
- "id": "link_text",
- "label": "Text",
- "default": "View products",
- "info": "Leave blank to link entire image"
- },
- {
- "type": "url",
- "id": "link",
- "label": "Link"
- },
- {
- "type": "select",
- "id": "button_style",
- "label": "Button style",
- "default": "btn btn--large btn--clear btn--square uppercase",
- "options": [
- { "value": "btn btn--large btn--splash uppercase", "label": "Round"},
- { "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
- { "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
- { "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
- { "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
- ]
- },
- {
- "type": "header",
- "content": "Button image (optional)"
- },
- {
- "type": "image_picker",
- "id": "button_image",
- "label": "Button image",
- "info": "1000 x 1000px .png max"
- }
- ]
- }
- ],
- "presets": [{
- "name": "Slideshow",
- "category": "Image",
- "settings": {
- "height": "use_screen_two_thirds"
- },
- "blocks": [
- {
- "type": "image"
- },
- {
- "type": "image"
- }
- ]
- }]
- }
- {% endschema %}
Add Comment
Please, Sign In to add comment