ArtiStick Guide: Contact Page Template

Using the Page.Contact Template

Contact Page Settings

Contact Banner Settings

Show banner/Image

Darken banner image

Subheading

Width

Banner height

Top/Bottom spacing

CSS Class/Custom CSS

Theme Wide Form Settings

Use placeholders

Button style

Using the Page.Contact Template 

In the ArtiStick theme, there is a page.contact template that includes the ability to add a contact form so your customers can get in touch.

In order to use the 'page.contact template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.

If you are unable to currently publish your theme and would still like to set up the ‘page.contact template, we have instructions on how to access unpublished templates here.

The contact form includes advanced field options: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph. The submissions are sent to your store’s public contact email address.

The page.contact template also allows you to add a banner image at the top, add in additional sections (Map, Image with text overlay, and Rich text), and configure additional layout settings and even add in your own custom CSS.

When adding a Page in your Shopify Admin (Online Store > Pages), the page.contact template is named page.contact and can be selected under Template > page.contact:

Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.contact from the drop-down page selector. Your theme editor on the left will then update with the page settings. Here you can configure the contact form, contact banner and the additional contact sections.

Contact Page Settings

The contact page template includes settings for the banner, form, and sections.

Contact Banner Settings

The contact page banner image is completely optional in the contact page template! If you choose to enable the contact banner, the settings include options for the layout and advanced CSS as well.

Show banner/Image

To enable the banner image, you'll need to check the 'show banner' setting. The contact page's title will then display on top of the banner image. A 1800 x 800px image size is recommended.

Darken banner image

You can enable the 'darken banner image' setting to add a subtle overlay on top of your banner image. This comes in handy if you have a 'busy' banner image as it will improve legibility.

Subheading

If you'd like to include additional text on top of the banner image, below the page title, you can enter content in the 'subheading' field.

Banner Width

The 'width' setting can be set to 'standard' or 'wide.' If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'

Banner height

You can select small, medium, or large for the height for the page's banner image.

Top/Bottom spacing

You can adjust the space above and below your banner image with the 'top spacing' and 'bottom spacing' settings.

CSS Class/Custom CSS

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.

Theme Wide Form Settings

Additionally, there are some settings for the contact form that will apply to all forms theme-wide. The ability to show placeholder text for the fields within all forms and select the button style for the submit button.

These settings can be found by going into Customize (your Theme Editor) > Theme Settings > Elements > Forms:

Use placeholders

If you want the labels for the form fields to display within the field, you can enable the 'use placeholders' setting. This will move the text from above the field, to inside it. 

Button style

With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).