Shopify Custom Image Text Design
Here I implemented Shopify Custom Image Text Design. Where you will full freedom to customize image text as your wish
To implement in your shopify store you should follow this step by step
1. Goto your shopify store.
Goto your shopify store. Then find online store and then click three dot then press edit code.
store > online store > edit code2. Find section folder
In section folder, you have to create a file name like "custom-image-text.liquid" then press enter.
3. Copy and paste the code
Copy and paste the code in that file and save
{% schema %}
{
"name": "My Image Text",
"settings": [
{
"type": "image_picker",
"id": "side-image",
"label": "Side Image"
},
{
"type": "select",
"id": "image-text-swipe",
"label": "Align",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "text",
"id": "heading-text",
"label": "Heading Text",
"default": "Heading"
},
{
"type": "text",
"id": "heading_text_size",
"label": "Heading text size",
"default": "30"
},
{
"type": "select",
"id": "heading_font_weight",
"label": "heading font weight",
"options": [
{
"label": "Extra Bold",
"value": "bolder"
},
{
"label": "Bold",
"value": "bold"
},
{
"label": "Normal",
"value": "500"
}
]
},
{
"type": "color",
"id": "text_color_heading",
"label": "Heading Text color",
"default": "#000000"
},
{
"type": "text",
"id": "subheading-text",
"label": "Sub Heading Text",
"default": "Sub Heading"
},
{
"type": "text",
"id": "subheading-text-size",
"label": "Sub Heading text size",
"default": "16"
},
{
"type": "select",
"id": "subheading_font_weight",
"label": "Sub heading font weight",
"options": [
{
"label": "Extra Bold",
"value": "bolder"
},
{
"label": "Bold",
"value": "bold"
},
{
"label": "Normal",
"value": "500"
}
],
"default": "500"
},
{
"type": "color",
"id": "subheading_text_color",
"label": "Sub Heading Text color",
"default": "#000000"
},
{
"type": "select",
"id": "header_justify",
"label": "Header section horizontal",
"options": [
{ "label": "Start", "value": "start" },
{ "label": "Center", "value": "center" },
{ "label": "End", "value": "end" }
]
},
{
"type": "select",
"id": "heading_text_align",
"label": "heading text align",
"options": [
{
"label": "Start",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "End",
"value": "right"
}
]
},
{
"type": "select",
"id": "header_align",
"label": "Header section vertical",
"options": [
{ "label": "Start", "value": "start" },
{ "label": "Center", "value": "center" },
{ "label": "End", "value": "end" }
]
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Shop Now"
},
{
"type": "text",
"id": "button_border_radius",
"label": "button_border_radius",
"default": "12"
},
{
"type": "text",
"id": "button_text_size",
"label": "Button text size",
"default": "12"
},
{
"type": "text",
"id": "button_horizontal_padding",
"label": "button_horizontal_padding",
"default": "30"
},
{
"type": "text",
"id": "button_vertical_padding",
"label": "button_vertical_padding",
"default": "15"
},
{
"type": "select",
"id": "button_font_weight",
"label": "Button font weight",
"options": [
{
"label": "Bold",
"value": "bold"
},
{
"label": "Normal",
"value": "500"
}
]
},
{
"type": "color",
"id": "hero-button-color",
"label": "Button Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "hero-button-hover-color",
"label": "hero-button-hover-color",
"default": "#D6D6D6"
},
{
"type": "color",
"id": "hero-button-text-color",
"label": "hero-button-text-color",
"default": "#000000"
},
{
"type": "color",
"id": "hero-button-text-hover-color",
"label": "hero-button-text-hover-color",
"default": "#000000"
}
],
"presets": [
{
"name": "My Image Text"
}
]
}
{% endschema %}
<section class=" page-width h-full">
<div class="flex
{% if section.settings.image-text-swipe == 'left' %}
flex-col md:flex-row
{% else %}
flex-col-reverse md:flex-row-reverse
{% endif %}
gap-16 h-full items-{{ section.settings.header_align }}"
>
<div class="w-full md:w-1/2 h-full">
<img
src="{{ section.settings.side-image | img_url: 'master' }}"
alt="{{ section.settings.side-image.alt }}"
height=""
width=""
class="min-h-[500px] w-full object-cover"
>
</div>
<div
class="w-full md:w-1/2 h-full flex mt-16 mb-20"
style="display: flex; flex-direction: column; justify-content: {{ section.settings.header_align }}; align-items: {{ section.settings.header_justify }};"
>
<div
style="text-align: {{ section.settings.heading_text_align }};"
>
<p style="margin-bottom: 4px; color: {{ section.settings.text_color_heading }}; font-size: {{ section.settings.heading_text_size }}px; font-weight: {{ section.settings.heading_font_weight }}">
{{ section.settings['heading-text'] }}
</p>
<p style="font-size: {{ section.settings.subheading_text_size }}px; font-weight: {{ section.settings.subheading_font_weight }}">
{{ section.settings['subheading-text'] }}
</p>
<div class="mt-16">
<a
href="{{ section.settings.button_link }}"
class="custom-hero__btn gradient duration-150"
style="font-size: {{ section.settings.button_text_size }}; background-color: {{ section.settings.hero-button-color}}; color: {{ section.settings.hero-button-text-color }}"
>
{{- section.settings.button_text -}}
</a>
</div>
</div>
</div>
</div>
</section>
<script async src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
<style>
.custom-hero__btn {
padding: {{ section.settings.button_vertical_padding }}px {{ section.settings.button_horizontal_padding }}px;
text-decoration: none;
font-weight: {{ section.settings.button_font_weight }};
border-radius: {{ section.settings.button_border_radius }}px;
}
.custom-hero__btn:hover {
background-color: {{ section.settings.hero-button-hover-color }} !important;
color: {{ section.settings.hero-button-text-hover-color }} !important;
}
</style>
4. Find the section
Goto to your theme and click on add section find out the named "
My Image Text"5. Not found it
If you don't find you should refresh the page. I hop should find it.
Predien