{% comment %} Otto Slideshow Section {% endcomment %} {% comment %} Check for the existence of a visible slide. In some cases the full slider should be hidden if no slides are currently live. {% endcomment %} {% assign slideshow_is_visible = false %} {% assign slide_count = 0 %} {% for block in section.blocks %} {% capture placement_name %}{{ block.settings.placement_name | handle }}{% endcapture %} {% assign image_metafield = shop.metafields['otto-components'][placement_name].value %} {% if image_metafield != blank %} {% if image_metafield.visible == true or image_metafield.visible == null %} {% assign slideshow_is_visible = true %} {% assign slide_count = slide_count | plus: 1 %} {% endif %} {% endif %} {% endfor %} {% if slideshow_is_visible %}

{% for block in section.blocks %} {% comment %}Image Data{% endcomment %} {% capture placement_name %}{{ block.settings.placement_name | handle }}{% endcapture %} {% assign image_metafield = shop.metafields['otto-components'][placement_name].value %} {% assign has_mobile_image = image_metafield.has_mobile_image %} {% assign has_content = false %} {% if image_metafield.header_text != blank or image_metafield.subheader_text != blank or image_metafield.body_text != blank or image_metafield.button_text != blank or image_metafield.secondary_button_text != blank %} {% assign has_content = true %} {% endif %} {% comment %}Image Files{% endcomment %} {% assign image_file = shop.metafields['otto-files'][placement_name].value %} {% capture mobile_image_file_name %}{{ placement_name }}-mobile{% endcapture %} {% assign mobile_image_file = shop.metafields['otto-files'][mobile_image_file_name].value %} {% if image_metafield != blank %} {% if image_metafield.visible == true or image_metafield.visible == null %}

{% comment %}Image{% endcomment %} {% if image_metafield.link != blank %} {% endif %} ${{ image_metafield.alt }}$ {% if has_mobile_image and mobile_image_file != blank %} ${{ image_metafield.alt }}$ {% endif %} {% if image_metafield.link != blank %} {% endif %} {% comment %}Content{% endcomment %} {% if has_content %}

{% if image_metafield.header_text != blank %} <{{ section.settings.header_font_tag }} class="otto-slide-content__header"> {{- image_metafield.header_text -}} {% endif %} {% if image_metafield.subheader_text != blank %} <{{ section.settings.subheader_font_tag }} class="otto-slide-content__subheader"> {{- image_metafield.subheader_text -}} {% endif %} {% if image_metafield.body_text != blank %} <{{ section.settings.body_font_tag }} class="otto-slide-content__body"> {{- image_metafield.body_text -}} {% endif %} {% if image_metafield.button_text != blank or image_metafield.secondary_button_text != blank %}

{% if image_metafield.button_text != blank and image_metafield.link != blank %} {{- image_metafield.button_text -}} {% endif %} {% if image_metafield.secondary_button_text != blank and image_metafield.secondary_button_link != blank %} {{- image_metafield.secondary_button_text -}} {% endif %}

{% endif %}

{% endif %} {% endif %} {% endfor %}

{% comment %}Arrow Navigation{% endcomment %}

{% comment %}Dot Navigation{% endcomment %}

{% endif %} {% schema %} { "name": "Otto Slideshow", "settings": [ { "type": "header", "content": "Instructions" }, { "type": "paragraph", "content": "Start by going to the Otto app and creating Otto placements for each of your slides. i.e Slide #1, Slide #2, etc. Once created then add each placement as a block to this section using the 'Add Placement' button in the previous screen. Press 'Save' in the upper right corner to see the functioning slider." }, { "type": "header", "content": "Settings" }, { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": true }, { "type": "range", "id": "autoplay_speed", "min": 1, "max": 10, "step": 1, "unit": "s", "label": "Autoplay Speed", "default": 3 }, { "type": "header", "content": "Style" }, { "type": "range", "id": "slideshow_width_desktop", "min": 10, "max": 100, "step": 10, "unit": "%", "label": "Slideshow Desktop Width", "default": 100 }, { "type": "range", "id": "slideshow_width_mobile", "min": 10, "max": 100, "step": 10, "unit": "%", "label": "Slideshow Mobile Width", "default": 100 }, { "type": "number", "id": "slideshow_margin_top", "label": "Margin Top (px)", "default": 0 }, { "type": "number", "id": "slideshow_margin_bottom", "label": "Margin Bottom (px)", "default": 20 }, { "type": "header", "content": "Navigation" }, { "type": "checkbox", "id": "show_arrow_nav", "label": "Show Arrow Nav", "default": true }, { "type": "checkbox", "id": "show_dot_nav", "label": "Show Dot Nav", "default": true }, { "type": "color", "id": "nav_color", "label": "Navigation Color", "default": "#000000" }, { "type": "header", "content": "Fonts" }, { "type": "select", "id": "header_font_tag", "label": "Header Tag", "options": [ { "value": "h1", "label": "h1" }, { "value": "h2", "label": "h2" }, { "value": "h3", "label": "h3" }, { "value": "h4", "label": "h4" }, { "value": "h5", "label": "h5" }, { "value": "p", "label": "p" } ], "default": "h1" }, { "type": "number", "id": "header_font_size", "label": "Header Font Size (em)", "default": 2 }, { "type": "number", "id": "header_font_size_mobile", "label": "Header Mobile Font Size (em)", "default": 2 }, { "type": "select", "id": "subheader_font_tag", "label": "Subheader Tag", "options": [ { "value": "h1", "label": "h1" }, { "value": "h2", "label": "h2" }, { "value": "h3", "label": "h3" }, { "value": "h4", "label": "h4" }, { "value": "h5", "label": "h5" }, { "value": "p", "label": "p" } ], "default": "h2" }, { "type": "number", "id": "subheader_font_size", "label": "Subheader Font Size (em)", "default": 1 }, { "type": "number", "id": "subheader_font_size_mobile", "label": "Subheader Mobile Font Size (em)", "default": 1 }, { "type": "select", "id": "body_font_tag", "label": "Body Tag", "options": [ { "value": "h1", "label": "h1" }, { "value": "h2", "label": "h2" }, { "value": "h3", "label": "h3" }, { "value": "h4", "label": "h4" }, { "value": "h5", "label": "h5" }, { "value": "p", "label": "p" } ], "default": "p" }, { "type": "number", "id": "body_font_size", "label": "Body Font Size (em)", "default": 1 }, { "type": "number", "id": "body_font_size_mobile", "label": "Body Mobile Font Size (em)", "default": 1 }, { "type": "header", "content": "Content" }, { "type": "paragraph", "content": "All content is added directly in the Otto app. If a specific piece of content isn't set on a scheduled image then it won't display." }, { "type": "range", "id": "content_width", "min": 10, "max": 100, "step": 10, "unit": "%", "label": "Content Width", "default": 60 }, { "type": "color", "id": "content_background_color", "label": "Content Background Color" }, { "type": "color", "id": "content_text_color", "label": "Content Text Color", "default": "#000000" }, { "type": "color", "id": "mobile_content_background_color", "label": "Mobile Content Background Color" }, { "type": "color", "id": "mobile_content_text_color", "label": "Mobile Content Text Color", "default": "#000000" }, { "type": "select", "id": "content_horizontal_alignment", "label": "Content Horizontal Alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" }, { "type": "select", "id": "content_vertical_alignment", "label": "Content Vertical Alignment", "options": [ { "value": "top", "label": "Top" }, { "value": "center", "label": "Center" }, { "value": "bottom", "label": "Bottom" } ], "default": "center" }, { "type": "header", "content": "Button" }, { "type": "color", "id": "button_background_color", "label": "Button Background Color", "default": "#000000" }, { "type": "color", "id": "button_background_hover_color", "label": "Button Background Hover Color", "default": "#ffffff" }, { "type": "color", "id": "button_text_color", "label": "Button Text Color", "default": "#ffffff" }, { "type": "color", "id": "button_text_hover_color", "label": "Button Text Hover Color", "default": "#000000" } ], "blocks": [ { "type": "image", "name": "Placement", "settings": [ { "type": "text", "id": "placement_name", "label": "Placement Name", "info": "The placement name is the name provided in the Otto app. Once entered then Otto will automatically pull the scheduled image and content." } ] } ], "presets": [ { "name": "Otto Slideshow", "category": "Image" } ] } {% endschema %}

Guide

Developers

Download Code

Banner

Slideshow

Grid

Code Reference

Code Snippet