Custom Section with images and text?

MistyM
Excursionist
14 0 5

Hi, I would like to add a custom section with images and overlying text.  I've done this with HTML and it has turned out exactly the way I wanted, but it requires coding and will not be easy for other people/employees without web experience to edit in the future.  I've attached an image showing how the page looks now using HTML for the images, and I would like to recreate this same exact thing using a custom section.  I know how to create a custom section, but it is blank and I can't figure out how to add content (images with text).  Can anyone help with this?

Ideally, I'd like to be able to select the images using a built-in search function in shopify (see pic) and then somehow be able to type on top of the image also within shopify.  I can deal with the text appearance, drop shadow, etc., but how do I get the rest of this in place?

 

custom.jpgimages.jpg

KetanKumar
Shopify Partner
20683 2144 7830

@MistyM 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DevsIT
Shopify Expert
45 2 9

Hi, can you share your store link?

We can help you.

Thanks,

Shahab

CEO, DevsiT

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on ce.shahabuddin@gmail.com regarding any help
Certified Shopify Expert | Skype : engr-shahabuddin | Whatsapp: +8801722574364
MistyM
Excursionist
14 0 5

Hello, thank you all for your offers of assistance!  The website is https://sampler-wine.myshopify.com/

 

0 Likes
KetanKumar
Shopify Partner
20683 2144 7830

@MistyM 

sorry your store is password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
MistyM
Excursionist
14 0 5

-deleted-

 

KetanKumar
Shopify Partner
20683 2144 7830

@MistyM 

sorry that

please don't share store login please removed details or change we need on frontend password ohpayp

please removed 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MistyM
Excursionist
14 0 5

Sorry, password has been changed but the frontend password remains the same - ohpayp

Please let me know what the next step is, and thank you once again!

KetanKumar
Shopify Partner
20683 2144 7830

@MistyM 

great thanks for update 

your have add wrong html code you have now used table format html 

can you please use div html 

https://codepen.io/tkdavid/pen/zpBPrO

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
MistyM
Excursionist
14 0 5

Hi , I'm sorry but I'm lost on what I'm meant to do.  I should explain that I have experience in HTML and front-end design so CSS is new to me.  What code am I meant to use, and where does it go?  Currently I have the following for the Custom Section but nothing appears on the screen, although an image picker is available.

<!-- ImageBlock section starts -->
<section class="ImageBlock">
<div class="container">
<div class="imageblock-outer">
</div>
</section>
<!-- ImageBlock section ends -->
{% schema %}
{
"name": "Image Block",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
}
],
"presets": [
{
"name": "ImageBlock",
"category": "CONTENT"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% end javascript %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

Here is the HTML I've used to create what is now on the page but this needs to be re-created in a custom section for other people to edit in the future.

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.osrc=x.src; x.src=a[i+2];}
}
</script>

 

<table width="1170" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="left"><a href="https://sampler-wine.myshopify.com/pages/our-stores" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Stores','','https://cdn.shopify.com/s/files/1/0559/3153/5555/t/6/assets/ourstores2.jpg?v=1623470237',1)"><img id="Our Stores" src="https://cdn.shopify.com/s/files/1/0559/3153/5555/t/6/assets/ourstores1.jpg?v=1623470228" alt="OUR STORES"></a></td>
<td align="right"><a href="https://sampler-wine.myshopify.com/pages/wine-club" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wine Club','','https://cdn.shopify.com/s/files/1/0559/3153/5555/t/6/assets/wineclub2.jpg?v=1623470254',1)"><img id="What's on sampling" src="https://cdn.shopify.com/s/files/1/0559/3153/5555/t/6/assets/wineclub1.jpg?v=1623470246" alt="What's on sampling"></a></td>
</tr>
</tbody>
</table>