Hello, can anyone tell me how I can create a grid of 4 images with accompanying text, like the image below? Thanks
Topic summary
A user requested help creating a 4-image grid layout with accompanying text for their Shopify store.
Solution Provided:
- Create a new section file called
image-text-gridin the theme code - Add provided schema code that includes settings for heading, paragraph, and 4 image blocks
- Configure the section through the Customizer by uploading images and customizing text
Follow-up Issue:
The user successfully implemented the grid but encountered alignment problems with other sections on the page.
Alignment Fix:
Additional CSS code was provided to add to base.css, adjusting padding and grid gaps to align the section properly.
Current Status:
The discussion remains open as the user reported the layout still displays incorrectly at larger screen sizes (around 1292px and above), with an accompanying screenshot showing the issue. The responsive design problem at wider viewports has not yet been resolved.
1 Like
Hello @pimpaoclothing
- Go to Online Store > Themes > Edit code.
- Under Sections, click Add a new section → Name it image-text-grid.
- Paste the above code.
- In the Customizer, add the section to your homepage or any template.
- Upload 4 images using the block settings.
- Customize the heading & paragraph.
{% schema %}
{
"name": "Image Grid with Text",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Conforto, qualidade e carinho em cada detalhe."
},
{
"type": "textarea",
"id": "paragraph",
"label": "Paragraph",
"default": "As nossas roupinhas são feitas com tecidos macios e seguros, perfeitos para a pele sensível do seu bebê..."
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"max_blocks": 4,
"presets": [
{
"name": "Image Grid with Text",
"category": "Custom",
"blocks": [
{ "type": "image" },
{ "type": "image" },
{ "type": "image" },
{ "type": "image" }
]
}
]
}
{% endschema %}
Nice it work! Now how do I align this section with the others?
1 Like
Hello @pimpaoclothing
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.image-text-grid-section .container {
padding: 0;
}
.grid-content .image-grid {
grid-gap: 15px;
}
.image-text-grid-section {
padding: 10px 5rem;
}
