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

Ottodebac77
New Member
8 0 0

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

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! 

Replies 5 (5)

dmwwebartisan
Shopify Partner
12291 2547 3698

@Ottodebac77 

This is code customization work!

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ottodebac77
New Member
8 0 0

Got it, what actions should I take?

Moeed
Shopify Partner
3697 932 1166

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Small_Task_Help
Shopify Partner
314 9 22

Hi,

 

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

 

<div class="two-images-with-text">
  <div class="image-box">
    <img src="{{ section.settings.image1 }}" alt="Image 1">
    <div class="text-box">
      <p>{{ section.settings.text1 }}</p>
    </div>
  </div>
  <div class="image-box">
    <img src="{{ section.settings.image2 }}" alt="Image 2">
    <div class="text-box">
      <p>{{ section.settings.text2 }}</p>
    </div>
  </div>
</div>

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 

Click here to Contact and Get Shopify Store Help
E-mail - hi@shopifysmalltask.com
We are Shopify Store Small Tasks and Customization Experts
rabut1741
Visitor
1 0 0

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