embed a contact form (page.contact.liquid) into Brooklyn theme home page

Highlighted
New Member
2 0 2

Hi there, 

looking for some help to add the built in page.contact template form into my Brooklyn themed homepage (after the slide images.

I know how to create a new page (Contact Us) and use the page.contact as a template, this works well, but I would also like to add the same form into my home page - I don't know if i need a piece of code or how to get this working.  Any help is appreciated.

thanks!

1 Like
Highlighted
Shopify Staff
Shopify Staff
630 16 197

Hi there Zazzazara,

 

Liam here from Shopify - thank you for your question :)

 

Great to see you are looking to set up your home page exactly how you would like, so let's see how you can add the contact form to your home page. It is possible to recreate the form on the contact page template to the home page, but it will require some creative coding. If this is not something that you're fully comfortable with, I'd recommend contacting a Shopify Expert here, who could add a contact form as a store customization. 

 

If you would like to try your hand at this process, I will outline how I would approach this below. Before you attempt this do make sure you have created a back-up of your theme, so you can roll-back to a previous version if you run into any issues. 

 

1. First, in the code editor of the Shopify admin you'll want to create a new file within the section directory, called contact.liquid. When you create this file you'll see that the editor will autopopulate the file with some Liquid tags. The {% schema %} tags will be important later. 

 

2. Next, we'll look for the the page.contact template file in the theme's template folder. We'll need to copy all the code here and paste it into our newly created  contact.liquid section file. We'll be pasting this above the opening {% schema %} tag which was autopopulated during step 1. Now we can save this file. 

 

3. This is currently a static section file, and we need to tell the theme editor that this should be a selectable section that can be added to the home page. To do this we need to add presets within the `{% schema %}` tags. As an example, if you look at other section files of your theme, eg: newsletter.liquid, you will often see how these presets are arranged within the file. 

 

To keep this as simple as possible, we don't need to include any translation elements. A title for your section should be assigned within the `{% schema %}` and presets should be added which tell the theme editor which category this section belongs do and what it is called. This should look something like:

 

{% schema %}
   {
    "name": "Contact form",
    "settings": [],
    "presets": [
    {
      "name": "Contact form",
      "category": "Promotional"
    }
  ]

  }
{% endschema %}

Once you have edited the schema settings and included the presets as above, you can save the file. You will not need to adjust anything within the `{% stylesheet %}` or `{% javascript %}` tags. 

 

4. If all this has worked, then you should be able to navigate to the theme customizer and on the home page, when you click on Add section, you should see an option for contact form under the Promotions category. When I try this out, this is what I'm seeing: https://screenshot.click/Monosnap_file_47gn0.mp4

 

5. If you want to add a heading, or other content to this section, you can go back into the code for the contact.liquid file and add them in manually with HTML or Liquid, or create your own section settings. Our developer help docs outline how section sections are used. 

 

I know this could be an overly complex solution if you're not familiar with code, Zazzazara, so there are also some apps which could achieve a similar effect.

 

I hope this helps- if you have any other questions, please let me know.

Cheers,
Liam Griffin | Developer Tools & Education

Liam Griffin
Shopify | Developer Community Manager
3 Likes
Highlighted
New Member
1 0 0

Hi Liam,

I wanted to embed a ConvertKit (CK) email signup form within my homepage, so I followed your instructions.

I created a new section for my CK newsletter signup. I added the HTML provided by CK above {% schema %} and I updated the code within the schema as you directed.

Question: I would now like to center this form on my homepage as it is currently aligned to the left. Is there an easy way to do this?

 

Thanks!

0 Likes