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
Step 3: Add Your Contact Info
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
Contact Blocks
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)
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
