Contact section

The Contact section is thoughtfully designed to seamlessly integrate a contact form at any point in your store, providing a user-friendly interface for visitors to reach out.

Section settings

Heading: Set a title for this section. This is optional.

Sub-heading: Set a sub-heading for this section. This is optional.

Heading alignment: Choose whether you want the heading and sub-heading of this section to be left or center aligned.

Custom identifier: Input a personalized message for the form to email you, serving as a unique identifier of its origin. This detail will not be visible to the customer. For example, if you have a contact section on your homepage and one on your cart page, the first identifier could be “Home page” and the second “Main cart”. This information will be visible in the email you receive.

Card

Position: Determines the card’s horizontal placement within the section. ‘Start’ aligns it to the left, ‘End’ to the right.

Image: Allows you to choose and upload an image that will be displayed on the card.

Heading: The title text for the card.

Heading background opacity: Controls the opacity of the background behind the heading to enhance text readability against the card’s image.

Description: A text field for additional details about the card’s content.

Button text: The label for the call-to-action button on the card. It typically instructs the user on what action to take, like “Shop now”.

Button link: The URL that the button will direct to, which could be a contact form, a product page, or any other relevant link.

Color scheme: The chosen color scheme for the card.

Layout

Container width: Select either “Wide” or “Full” for the section’s container width. Choosing “Wide” extends the section a few pixels beyond the page’s boundaries on the left and right, whereas “Full” expands the section to cover the entire width of the viewport. This setting is designed to work along with a color scheme that contrasts the base background (i.e. Accent colors or Background 2).

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.