Image with Text block FULL width on Studio Theme

Shopify Discussion

Topic summary

A user wants to make specific “Image with Text” blocks full width on the Shopify Studio theme, while keeping others at their default width.

Initial Solution Proposed:

  • Target the specific section using its unique ID (format: “shopify-section-template–xxxxxxxxx”)
  • Add custom CSS to theme.liquid or a CSS file
  • Use max-width: 100% and remove padding to achieve full width
  • This approach ensures only targeted sections are affected, not all image-with-text blocks

Current Status:
A second user reports the proposed CSS solution does not work with the Studio theme specifically. The discussion remains open with no working solution yet identified for this particular theme.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello, I want to make only certain block of image and text full width- as you can see the below screen shot is not full width. I do not want all of the image and text to be full width only certain ones. Is there a custom CSS code for a block only ? I want to make sure it will only affect the images with text that I want though, not all of them. Store link is https://admin.shopify.com/store/skillful-start/themes/135169474736/editor?category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FLayout%3Ftheme_id%3D135169474736%26first_setting_id%3Dpage_width&section=template–16694202073264__image_with_text_8hmpBx

Screenshot 2024-04-01 at 2.41.31 PM.png
Screenshot 2024-04-01 at 2.41.31 PM.png2898×1224 300 KB

2

Hi @SKILLFULSTART

To make a specific “Image with text” section full width in Shopify without affecting other instances of the section, you can use custom CSS targeting that section’s unique ID.

Here’s how to do it:

(As I don’t know what your theme is, you may need to adapt some of the information I give you)

  1. In the Shopify theme editor, open the specific “Image with text” section you want to make full width.

  2. Look for the section’s unique ID. It will be in the format “shopify-section-template–xxxxxxxxx”. Copy this ID.

  3. In the theme editor, open the “theme.liquid” file under the “Layout” folder.

  4. Inside the tag, add the following block with your custom CSS:

(You can also copy this css code into a css file. Example : base.css with Dawn theme)

Replace “shopify-section-template–xxxxxxxxx” with the unique section ID you copied in step 2.

“.image-with-text” is an example, you will have to replace with the rigtht class.

  1. Save the changes.

This CSS code will:

  • Target only the specific “Image with text” section using its unique ID
  • Set the max-width to 100% to make it full width
  • Remove the left and right padding to extend it to the edges of the page

By using the section’s unique ID in the CSS selector, you ensure that the styling only applies to that specific section instance and doesn’t affect other “Image with text” sections on your site.

If you want to add this CSS to additional “Image with text” sections, repeat the process for each one, using their respective unique IDs in the CSS.

3

Hello, I’m using studio theme and this solution is not working. Any other suggestions?