Shopify Image with Text

About this module

A two-column image-with-text section with adjustable image position and CTA — a Shopify staple.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-image-text, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-image-text` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-image-text{% if section.settings.image_position == 'right' %} mh-image-text--reverse{% endif %}">
     <div class="mh-image-text-media">
       {% if section.settings.image %}
         <img src="{{ section.settings.image | image_url: width: 1000 }}" alt="{{ section.settings.image.alt | escape }}" loading="lazy" width="1000" height="800" />
       {% else %}
         {{ 'collection-1' | placeholder_svg_tag }}
       {% endif %}
     </div>
     <div class="mh-image-text-copy">
       {% if section.settings.heading != blank %}
         <h2 class="mh-image-text-heading">{{ section.settings.heading }}</h2>
       {% endif %}
       {% if section.settings.text != blank %}
         <div class="mh-image-text-body">{{ section.settings.text }}</div>
       {% endif %}
       {% if section.settings.button_label != blank %}
         <a href="{{ section.settings.button_link | default: '#' }}" class="mh-image-text-btn">{{ section.settings.button_label }}</a>
       {% endif %}
     </div>
   </section>
   
   {% schema %}
   {
     "name": "MH Image + Text",
     "tag": "section",
     "settings": [
       { "type": "image_picker", "id": "image", "label": "Image" },
       { "type": "select", "id": "image_position", "label": "Image position", "options": [
         { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }
       ], "default": "left" },
       { "type": "text", "id": "heading", "label": "Heading", "default": "Our story" },
       { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Tell the story behind your brand here.</p>" },
       { "type": "text", "id": "button_label", "label": "Button label", "default": "Learn more" },
       { "type": "url", "id": "button_link", "label": "Button link" }
     ],
     "presets": [{ "name": "MH Image + Text", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.