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: these settings apply to standalone portals. A portal hosted on Shopify uses your store theme's header and menu. Use the switch on this section to hide the navigation bar. On a portal hosted on Shopify, where your store's header shows instead, the switch shows or hides the Home > Help center trail above the title on the portal home page.
- 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 search:
- 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: tiles on the portal home where customers manage their orders. They show only on a portal hosted on Shopify with a connected store.
- A tile or a section marked Coming soon can't be switched on. Track order and Report issue are marked Coming soon.
- 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: use the switch on this section to show or hide it on the portal home.
- Automatic: shows up to 8 published articles, most read first. If fewer than 8 have been read, the most recently updated articles fill the list.
- Manual: click the + button, pick up to 8 articles and drag them into the order you want.
-
Contact: this section is off until you switch it on.
- 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: opens your chat widget. It works on a portal hosted on Shopify when the Commslayer chat widget is installed on your store. On a standalone portal this switch is locked.
- Email button: opens the customer's own email app with your address filled in. Choose the address under Email destination. The portal has no contact form.
- 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: this section is off until you switch it on.
- Footer text: plain text shown in the footer, such as a copyright line. Links and formatting are not supported. To link back to your store, see Linking your Customer Portal from your website or Shopify store.
- 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 Languages in the portal's sidebar to add languages. See Adding multiple languages to your Customer Portal for a full walkthrough.
What the branding settings don't cover
- Your own blocks on the home page. The home page is made of the sections listed above. You can't add your own images, banners, QR codes or text blocks.
- Breadcrumbs. Category and article pages always show the trail ("Home › Category › Article"). On a portal hosted on Shopify, the trail on the home page follows the Navigation switch.
- Links in the footer. Footer text is plain text.
- A contact form. The Contact section offers a chat button and an email button.
Preview and save
Branding opens an editor with your settings on the left and a preview of the portal on the right. The preview follows your changes as you make them. Click Save to apply them to the live portal.