Section banner.html

{% if section.settings.frontpage_grid_style == false %}
  <div class="container">
    <div class="sixteen columns">
{% endif %}
    <div class="image-with-text
                featured_collections
                clearfix across-{{section.settings.featured_links_per_row}} image-align--{{ section.settings.frontpage_image_position }}
                full-width--{{ section.settings.frontpage_grid_style }}">
      {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
          <section class="featured-link--section featured-link--image section-{{ forloop.index }}" {{ block.shopify_attributes }}>
            <div class="featured-link--half featured-link--image featured-link--margin image-crop--{{ block.settings.image_crop }}">
              <div class="featured-link--wrap">
                <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} title="{{ block.settings.title }}">
                  {% if block.settings.image %}
                    {% include 'image-element', image: block.settings.image, alt: block.settings.image.alt %}
                  {% else %}
                    {% capture i %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
                    {{ 'collection-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--promotions' }}
                  {% endif %}
                </a>
              </div>
            </div>
            <div class="featured-link--half block--{{ block.id }}">
              <div class="info text-align--{{section.settings.frontpage_text_align}}">
                {% if block.settings.section-logo != blank %}
              {% include 'image-element', image: block.settings.section-logo %}
                {% endif %}
                {% if block.settings.text != blank %}
                  <div class="description">{{ block.settings.text }}</div>
                {% endif %}
                 <div class="sixteen columns omega">
                   <form action="{{ settings.mailchimp_link }}" method="post" name="mc-embedded-subscribe-form" id="contact_form" target="_blank">
                     <div>
                       <input type="email" id="contactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" required="required">
                       <button type="submit" id="emailsub"><img src="{{ "send.png" | asset_url }}"></button>
                     </div>
                   </form>
             </div>
              	<style>
                  #contactFormEmail{
                    display: inline;
                    border: none;
                    border-radius: 4px 0px 0px 4px;
                    width: 75%;
                  }
                  #emailsub{
                    display: inline;
                    margin-left: -5px;
                    background: white;
                    border-radius: 0px 4px 4px 0px;
                    color: black;
                    max-width: 15%;
                    padding-left: 25px;
                    padding-right: 25px;
                  }
                  #emailsub img{ max-width: 100%; }
                </style>
              </div>
            </div>
          </section>
        {% endfor %}
      {% endif %}
    </div>
{% if section.settings.frontpage_grid_style == false %}
    </div>
  </div>
{% endif %}

<style>

  {% for block in section.blocks %}
    .block--{{ block.id }} {
      background-color: {{ block.settings.bg_color }};
    }

    .block--{{ block.id }} .collection_title,
    .block--{{ block.id }} p {
      color: {{ block.settings.text_color }};
    }

    .block--{{ block.id }} a.button {
      color: {{ block.settings.text_color }};
      border-color: {{ block.settings.text_color }};
    }
  {% endfor %}

  {% if section.settings.frontpage_grid_style == false and section.settings.featured_links_per_row == '1' %}
      #shopify-section-{{ section.id }} .featured-link--section {
        margin-bottom: 3%;
      }
      @media only screen and (max-width: 480px) {
        #shopify-section-{{ section.id }} .featured-link--section {
          margin-bottom: 10%;
        }
      }

      #shopify-section-{{ section.id }} .featured-link--half {
        width: 45%;
      }
      #shopify-section-{{ section.id }} .featured-link--margin {
        {% if section.settings.frontpage_image_position == 'right' %}
          margin-left: 3%;
        {% else %}
          margin-left: 0;
          margin-right: 3%;
        {% endif %}
      }
      #shopify-section-{{ section.id }} .featured-link--section:nth-child(even) .featured-link--margin {
        {% if section.settings.frontpage_image_position == 'right' %}
          margin-left: 0;
          margin-right: 3%;
        {% else %}
          margin-left: 3%;
          margin-right: 0;
        {% endif %}
      }

    {% elsif section.settings.frontpage_grid_style == false and section.settings.featured_links_per_row == '2' %}

        @media only screen and (max-width: 480px) {
          #shopify-section-{{ section.id }} .featured-link--section {
            margin-bottom: 10%;
          }
        }

        #shopify-section-{{ section.id }} .featured-link--margin {
          margin-right: 0;
          margin-left: 0;
        }

        #shopify-section-{{ section.id }} .featured-link--section:nth-child(even) .featured-link--margin {
          margin-left: 0;
          margin-right: 0;
        }

      {% endif %}
</style>

{% schema %}
{
  "name": "Custom Image",
  "class": "image-with-text-section",
  "max_blocks": 1,
  "settings": [
    {
      "type": "checkbox",
      "id": "frontpage_grid_style",
      "label": "Wide display"
    },
  
    {
      "type": "select",
      "id": "frontpage_text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "frontpage_image_position",
      "label": "First image position",
      "info": "Subsequent images will appear staggered",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Custom Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1024 x 1024px recommended"
        },
          {
          "type": "image_picker",
          "id": "section-logo",
          "label": "Logo-Image"
        },
        {
          "type": "select",
          "id": "image_crop",
          "label": "Image cropping",
          "default": "none",
          "info": "Only applied when text area is taller than image.",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "none",
              "label": "None"
            }
          ]
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Enter your email to get started.</p>"
        },
       
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [{
    "name": "Custom Banner",
    "category": "Image",
   
    "blocks": [
      {
        "type": "image"
      }
    ]
  }]
}
{% endschema %}