Custom Image and Text Section

March 15, 2022

Compatibility: All Shopify Theme (design might vary).

Personalized your website with a customize image and text section.

You can check the demo store h e re. Password: made4uo

What you are buying:

Custom image and text section

What makes our code better:

We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
We do not leave or add codes use to advertise for our website
Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start:

1. We have to add a section, so lets go to our code editor. In your shopify admin store, open themes, then click "Actions", then "Edit code".

2. Open the Sections folder, and add a new file. Name it whatever you like. Then paste the code below.

<div
  class="customImageText {{section.settings.section_layout}}"
  style="
    background-color: {{section.settings.background_color}};
    padding-top: {{section.settings.padding_top | append: 'px' }};
    padding-bottom: {{section.settings.padding_bottom | append: 'px' }}
  "
>
  <div class="customImage">
    {%- if section.settings.image != blank -%}
      <img
        srcset="
          {%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w
        "
        src="{{ section.settings.image | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
        alt="{{ section.settings.image.alt | escape }}"
        loading="lazy"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
  </div>
  <div
    class="customText"
    style="
      align-items: {{section.settings.desktop_content_alignment}};
      justify-content: {{section.settings.desktop_content_position}}
    "
  >
    {%- for block in section.blocks -%}
      {% case block.type %}
        {%- when 'heading' -%}
          <h2 class="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
            {{ block.settings.heading | escape }}
          </h2>
        {%- when 'caption' -%}
          <p
            class="customText--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
            {{ block.shopify_attributes }}
          >
            {{ block.settings.caption | escape }}
          </p>
        {%- when 'text' -%}
          <div
            class="customText--content {{ block.settings.text_style }}"
            style="
              {% case section.settings.desktop_content_alignment %}
              {% when 'flex-start' %}
              text-align: left;
              {% when 'center' %}
              text-align: center;
              {% when 'flex-end' %}
              text-align: right;
              {% endcase %}
            "
            {{ block.shopify_attributes }}
          >
            {{ block.settings.text }}
          </div>
        {%- when 'button' -%}
          {%- if block.settings.button_label != blank -%}
            <a
              {% if block.settings.button_link == blank %}
                role="link" aria-disabled="true"
              {% else %}
                href="{{ block.settings.button_link }}"
              {% endif %}
              class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
              {{ block.shopify_attributes }}
            >
              {{ block.settings.button_label | escape }}
            </a>
          {%- endif -%}
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>
<style>
.customImageText {
  width: 100%;
  height: max-content;
  display: flex;
}
.customImage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.customText {
  display: flex;
  flex-direction: column;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}
.customText--caption {
  margin: 0;
}
@media only screen and (min-width: 750px) {
  .customImage {
    width: 100%;
  }
  .customText {
    width: calc((100%) * 8 / 12);
  }
  .image-first {
    flex-direction: row;
  }
  .text-first {
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 749px) {
  .customImageText {
    flex-direction: column;
  }
  .customImage {
    width: 100%;
  }
  .customText {
    width: 100%;
  }
}
</style>
{% schema %}
{
  "name": "Custom Image Text",
  "class": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "desktop_image_width",
      "options": [
        {
          "value": "small",
          "label": "small"
        },
        {
          "value": "medium",
          "label": "medium"
        },
        {
          "value": "large",
          "label": "large"
        }
      ],
      "default": "medium",
      "label": "Desktop image width"
    },
    {
      "type": "select",
      "id": "section_layout",
      "options": [
        {
          "value": "image-first",
          "label": "Image first"
        },
        {
          "value": "text-first",
          "label": "Text first"
        }
      ],
      "default": "image-first",
      "label": "Image and text layout"
    },
    {
      "type": "header",
      "content": "Section text layout"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "flex-start",
          "label": "top"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "value": "flex-end",
          "label": "bottom"
        }
      ],
      "default": "flex-start",
      "label": "Content position",
      "info": "Position is base on available space"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "left"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "value": "flex-end",
          "label": "right"
        }
      ],
      "default": "flex-start",
      "label": "Content alignment"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#eee",
      "label": "Background color"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "heading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Section title"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "small"
            },
            {
              "value": "h1",
              "label": "medium"
            },
            {
              "value": "h0",
              "label": "large"
            }
          ],
          "default": "h1",
          "label": "Title font size"
        }
      ]
    },
    {
      "type": "caption",
      "name": "caption",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "caption",
          "default": "Add a tagline",
          "label": "Caption"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "subtitle",
              "label": "subtitle"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "caption with letter spacing"
            }
          ],
          "default": "caption-with-letter-spacing",
          "label": "Caption text style"
        },
        {
          "type": "select",
          "id": "text_size",
          "options": [
            {
              "value": "small",
              "label": "small"
            },
            {
              "value": "medium",
              "label": "medium"
            },
            {
              "value": "large",
              "label": "large"
            }
          ],
          "default": "medium",
          "label": "Caption font size"
        }
      ]
    },
    {
      "type": "text",
      "name": "content",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Section content"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "body"
            },
            {
              "value": "subtitle",
              "label": "subtitle"
            }
          ],
          "default": "body",
          "label": "Text style"
        }
      ]
    },
    {
      "type": "button",
      "name": "section button",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Image Text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}