Image with Text is a Shopify theme section in the Section Star library. Full width image with text grid. Super easy to configure.
About the Image with Text section
The "Image with Text" section is a versatile and visually appealing component designed for Shopify stores. This section allows you to pair an image with accompanying text, enhancing your storytelling capability while maintaining a clean and modern layout. Customize the typography, colors, and dimensions to blend seamlessly with the rest of your site's design.
Live demo
Use cases
- Product Showcase: Highlight the features of a new product with a compelling image and textual description.
- Brand Story: Use a captivating image and a brief write-up to narrate your brand's story, mission, or values.
- Promotions: Announce sales, special offers, or upcoming events with a visually appealing image and call-to-action button.
- Customer Testimonials: Show customer photos alongside their testimonials to add authenticity and build trust.
- Guides and Tutorials: Use instructional images paired with descriptive text to educate customers on how to use your products.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set settings for the grid
| Setting | Type | Default |
|---|---|---|
| Grid Spacing | Number | 25 |
| Grid Spacing (mobile) | Number | 10 |
| Grid Column Size | Select (50/50, 60/40, 40/60) | 1fr 1fr |
| Grid Vertical Alighment | Select (Top, Center, Bottom) | center |
Content
Set image and text for section
| Setting | Type | Default |
|---|---|---|
| Image Location | Select (Left, Right) | left |
| Mobile Image Location | Select (Top, Bottom) | top |
| Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 3:4, 9:16…) | 21 / 9 |
| Image Border Radius | Number | 5 |
| Subtle Shadow on Image | Checkbox | On |
| Image | Image | — |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Rich text | <p>Sample content</p> |
| Padding Top/Bottom | Number | 0 |
| Mobile Padding Top/Bottom | Number | 0 |
| Padding Left/Right | Number | 0 |
| Mobile Padding Left/Right | Number | 0 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Link Text | Inline rich text | Shop More |
| Link | URL | — |
| Open in New Tab | Checkbox | Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Image with Text”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.