How to add two columns that will hold two different sections

Store Design
, ,
1

Hello people.
I am trying to modify a page in Dawn to have a two column section that will allow me to house in column one a form created in Shopify Forms app and in the other column some images and text.

Note that Shopify Forms does not provide embed code so using that method will not work.

How do I create a section that has multi columns and that allows sections in the columns.

2 

{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'column' %}

xxxx

{% when '@app' %}
{% render block %}
{% endcase %}
{% endfor %}
{% endif %}

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "column",
      "name": "Column,
      "settings": [{}]
    },
    {
     "type": "@app"
    }
  ]
}
{% endschema %}
3

Hello @Stuartmm

You can do this by creating a tiny custom section that uses Shopify’s built-in “shopify:form” setting type for column one, and an image/text setting for column two. Here’s what to do next:

1. Create a new section file

In Online Store › Themes › Edit code, under sections/ click Add new section and name it two-column-form.liquid.

2. Paste in this boiler plate

{% if section.settings.form %} {% render 'shopify:form', form: section.settings.form %} {% endif %}
{{ section.settings.text }}
{% if section.settings.image %} {% endif %}

{% schema %}
{
“name”: “Two Column: Form + Content”,
“settings”: [
{
“type”: “shopify:form”,
“id”: “form”,
“label”: “Select your Form”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Right-column text”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Right-column image”
}
],
“presets”: [{ “name”: “Form + Text/Image Columns” }]
}
{% endschema %}

3. Add the section to your page

In the theme editor, open the template you want (for example custom page), click Add section, choose Two Column: Form + Content, then select your Shopify Form in column one and add text/images in column two.

4. Style as needed

Dawn already includes the .grid utility if you want to swap in a .grid grid–2-col wrapper. Or add your own CSS under assets/base.css to tweak spacing and responsiveness.