Customize image and text section.
Check DEMO store here 💻. Password: made4uo
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 %} |
3. Next, add this to the theme editor. Click "Customize theme", then add a section. Find the "Custom Image Text."
That's it.