Advanced Image with text sections
Theme > Edit Code > Sections > Create section (name.liquid) > Add the code below:
—————————————————————————————————————————
{% style %}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__wrapper {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: {{ section.settings.container_max_width }}px;
margin: {{ section.settings.margin_top }}px auto {{ section.settings.margin_bottom }}px;
padding: {{ section.settings.padding_top }}px 1rem {{ section.settings.padding_bottom }}px;
flex-direction: {% if section.settings.image_position == 'right' %}row-reverse{% else %}row{% endif %};
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__img {
flex: 1 1 50%;
max-width: {{ section.settings.image_max_width }}%;
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__img img {
width: 100%;
height: auto;
border-radius: {{ section.settings.image_radius }}px;
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content {
flex: 1 1 50%;
text-align: {{ section.settings.text_align }};
color: {{ section.settings.text_color }};
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content h1,
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content h2,
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content h3 {
color: {{ section.settings.heading_color }};
margin-bottom: 0.5em;
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content .rte {
margin-top: 0.5em;
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__button {
display: inline-block;
margin-top: 1.2rem;
padding: 0.6rem 1.4rem;
background: {{ section.settings.button_bg_color }};
color: {{ section.settings.button_text_color }};
text-decoration: none;
border-radius: 4px;
}
@media screen and (max-width: 768px) {
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__wrapper {
flex-direction: column !important;
}
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__img,
#ImageWithTextAdvanced-{{ section.id }} .image-with-text-advanced__content {
max-width: 100%;
flex: 1 1 100%;
}
}
{% endstyle %}
<div id="ImageWithTextAdvanced-{{ section.id }}">
<div class="image-with-text-advanced__wrapper">
<div class="image-with-text-advanced__img">
{% if section.settings.image %}
<img
src="{{ section.settings.image | img_url: 'master' }}"
alt="{{ section.settings.image_alt | escape }}">
{% endif %}
</div>
<div class="image-with-text-advanced__content">
{% if section.settings.heading %}
<{{ section.settings.heading_tag }}>{{ section.settings.heading }}</{{ section.settings.heading_tag }}>
{% endif %}
<div class="rte">
{{ section.settings.text }}
</div>
{% if section.settings.button_text and section.settings.button_link %}
<a href="{{ section.settings.button_link }}" class="image-with-text-advanced__button">
{{ section.settings.button_text }}
</a>
{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "Image with Text Advanced",
"tag": "section",
"class": "image-with-text-advanced",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "image_alt",
"label": "Image Alt Text",
"default": "Descriptive image alt text"
},
{
"type": "select",
"id": "image_position",
"label": "Image Position",
"default": "left",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "range",
"id": "image_radius",
"label": "Image Border Radius (px)",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "image_max_width",
"label": "Max Image Width (%)",
"min": 30,
"max": 100,
"step": 5,
"default": 100
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading Tag",
"default": "h2",
"options": [
{ "value": "h1", "label": "H1" },
{ "value": "h2", "label": "H2" },
{ "value": "h3", "label": "H3" }
]
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Block Heading"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#111111"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>This is a flexible block with image and rich text content.</p>"
},
{
"type": "select",
"id": "text_align",
"label": "Text Alignment",
"default": "left",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#333333"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Learn More"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "container_max_width",
"label": "Content Max Width (px)",
"min": 800,
"max": 1600,
"step": 100,
"default": 1200
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top (px)",
"min": 0,
"max": 100,
"step": 1,
"default": 48
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom (px)",
"min": 0,
"max": 100,
"step": 1,
"default": 48
},
{
"type": "range",
"id": "margin_top",
"label": "Margin Top (px)",
"min": 0,
"max": 100,
"step": 1,
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"label": "Margin Bottom (px)",
"min": 0,
"max": 100,
"step": 1,
"default": 0
}
],
"presets": [
{
"name": "Image with Text Advanced",
"category": "Content"
}
]
}
{% endschema %}