Change position of contact form

Solved
Highlighted
New Member
6 0 0

Hello all!

 

I have a contact page, which contains the Shopify form and a few added elements. A photo and text which are above the form. But then the map and instafeed are also above the form. How do I move just the map and instafeed below the form, so the position of the contact form makes more sense. I've searched and can't find a solution. Any tips are appreciated!

0 Likes
Highlighted

Success.

Shopify Staff
Shopify Staff
211 28 32

Hi, @JWC!

 

My name is Lilith, I'm on the Social Care team at Shopify.

 

I'd be happy to help you out!

 

I have a question that can help me figure out how to help:

 

  • Do you have a link to your site as well as details on which theme you're using and how you added the map to the contact page?

 

If you've added them directly onto the Online Store > Pages section of your admin, then you can decide to copy and paste the HTML code for that page into your theme template.

 

To help clarify I have a couple of GIFs below using one of my testing themes on how to grab that code from your page.

 

Example of image issue

 

Here's an example of an awkward placement for pizza on the test contact page:

 

 

alt

 

 

Here's how to solve the positioning issue.

 

Finding the HTML Code in the admin for your page

 

 

alt

 

 

Pasting it into the right code file

 

 

alt

 

 

 

Depending on how comfortable you are with HTML/CSS/Java or Liquid, you may also opt to hire on a professional developer to help customize the page for you. I highly recommend hiring one of our partners to help you with this. You can find a suitable Shopify Partner in the Experts Marketplace or request a quote by following this guide here.

 

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
986 41 116

Dear JWC,

 

Can you please share store url and screenshot?

Thanks & Regards
MS Web Designer
Get Free Store Audit Report
20000+ Task Completed
1000+ Satisfied Client
9.9*/10 Customer Rating
10*/10 Shopify Services Marketplace
0 Likes
New Member
6 0 0

Thank you so much for the detailed reply! That allowed me to move both the map and Instafeed under the contact form. 

 

For those that come here at another time and want to view the page, it's https://www.jwcouture.ca/pages/contact

0 Likes
Highlighted
Shopify Staff
Shopify Staff
211 28 32

Great job on that! Looks fantastic!

 

You could also test out different image dimensions as well. The top image might look great if it were in landscape format with a shorter height. This will be a great way to help mobile users get to the contact form quicker versus scrolling down a bit.

 

I recommend using design software or a quick online one like Canva (which is free) to help you get the right shape and design that will work for your brand.

 

Test that out and let me know what you decide!

Lilith | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Highlighted
New Member
6 0 0

Thanks for the feedback. Made that change to the image so the form is more easily visible while on mobile. Thoughts?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
211 28 32

Looks great on mobile! Much easier to scroll and find the details for the page right away. Great job on that.

 

The only other feedback on that image would be to make sure it fits in your contact page width. You can leave it the way it is now or test out a 16:9 dimension ratio.

 

Something along these lines might take up the width of the form page and also stay well-sized for both desktop and mobile:

 

 

alt

 

 

Test it out. Either way, it looks great!

Lilith | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes