Shopify - Slideshow diferenciados

slideshowdif.liquid

{% comment %}
** Slideshow - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

<div class="mobile">
{% if section.settings.wide_display == false %}
<div class="container">
  <div class="sixteen columns">
{% endif %}

{% if section.blocks.size > 0 %}
  <section  id="homepage_slider-{{section.id}}"
        class="banner homepage-slideshow js-homepage-slideshow slideshow_animation--{{ section.settings.slideshow_animation }} {% if section.settings.slideshow_text_animation != '' %}text-animation--true{% else %}text-animation--false{% endif %} transparentBackground--{{settings.slideshow_button_style}}
        full-width--{{ section.settings.wide_display }}"
        data-slider-id="homepage_slider-{{section.id}}"
        data-slideshow-speed="{{section.settings.slideshow_speed}}"
        data-slideshow-text-animation="{{section.settings.slideshow_text_animation}}"
        data-adaptive-height="{{section.settings.activate_adaptiveHeight}}"
        >
    {% for block in section.blocks %}
        <div class="gallery-cell slide-{{ forloop.index }}" {{ block.shopify_attributes }} data-block-id="{{block.id}}">
        {% if block.settings.image != nil %}
          {% include 'image-element', image: block.settings.image_m, alt: block.settings.image_m.alt, stretch_width: true %}
        {% else %}
          {% capture i %}{% cycle "1", "2" %}{% endcapture %}
          {{ 'lifestyle-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--slideshow' }}
        {% endif %}
          {% unless block.settings.button1_link != blank and block.settings.button2_link != blank %}
            {% if block.settings.button1_link != blank and block.settings.button1 == blank %}
              <a href="{{ block.settings.button1_link }}" class="banner-full-link">
                {{ block.settings.title }}
              </a>
            {% elsif block.settings.button2_link != blank and block.settings.button2 == blank %}
              <a href="{{ block.settings.button2_link }}" class="banner-full-link">
                {{ block.settings.title }}
              </a>
            {% endif %}
          {% endunless %}
          {% unless block.settings.pretext == blank and block.settings.title == blank and block.settings.subtitle == blank and block.settings.button1 == blank and block.settings.button2 == blank %}
            <div class="caption position-{{block.settings.text_position}} js-caption">
                <div class="caption-content
                            caption-background-{{block.settings.caption_background}}
                            caption-transparency-{{ block.settings.caption_background_transparency }}
                            align-{{block.settings.text_align}}">
                  {% if block.settings.pretext != blank %}
                    <div class="pretext">
                      {{ block.settings.pretext }}
                    </div>
                  {% endif %}
                  {% if forloop.first == true and block.settings.title != blank %}
                    <h1 class="headline">
                      {{ block.settings.title }}
                    </h1>
                  {% elsif block.settings.title != blank %}
                    <p class="headline">
                      {{ block.settings.title }}
                    </p>
                  {% endif %}
                  {% if block.settings.subtitle != blank %}
                    <div class="subtitle">
                      {{ block.settings.subtitle }}
                    </div>
                  {% endif %}
                  {% if block.settings.button1 != blank %}
                    <a {% if block.settings.button1_link != blank %}href="{{ block.settings.button1_link }}"{% endif %} class="action_button first_button highlight-{{block.settings.button1_highlight}}">
                      {{ block.settings.button1 }}
                    </a>
                  {% endif %}
                  {% if block.settings.button2 != blank %}
                    <a {% if block.settings.button2_link != blank %}href="{{ block.settings.button2_link }}"{% endif %} class="action_button second_button highlight-{{block.settings.button2_highlight}}">
                      {{ block.settings.button2 }}
                    </a>
                  {% endif %}
                </div>
              </div>
          {% endunless %}
        </div>
    {% endfor %}
  </section>
{% endif %}

{% if section.settings.wide_display == false %}
  </div>
</div>
{% endif %}
</div>





<div class="desktop">
{% if section.settings.wide_display == false %}
<div class="container">
  <div class="sixteen columns">
{% endif %}

{% if section.blocks.size > 0 %}
  <section  id="homepage_slider-{{section.id}}"
        class="banner homepage-slideshow js-homepage-slideshow slideshow_animation--{{ section.settings.slideshow_animation }} {% if section.settings.slideshow_text_animation != '' %}text-animation--true{% else %}text-animation--false{% endif %} transparentBackground--{{settings.slideshow_button_style}}
        full-width--{{ section.settings.wide_display }}"
        data-slider-id="homepage_slider-{{section.id}}"
        data-slideshow-speed="{{section.settings.slideshow_speed}}"
        data-slideshow-text-animation="{{section.settings.slideshow_text_animation}}"
        data-adaptive-height="{{section.settings.activate_adaptiveHeight}}"
        >
    {% for block in section.blocks %}
        <div class="gallery-cell slide-{{ forloop.index }}" {{ block.shopify_attributes }} data-block-id="{{block.id}}">
        {% if block.settings.image != nil %}
          {% include 'image-element', image: block.settings.image, alt: block.settings.image.alt, stretch_width: true %}
        {% else %}
          {% capture i %}{% cycle "1", "2" %}{% endcapture %}
          {{ 'lifestyle-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--slideshow' }}
        {% endif %}
          {% unless block.settings.button1_link != blank and block.settings.button2_link != blank %}
            {% if block.settings.button1_link != blank and block.settings.button1 == blank %}
              <a href="{{ block.settings.button1_link }}" class="banner-full-link">
                {{ block.settings.title }}
              </a>
            {% elsif block.settings.button2_link != blank and block.settings.button2 == blank %}
              <a href="{{ block.settings.button2_link }}" class="banner-full-link">
                {{ block.settings.title }}
              </a>
            {% endif %}
          {% endunless %}
          {% unless block.settings.pretext == blank and block.settings.title == blank and block.settings.subtitle == blank and block.settings.button1 == blank and block.settings.button2 == blank %}
            <div class="caption position-{{block.settings.text_position}} js-caption">
                <div class="caption-content
                            caption-background-{{block.settings.caption_background}}
                            caption-transparency-{{ block.settings.caption_background_transparency }}
                            align-{{block.settings.text_align}}">
                  {% if block.settings.pretext != blank %}
                    <div class="pretext">
                      {{ block.settings.pretext }}
                    </div>
                  {% endif %}
                  {% if forloop.first == true and block.settings.title != blank %}
                    <h1 class="headline">
                      {{ block.settings.title }}
                    </h1>
                  {% elsif block.settings.title != blank %}
                    <p class="headline">
                      {{ block.settings.title }}
                    </p>
                  {% endif %}
                  {% if block.settings.subtitle != blank %}
                    <div class="subtitle">
                      {{ block.settings.subtitle }}
                    </div>
                  {% endif %}
                  {% if block.settings.button1 != blank %}
                    <a {% if block.settings.button1_link != blank %}href="{{ block.settings.button1_link }}"{% endif %} class="action_button first_button highlight-{{block.settings.button1_highlight}}">
                      {{ block.settings.button1 }}
                    </a>
                  {% endif %}
                  {% if block.settings.button2 != blank %}
                    <a {% if block.settings.button2_link != blank %}href="{{ block.settings.button2_link }}"{% endif %} class="action_button second_button highlight-{{block.settings.button2_highlight}}">
                      {{ block.settings.button2 }}
                    </a>
                  {% endif %}
                </div>
              </div>
          {% endunless %}
        </div>
    {% endfor %}
  </section>
{% endif %}

{% if section.settings.wide_display == false %}
  </div>
</div>
{% endif %}
</div>



{% schema %}

{
  "name": "Slideshow",
  "class": "slideshow-section under-menu",
  "settings": [
    {
      "type": "checkbox",
      "id": "wide_display",
      "label": "Wide display",
      "default": true
    },
    {
      "type": "select",
      "id": "slideshow_text_animation",
      "label": "Text animation",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade In"
        },
        {
          "value": "fadeInUp",
          "label": "Fade Up"
        },
        {
          "value": "fadeInDown",
          "label": "Fade Down"
        }
      ],
      "default": "fadeInDown"
    },
    {
      "type": "select",
      "id": "slideshow_animation",
      "label": "Gallery transition",
      "options": [
        {
          "value": "slide",
          "label": "Slide"
        },
        {
          "value": "fade",
          "label": "Fade"
        }
      ],
      "default": "slide"
    },
    {
      "type": "range",
      "id": "slideshow_speed",
      "label": "Change slides every",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 6,
      "unit": "sec"
    },
    {
      "type": "checkbox",
      "id": "activate_adaptiveHeight",
      "label": "Enable adaptive height",
      "info": "Slideshow will adjust based on height of individual slides"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image Desktop",
          "info": "1600 x 1000px recommended"
        },
		{
          "type": "image_picker",
          "id": "image_m",
          "label": "Image Mobile",
          "info": "1600 x 1000px recommended"
        },
        {
          "type": "richtext",
          "id": "pretext",
          "label": "Preheading"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Your headline"
        },
        {
          "type": "richtext",
          "id": "subtitle",
          "label": "Subheading"
        },
        {
          "type": "select",
          "id": "text_position",
          "label": "Text position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "text_align",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "checkbox",
          "id": "caption_background",
          "label": "Display text background"
        },
        {
          "type": "checkbox",
          "id": "caption_background_transparency",
          "label": "Enable text background transparency"
        },
        {
          "type": "text",
          "id": "button1",
          "label": "First button label"
        },
        {
          "type": "url",
          "id": "button1_link",
          "label": "First slide link"
        },
        {
          "type": "checkbox",
          "id": "button1_highlight",
          "label": "Highlight first button"
        },
        {
          "type": "text",
          "id": "button2",
          "label": "Second button label"
        },
        {
          "type": "url",
          "id": "button2_link",
          "label": "Second slide link"
        },
        {
          "type": "checkbox",
          "id": "button2_highlight",
          "label": "Highlight second button"
        }
      ]
    }
  ],
  "presets": [{
    "name": "Slideshow",
    "category": "Image",
    "settings": {
    },
    "blocks": [
      {
        "type": "image",
        "settings": {
          "image": "",
          "title": "Turbo Shopify Theme",
          "subtitle": "",
          "text_align": "center"
        }
      },
      {
        "type": "image",
          "settings": {
          "image": "",
          "title": "",
          "subtitle": "",
          "text_align": "center"
        }
      }
    ]
  }]
}

{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Banner diferenciados mobile desktop para Turbo