Skip to main content
All CollectionsWidgets
How to Add and Customize a Contact Page for Debutify Theme Version 7?
How to Add and Customize a Contact Page for Debutify Theme Version 7?

A guide on how to add and customize a Contact Us Page for Debutify Theme version 7.

Micah Quinto avatar
Written by Micah Quinto
Updated over 5 months ago

Adding a Contact Us page provides a direct and accessible way for shoppers to contact you, whether they have inquiries, feedback, or business opportunities.

A well-designed contact page typically includes a contact form that allows users to send an email and alternative contact methods like phone numbers or social media handles to cater to different preferences.


How to Add a Contact Page?

STEP 1

In Shopify admin, click Online Store and click on Pages.

STEP 2

Click Add page.

In the Title box, type a title for your contact page, such as Contact Us or Get in Touch.

STEP 3

In the Content box, type any text that you want to appear above the contact form. You can leave this section blank.

STEP 4

In the Online Store section, choose Contact from the Theme template drop-down menu.

STEP 5

Click Save and the contact form should be visible on your Contact page.


How to Customize a Contact Page?

STEP 1

Access your Shopify Admin's Theme Library to open the theme customizer.

STEP 2

Go to a contact page by selecting Pages, and select Contact.

STEP 3

Go to Sections, scroll down, and locate Contact form under Template.

STEP 4

Go to Section Style settings and choose your preferred section style. You have three options to select from:

  • Blank Background

  • Accent Background

  • Border Top

STEP 5

Go to Container size and select the desired container size. You can choose between two options:

  • Default

  • Fluid

STEP 6

Check the box if you want to show page title.

STEP 7

Under Form fields, tick the checkboxes if you wish to display placeholders and labels.

STEP 8

Go to Button alignment to adjust the alignment of the submit button. Choose from options such as Left, Center, or Right.

STEP 9

Check the box if you want to show button icon.

STEP 10

Go to Color scheme and click Change to choose your preferred colors from the dropdown options provided.

Note: To completely change all the colors in your theme, navigate to the Theme Settings and then select Colors, and customize a color scheme to your preference.

These color schemes can be applied to various sections across your online store, ensuring a consistent and visually appealing design.

Form Field Setup

STEP 1

Click on the triangle next to Contact form to reveal the block(s).

STEP 2

For each block:

  • Enter a unique Block name for internal identification.

  • Check the boxes if you want the fields to be required and half-width on desktop screens.

Important note: The Email Address block is always required for the form to function correctly.

Additional Blocks:

Heading Block:

  • Add a Heading text.

  • Go to Heading size to adjust the text size. Choose from Small, Medium, or Large options.

Text Field Block:

  • Set placeholder and/or label text.

  • Go to Type to select the form field type. Choose from options such as Text, Text area, Number, or Email options.

Options Group:

  • Go to Label to add a label.

  • Go to Options to add choices for your form field. One option per line.

  • Go to Type to select the type of options for your form field. Choose from Drop-down, Radio buttons, or Checkbox group options.

STEP 3

Click Save to apply the changes.

Did this answer your question?