Custom Image and Text Section

Custom Image and Text Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

 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.

Copied!
Back to blog

Leave a comment