Contact Panel Setup Guide
The Contact Panel adds a persistent "Contact Us" tab to the side of your store that opens an info card with your phone numbers, email, address, store hours, and custom links. It works on both desktop and mobile.
Quick Setup (3 Minutes)
Step 1: Find the Section
- In your Shopify admin, go to Online Store → Themes → Customize
- In the left sidebar, look for Contact Panel under your global sections
- Click on it to open the settings
Step 2: Enable the Panel
- Check the Enable contact panel box
- A vertical tab will appear on the side of the preview
The panel comes with 4 default blocks: Phone, Email, Address, and Store Hours. Click on each one to fill in your details. You can also add Custom Link blocks for things like WhatsApp, Messenger, or a booking page.
How It Works
A small vertical tab sits on the side of your site (left or right, your choice). When a customer clicks it, an info card slides out showing all your contact details. Each piece of info is actionable:
- Phone numbers have tap-to-call and tap-to-text buttons
- Email addresses are clickable
mailto: links
- Addresses link to Google Maps for directions
- Store hours display right in the card
- Custom links can go anywhere — WhatsApp, Messenger, a booking page, etc.
Tab Trigger Settings
The trigger is the vertical tab fixed to the side of your site.
| Setting | What It Does |
|---|
| Tab text | The text displayed on the tab (default: "Contact Us") |
| Tab icon class | Optional LineAwesome icon that appears above the text |
| Tab background | Background color of the tab |
| Tab text color | Text and icon color on the tab |
Position Settings
| Setting | What It Does |
|---|
| Side & vertical position | Where the tab sits: left or right side, and top / center / bottom vertical alignment |
Card Style Settings
| Setting | What It Does |
|---|
| Card heading | The title shown at the top of the info card (default: "Contact Us") |
| Background | Card background color |
| Text color | Color for labels and text in the card |
| Accent color | Color for row icons, links, and action buttons |
| Accent icon/text | Icon and text color inside accent-colored elements |
| Card roundness | How rounded the card corners are |
Phone
Add up to 2 phone number blocks.
| Setting | What It Does |
|---|
| Label | The small label above the number (e.g., "Phone", "Sales", "Support") |
| Phone (display) | The formatted number customers see (e.g., "(555) 123-4567") |
| Phone (link value) | The raw number used for tel: and sms: links (e.g., "+15551234567") |
| Link behavior | Choose Call only, SMS only, or Both (shows two action buttons) |
| Icon class | Optional custom LineAwesome icon |
Email
Add up to 2 email blocks.
| Setting | What It Does |
|---|
| Label | The small label above the email (e.g., "Email", "Support") |
| Email address | The actual email address |
| Display text | Optional text to show instead of the raw email address |
| Icon class | Optional custom icon |
Address
| Setting | What It Does |
|---|
| Label | The small label above the address (e.g., "Address", "Directions") |
| Address text | The address as you want it displayed |
| Google Maps link | Paste a Google Maps link so customers can tap for directions (opens in new tab) |
| Icon class | Optional custom icon |
Store Hours
| Setting | What It Does |
|---|
| Label | Small label (e.g., "Hours") |
| Row heading | The heading shown in the card (e.g., "Store Hours") |
| Hours | Rich text field — format your hours however you like |
| Icon class | Optional custom icon |
Custom Link
Add as many custom link blocks as you need. Great for social messaging, booking tools, or anything else.
| Setting | What It Does |
|---|
| Label | The link text customers see |
| URL | Where the link goes |
| Icon class | A LineAwesome icon (e.g., lab la-whatsapp, lab la-facebook-messenger) |
| Open in new tab | Whether the link opens in a new tab |
Mobile Behavior
- Without Mobile Toolbar: The side tab appears on mobile just like desktop. Tapping it opens the info card beside the tab.
- With Mobile Toolbar: If you have a Contact button in the Mobile Toolbar, the side tab is automatically hidden on mobile. Tapping the toolbar's Contact button opens the info card as a bottom sheet that slides up above the toolbar.
Good to Know
- The panel is off by default so it won't appear until you enable it
- The side tab and info card work on both desktop and mobile
- The card has a built-in close button, and also closes when you click outside it or press Escape
- All contact blocks are optional — only add what's relevant to your store
- Custom icons use the free LineAwesome icon library