How can I add a 3 column image section to my online store?

Store Design
, , ,
1

Hello, I would like to add a 3 column image section like this one to my shopify store:
https://eireoud.co.uk/ (GIFs are used in this example)

biznazz101_0-1686622087058.png
biznazz101_0-1686622087058.png2733×1579 298 KB

I am not sure what the best way to do this is, I know it will require some code. The store is loteandco.com and theme is “Jumpstart v8.0.3”

Any help would be very much appreciated thanks everyone!

1 Like
2

Hello @biznazz101

To create a 3-column image section in Shopify using schema, you can follow these steps:

1.In your Shopify admin, go to “Online Store” and then “Themes.”
2.Locate and click on the “Actions” dropdown for your active theme, and select “Edit code.”
3.In the code editor, navigate to the “Sections” folder and find the file where you want to add the 3-column image section, or create a new section file if needed (e.g., create a file named “image-section.liquid”).
4.In the section file, add the following code to create a new schema for the 3-column image section:

{% schema %}
{
  "name": "3 Column Image Section",
  "settings": [],
  "blocks": [
    {
      "type": "image",
      "name": "Column 1",
      "settings": [
        {
          "type": "image_picker",
          "label": "Image",
          "id": "image_1"
        }
      ]
    },
    {
      "type": "image",
      "name": "Column 2",
      "settings": [
        {
          "type": "image_picker",
          "label": "Image",
          "id": "image_2"
        }
      ]
    },
    {
      "type": "image",
      "name": "Column 3",
      "settings": [
        {
          "type": "image_picker",
          "label": "Image",
          "id": "image_3"
        }
      ]
    }
  ]
}
{% endschema %}

5.Save the changes to the section file.
6.Next, go to the “Snippets” folder and create a new snippet file named “image-section.liquid” or similar.
7.In the snippet file, add the following code to display the 3-column image section:

{% for block in section.blocks %}
  
    
  

{% endfor %}

8.Save the changes to the snippet file.
9.Go back to your desired page or template file (e.g., homepage or product page) where you want to display the 3-column image section.
10.Add the section to your desired location by including the following code:

{% section 'image-section' %}

11.Save the changes to the page or template file.
12.Preview your store and customize the images for each column in the theme editor. The 3-column image section will display the selected images in a responsive 3-column layout.

You can customize the CSS styles for the .image-column class to adjust the appearance of the image columns according to your design preferences.

Remember to clear your theme cache if you don’t see the changes immediately.

3

I ended up using a custom HTML section to create it, but this is useful information, I appreciate the help!

4

could you please share this HTML code? I’m doing the same section

5

It shows error while adding a section code: “Invalid block ‘image’: type is already taken”, if use different names in type is saves but the new error appears when I add code to the template: “This code has errors. Correct the syntax to save your custom Liquid.”