Contact options
Cards for the ways to reach you: email, phone, chat, order tracking, each with an icon, a line and a link.
munich-demo.myshopify.com
What it does
A section header and a row of cards, each with an icon, a heading, a short text and a link. Cards sit on a color scheme of their own in a grid or a carousel, and swipe on a phone when Swipe on mobile is on.
When to use it
At the top of the FAQ page, above the questions, so the visitor who wants a person finds one before reading. Also on the contact page above the form, and on the about page.
Blocks
- Contact option: icon, heading, text, link label and link.
Setting it up
- Add three Contact option blocks: Email us, Call us, Track your order.
- Set the links, with mailto: and tel: where they apply.
- Pick the Card color scheme and Columns on desktop.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Grid lays the cards out in rows. Carousel puts them in one scrollable row with arrows.Options: Grid, Carousel · Default: Grid |
| Swipe on mobile | Checkbox | On a phone, lays the items out in one row that the visitor swipes through, instead of stacking them.Default: off |
| Header | ||
| Label | Text | A small kicker above the heading. |
| Heading | Text | The card title, such as Email us.Default: Get in touch |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Medium |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Grid | ||
| Columns on desktop | Select | How many items sit in one row on a desktop screen.Options: 2, 3, 4 · Default: 3 |
| Columns on mobile | Select | How many items sit in one row on a phone.Options: 1, 2 · Default: 1 |
| Card color scheme | Color scheme | The surface of each card, separate from the section behind it, so cards can stand off the section background. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Left |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
Contact option block
| Setting | Type | What it does |
|---|---|---|
| Icon | Select | The icon at the top of the card.Options: None, Email, Phone, Chat, Questions, Delivery time, Shipping, Returns, Guarantee, Gift, Secure payment, Check, Star · Default: Email |
| Heading | Text | The card title, such as Email us.Default: Email us |
| Text | Rich text | One or two lines, such as when you reply.Default: <p>We reply within 24 hours, Monday to Friday.</p> |
| Link label | Text | What the link on the card reads, such as the address itself.Default: hello@yourstore.com |
| Link | Link | Where the card leads. Use mailto: for an email address and tel: for a phone number. |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Links can be an address, a mailto: link or a tel: link. The link label is what the visitor sees, so it can read hello@yourstore.com while the link is mailto:hello@yourstore.com.
- Three cards is the number that fits one row on desktop and reads at a glance. Email, phone or chat, and where to track an order.
- Link every card somewhere that exists. A tracking card without a tracking page is worse than no card.