Unlock Custom Layouts: Mastering the 'Image with Text Block' in Shopify Themes

Hey everyone! Your friendly neighborhood Shopify expert here, fresh off diving into some great discussions on the Shopify Community forums. One topic that caught my eye recently, and frankly, comes up a lot, is how to get more control over those standard theme sections. Specifically, we had a fantastic thread started by @Shopify3000 asking about the “Image with Text Block” section. They wanted to know: how do you change the width and height of that text block, and even adjust the background image height to match other sections like the “Image with Text Overlay” (which gives you those handy small, medium, large options)?

It’s a super common design challenge, right? You’ve got a vision for your store, but the default settings don’t quite cut it. You want your text to breathe a bit more, or maybe you need to shorten that image to keep things consistent. The good news? The community came through with some really solid advice, and it largely boils down to a bit of custom CSS.

Taking Control with Custom CSS

As @faisaltech rightly pointed out, using Custom CSS in the section settings is definitely the cleanest route here. It allows you to target just that specific section without messing with your entire theme’s stylesheet, which is always a best practice for minor tweaks.

Our community member @Ploqo provided a fantastic, step-by-step guide, complete with screenshots, for stores using the Focal theme. While the specific class names might vary slightly depending on your theme, the general approach remains the same. Here’s how you can implement these changes:

Step-by-Step: Adjusting Your "Image with Text Block"

1. Go to your Shopify admin, navigate to Online Store > Themes.
2. Find your current theme and click the Customize button. This will open the theme editor.
3. 
4. In the left sidebar of the theme editor, click on your Image with text block section. You might need to scroll down to find it if it’s not immediately visible.
5. 
6. Scroll all the way down in the settings panel for that section until you see the Custom CSS box. Click it to expand.
7. 
8. Paste the following code into the Custom CSS box:

   @media screen and (min-width: 1000px) {
     .image-with-text-block {
       min-height: 400px;
     }
     .image-with-text-block__content {
       width: 600px;
       padding: 40px 48px;
       margin-block: 32px;
     }
   }

9. 
10. Click Save in the top right corner.
11. 

You should now see your changes reflected! Ploqo even shared a great before-and-after image showing a wider text box and a shorter image, which is exactly what Shopify3000 was asking for.

Breaking Down the CSS

Let’s quickly dissect that CSS snippet so you understand what’s happening:

• @media screen and (min-width: 1000px): This is a media query. It means these styles will only apply to screens that are 1000 pixels wide or more (i.e., desktop computers). As Ploqo noted, this means "Phones keep their current layout," which is often exactly what you want since stacked layouts on mobile are usually better.
• .image-with-text-block { min-height: 400px; }: This line directly addresses the image height. It sets a minimum height of 400 pixels for the entire section. Ploqo specifically mentioned that 400px matches the "Small" height option found in the "Image with text overlay" sections, which is a great way to ensure consistency across your page!
• .image-with-text-block__content { width: 600px; padding: 40px 48px; margin-block: 32px; }: This targets the text block itself.
  • width: 600px;: This is how you control the width of the text box. You can adjust this number to make it wider or narrower.
  • padding: 40px 48px;: This adds internal spacing around the text. The first value (40px) is for the top and bottom, and the second (48px) is for the left and right. Increasing the top/bottom padding will make the text box appear taller.
  • margin-block: 32px;: This sets the margin on the top and bottom of the content block, providing some external spacing.

Beyond the Code: UX and Mobile Considerations

While the CSS is your direct tool for making these visual changes, it’s crucial to remember the advice from @NoahMueller and @faisaltech. They brought up some really important points about user experience (UX) and mobile responsiveness that you absolutely can't overlook.

• Check the Reading Path: Noah stressed that it's not just about the section height. After you adjust the width, step back and consider the actual reading path for your customers. Does the text flow naturally? Is it easy to consume?
• Mobile Preview is Non-Negotiable: Both Noah and Faisal highlighted the importance of previewing on mobile. Even with the desktop-specific media query, the stacked layout on smaller screens can behave differently. Always check to ensure your heading, a supporting sentence, and any linked button are visible without the image pushing the call to action (CTA) too far down. Imagine a potential customer scrolling – is your key message and action button immediately accessible?
• Test with Real Content: Don't just test with placeholder text. Preview your changes with long titles, longer descriptions, and even translated copy if your store supports multiple languages. This helps catch unexpected layout breaks.
• Measure the Impact: This is where Noah's advice really shines. If this section is meant to drive traffic to a collection or product, compare your CTA clicks and the next-page add-to-cart rate before and after your changes. A wider text block or a shorter image is only a true win if it actually helps more shoppers reach the right product and ultimately convert. Don't just assume a visual change is an improvement; let your analytics tell the story!

So, there you have it! A perfect example of how a little custom CSS, combined with thoughtful UX considerations from the community, can give you the granular control you need to fine-tune your Shopify store's design. It’s all about making your store look great and perform even better. Happy customizing!