You can customize the look and feel of your Customer Portal to match your brand. All customization options are found under Customer Portal → Branding.
Sections
Go to Customer Portal → Branding → Sections to update:
-
Navigation:
- Show logo — Display your brand logo in the portal navigation bar.
- Show portal name — Display the portal name next to the logo in the navigation bar.
- Use wordmark — Replace the logo and portal name with a wide wordmark image.
- Show language switcher — Display a language selector in the navigation bar, allowing customers to switch between available languages.
-
Hero and serach:
- Title — The main heading displayed at the top of your portal homepage. Can be translated for each language.
- Search placeholder — The placeholder text shown inside the search bar before a customer starts typing. Can be translated for each language.
- Bottom margin — Controls the space between the hero section and the content below it.
- Top padding — Controls the space between the top of the hero section and its content.
- Bottom padding — Controls the space between the bottom of the hero section and its content.
-
Order actions:
- Track order — Show a button that lets customers track the status and location of their order directly from the portal.
- Return or exchange — Show a button that lets customers initiate a return or exchange request from the portal.
- Cancel order — Show a button that lets customers cancel an order directly from the portal.
- Report issue — Show a button that lets customers report a problem with their order from the portal.
- Bottom margin — Controls the space between the Order actions section and the content below it.
- Top padding — Controls the space between the top of the Order actions section and its content.
- Bottom padding — Controls the space between the bottom of the Order actions section and its content.
-
Help categories:
- Layout — Choose how categories are displayed on the portal homepage. List shows categories in a single vertical column; Grid arranges them in rows across multiple columns.
- Grid columns — The number of columns to display when using the Grid layout.
- Category display — Choose what visual element represents each category. Icon shows an emoji or icon; Image shows a thumbnail; Both shows an image alongside an icon.
-
Popular articles:
- Automatic — Ranks and displays articles by view count, updating automatically over time.
- Manual — Hand-pick which articles appear in the Popular articles section and set their order yourself.
-
Contact:
- Title — The heading displayed at the top of the Contact section (e.g. "Still need help"). Can be translated for each language.
- Subtitle — A short supporting line shown below the title to prompt customers to get in touch (e.g. "Can't find what you're looking for?"). Can be translated for each language.
- Chat button — Show a button that opens the chat widget directly from the portal. Only available on sites with a chat widget installed.
- Email button — Show a button that lets customers send an email directly from the portal.
- Label — The text displayed on the email button (e.g. "Email us"). Can be translated for each language.
- Email destination — Choose where emails sent via the Contact section are delivered. Select an existing inbox or specify a custom email address.
-
Footer:
- Footer text — Custom text displayed in the footer of your portal, such as copyright information, legal disclaimers, or a short message for customers.
- Show "Powered by Commslayer" — Display a small Commslayer attribution badge in the portal footer.
- Bottom margin — Controls the space between the footer and any content below it.
- Top padding — Controls the space between the top of the footer section and its content.
- Bottom padding — Controls the space between the bottom of the footer section and its content.
Theme
Go to Customer Portal → Branding → Theme to update:
-
Theme color:
- Custom — Manually set your own colors and fonts for the portal.
- Inherit (Experimental) — Automatically pull fonts and colors from your Shopify theme to match your store's design.
-
Logo
- Logo — Your brand logo shown in the portal navigation. Upload a PNG at 1:1 ratio, up to 1 MB.
- Wordmark — A wide-format logo alternative that replaces both the logo and portal name. Upload a PNG or SVG, up to 1 MB.
- Favicon — The small icon shown in the browser tab when customers visit your portal. Upload an ICO, SVG, or PNG at 1:1 ratio, up to 100 KB.
-
Colors
- Accent color — The primary brand color used for buttons, links, and interactive elements.
- Text color — The default color for body text throughout the portal.
- Heading text color — The color used for headings. Defaults to Auto, which inherits from the accent or text color.
- Secondary text color — The color used for supporting or subdued text. Defaults to Auto.
- Page background — The background color of the overall portal page.
- Card background — The background color of article and category cards.
- Card border — The border color of article and category cards.
-
Typography
- Heading font — The font used for all headings across the portal.
- Body font — The font used for body text and general content across the portal.
-
Layout
- Page width — The maximum width of the portal content area in pixels.
- Card border radius — Controls how rounded the corners of cards are throughout the portal.
-
Buttons
- Button border radius — Controls how rounded the corners of buttons are.
- Button height — The height of buttons in pixels.
- Side padding — The horizontal padding inside buttons, controlling how much space surrounds the button label.
-
Custom CSS
- CSS — Add custom styles to override or extend the portal's default appearance. For advanced customization beyond the available settings.
Languages
Go to Customer Portal → Settings → Locales to add support for multiple languages. See Adding multiple languages to your Customer Portal for a full walkthrough.
Live preview
After making changes, click Live preview at any time to see how your portal looks to customers before publishing.