Two Images Side by Side w/ text inside each image - Daw

Store Design
, , ,
1

Hey all,

Apologies if this has been asked before.

On Dawn theme is it possible to have two images side by side with a text box inside them? I’m attaching a screenshot of the desire effect

Screen Shot 2023-07-11 at 1.06.55 PM.png
Screen Shot 2023-07-11 at 1.06.55 PM.png1592×786 228 KB

You can find my store here: https://88pyrt2m1v0dxrl1-6663602260.shopifypreview.com very much a work in progress.

If it’s not possible to add in vanilla version is there a way to add a new liquid file section to accomplish this?

Thank you!

2

@Ottodebac77

This is code customization work!

Thanks!

3

Got it, what actions should I take?

4

Hey @Ottodebac77

Yes, of course it is possible. It would require coding a custom section like that according to your requirements. If you’re not familiar with coding then I suggest you to hire a Shopify developer for you who can perform this task as it’s a task that is not only possible through CSS.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi,

Edit Code > Create a new section two-images-with-text.liquid > Add the HTML structure


  

    
    

      

{{ section.settings.text1 }}

    

  

  
    
    

      

{{ section.settings.text2 }}

modify an existing CSS file in the “Assets” and add following code

.two-images-with-text {
  display: flex;
  justify-content: space-between;
}

.image-box {
  width: 45%; /* Adjust the width as needed */
  position: relative;
}

.image-box img {
  width: 100%;
  height: auto;
}

.text-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8); /* Adjust the background color as desired */
  padding: 10px;
}

Save> Preview and publish

If want you can contact us for help details given at signature

6

Thanks, this is a great start. Where would I add in the photos to this code

7

Hiya, can you kindly expand on that? When I create a new liquid would that be in a the code and duplicate theme.liquid or would this be in the online store as a custom liquid? and can you specify where I would had the image?

thank you!