The Contact form section is used to display contact information or a contact form in the Concept theme. This guide explains how to use the section in Concept 6.0.0.
How to Set Up the Contact form Section in Concept
Steps:
Add the Contact form section
- From your Shopify admin, open Online Store > Themes.
- Click Customize on your Concept theme.
- Open the template where you want to display this section.
- Click Add section.
- Select Contact form.
- Click Save after configuring the section. After adding the section, you can configure its section settings and blocks from the theme editor sidebar.
Configure the Contact form section settings
- Open the section settings in the theme editor sidebar.
- Review the available layout, content, media, color, and spacing options.
- Adjust the settings based on the layout you want to display.
- Click Save after making changes.
| Setting | Description |
|---|---|
| Heading — Heading | Add or edit the heading content. |
| Heading — Heading size | Choose the heading size option. |
| Heading — Heading alignment | Choose the heading alignment option. |
| Heading — Heading tag | Specify heading code types for SEO and search engines for crawling purposes. |
| Heading — Subheading | Add or edit the subheading content. |
| Heading — Description | Add or edit the description content. |
| Heading — Button label | Leave the label blank to hide the button. |
| Heading — Button link | Select or connect the button link source. |
| Heading — Open link in new tab | Enable or disable open link in new tab. |
| Heading — Show button icon | Enable or disable show button icon. |
| Highlighted text — Highlighted text | Choose the highlighted text option. |
| Highlighted text — Highlighted scribble | Requires highlighted text style to be set to "Hand-drawn scribble". |
| Highlighted text — Enable reveal effect | Enable or disable enable reveal effect. |
| Colors — Text | Set the text color. |
| Colors — Background | Set the background color. |
| Colors — Background gradient | Set the background gradient color. |
| Colors — Highlight | Set the highlight color. |
| Colors — Highlight gradient | Set the highlight gradient color. |
| Colors — Button text | Set the button text color. |
| Colors — Button background | Set the button background color. |
| Colors — Button background gradient | Set the button background gradient color. |
| Section — Top padding | Adjust the top padding value. |
| Section — Bottom padding | Adjust the bottom padding value. |
| Section — Show section divider | Enable or disable show section divider. |
| Section — Make section narrow | Enable or disable make section narrow. |
| Section — Make section rounded | Enable or disable make section rounded. |
Add and configure blocks
- Open the section in the theme editor sidebar.
- Click Add block when available.
- Select the block type you want to use.
- Add the content, media, link, product, collection, or text required by the block.
- Reorder blocks by dragging them in the sidebar.
- Click Save.
Contact press
- Block type:
contactSetting Description Heading Add or edit the heading content. Text Add or edit the text content.
Social media icons
- Block type:
mediaSetting Description Heading Add or edit the heading content.
Custom field
- Block type:
custom_fieldSetting Description Type Choose the type option. Label Add or edit the label content. Required Enable or disable required. Full width Enable or disable full width. Checkbox — Checked value Add or edit the checked value content. Checkbox — Uncheck value Add or edit the uncheck value content. Radio buttons — Options Separate your options with a comma (e.g: Option 1, Option 2, Option 3) Dropdown list — Options Separate your options with a comma (e.g: Option 1, Option 2, Option 3)
Preview the Contact form section
- Open the storefront preview from the theme editor.
- Check the section on desktop and mobile.
- Confirm that selected media, text, links, products, collections, or blocks appear correctly.
- Test any buttons, links, drawers, sliders, forms, hotspots, or interactive controls used by the section.
- Click Save when the section looks correct.
Behavior
- The section is generated from
contact-form.liquid. - The section is normally managed from the Page template area in the theme editor.
- This section can usually be added to templates from Add section.
- Block content appears only when the related block settings are filled in.
- Layout, colors, spacing, media, and content behavior depend on the section settings.
Troubleshooting
- If the section does not appear, make sure the Contact form section is enabled in the correct template or theme group.
- If content is missing, check that the required section settings or block settings are filled in.
- If a block does not appear, make sure the block is not hidden and that its required content has been added.
- If images or videos do not appear, make sure the media files are selected and available in Shopify.
- If links or buttons do not work, check the assigned URL, product, collection, page, or menu link.
- If the layout looks different on mobile, review the mobile-specific settings in the section.
- Clear the browser cache and refresh the storefront after saving changes.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Add App Blocks in Concept
How to Set Up the Contact with Map Section in Concept