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

Store Design
, , ,

Topic summary

Goal: place two side‑by‑side images in Shopify’s Dawn theme, each with text overlaid inside the image.

  • Feasibility: Not available as a built‑in section; requires custom coding. Pure CSS alone won’t achieve it; a custom Liquid section plus CSS is needed.

  • Proposed approach: Create a new section (two-images-with-text.liquid), add HTML for two image boxes with text containers, and add CSS for a flex two‑column layout and absolute‑positioned text overlay. Save, preview, and publish.

  • Implementation details shared: HTML references section.settings.text1 and text2 for the overlay text. CSS sets .two-images-with-text as flex, .image-box at ~45% width, and .text-box with semi‑transparent background over the image.

  • Open questions (unanswered):
    • Where to add/select the actual images in the section code (e.g., image pickers in section settings).
    • Whether to create the new section via “Edit code” (as a section) vs duplicating theme.liquid or using an Online Store “Custom Liquid” block, and precise steps to add images.

  • Notes: A screenshot illustrates the desired layout; the provided code snippet is central. Dawn is Shopify’s default theme; Liquid is Shopify’s templating language; CSS handles layout/overlays.

  • Status: Guidance provided; clarification pending, no final resolution yet.

Summarized with AI on December 30. AI used: gpt-5.
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!