The included fonts, using your store's own font, and loading no external font.

Fonts

Try Porchlight on your help center, buy a license and make it live.

Install Porchlight

The handful of settings that turn Porchlight into your store's help center.

Make it yours in 15 minutes

Every setting in Porchlight's Settings panel, its default and what it changes.

Settings reference

The picture and Track your order card, store promises, topics, common requests, contact hours, and the header and footer.

Home page and navigation

Set up the Track your order card: send shoppers to your tracking page, or to an order form with the number filled in.

Order tracking

What shoppers see on topic, section and article pages, and the settings that control them.

Topic, section and article pages

Steps, callouts, tabs, accordions, tables, carousels and code, with HTML to paste into the editor.

Content blocks

The request form with the order number first, request type cards, the request list and a single request.

Requests

Topics, posts, votes and official answers, where shoppers help each other.

Community

Translated interface text, right-to-left layouts and translating your settings.

Languages and right-to-left

Using Porchlight on more than one help center in the same Zendesk account.

Several brands

What Porchlight stores and loads, what it never does, and where it has been tested.

Privacy, performance and browsers

What Porchlight gives Google and other search engines.

Search engines

How the theme is organized, what to edit, and how updates work once you change the code.

Developer license

Answers to the questions buyers ask most.

Questions and fixes

What's new

Get help

What shoppers see on topic, section and article pages, and the settings that control them. Shoppers read one answer, not a manual. Porchlight keeps these pages short and easy to scan on a phone.

A topic (Zendesk category) opens with a band in your brand's quiet surface color: breadcrumbs, the topic's name and description, and the same drawing as its card on the home page. Below it, each section is a list of its questions, one row each, with a See all link when a section has more than Zendesk shows on the topic

A plain band with the section's name, description and Follow button (Section page elements → Follow), then its sub-sections and articles as rows, with page numbers when there are many.

Every article reads in one centered column, 680px wide, with no side menu: Breadcrumbs, the title, and the date it was written or last updated. Author adds the author's picture and name. Follow lets signed-in shoppers follow the article. The article itself, with steps, callouts, tables and the other content blocks. Cod

Long product names, long URLs, wide size tables and long lines of code stay inside the page on every screen size: words break only when they must, and tables and code scroll inside their frame. Text pasted from Word or Google Docs keeps its bold and colors but takes your theme's font.

Search results open with a large search field, Zendesk's generative answer when it is on for your help center, and filters by topic and type. Search settings → Scoped search in help center keeps results to the topic the shopper is in.

First release. Every help center page, built on Zendesk's Templating API v4: home, topics, sections, articles, search with generative answers, request form, request list, requests, profiles, community, service catalog and approvals. Home page laid out like a store: announcement bar, header search, topics bar, a picture

Topics, posts, votes and official answers, where shoppers help each other. When your community is on, Porchlight shows it as a place where shoppers ask each other questions and share tips and reviews: Questions, tips and reviews from other customers. It appears in the topics bar, the phone menu and the footer. Community home: every community topic as a card with its posts and followers, plus 

Steps, callouts, tabs, accordions, tables, carousels and code, with HTML to paste into the editor. Copy-paste snippets for article authors. Open an article in the Zendesk editor, switch to the source code view (), and paste. Every block reads fine without JavaScript, and they all work in dark mode, on phones and in right-to-left languages.

A top-level numbered list is shown as steps. Nothing to add. Use it for returns, exchanges and anything else a shopper does in order.

callout-tip (green), callout-note (brand color), callout-warning (amber), callout-danger (red).

Plain tables, such as size charts and shipping rates. Wide tables scroll inside their frame on phones, so the page never scrolls sideways.

A tabs box with one heading per tab. Everything up to the next heading goes into that tab. Tabs with the same name stay in sync across the page, and the reader's last choice is remembered (a shopper who picks Canada sees Canada on every article).

Good for a list of short questions in one article.

A carousel box of images or figures, such as a product from several sides. Readers swipe, or use the arrows, the dots or the keyboard.

Code blocks get a Copy button (Code copy button setting), handy for discount codes and gift card instructions. Inline code uses.

Images open full screen when clicked (Image zoom setting), when they're shown smaller than their real size. Add alt text; it is used in the zoom view and by screen readers. Media you embed with the editor's media button (a YouTube care guide, for example) is sized 16:9 on every screen.

How the theme is organized, what to edit, and how updates work once you change the code. The developer license gives you Porchlight's source in Zendesk's code editor (Customize design → Porchlight → Edit code). Editing code needs Knowledge (Guide) Professional or higher. Before editing, copy the theme (theme menu → Copy) and edit the copy. Once a theme's code is edited, Zendesk can't update it automaticall

templates/.hbs One template per page type, in Zendesk's Curlybars language. document head.hbs, header.hbs and footer.hbs are on every page. The Track your order card is in home page.hbs; the order-first request form is in new request page.hbs. style.css All styles. Section 00 is the foundation from Zendesk's Copenhagen

Every color, radius and font comes from CSS custom properties at the top of style.css (--pl-brand, --pl-signal, --pl-ink, --pl-surface, --pl-line, --pl-r, --pl-font-heading...). Dark mode redefines them under:root[data-pl-mode="dark"]. Change a token rather than individual rules and both modes stay consistent.

The topic drawings are small SVGs in the ART object of assets/porchlight.js, picked by the keyword list KEYWORDS (one regular expression per drawing). Add a word in your language to a list to change which drawing a topic gets. The drawings are colored through classes, from the brand, highlight and page colors, so they 

Porchlight's own interface words live in assets/porchlight.js, in one dictionary per language (the I18N object). Add a language by copying the English entry and translating it.

window.Porchlight exposes t(), refreshFormPicker(), paintIcons(), paintArt(), initTabs() and initCarousels() if you add content after the page loads.

The handful of settings that turn Porchlight into your store's help center. Open Knowledge admin → Customize design → Porchlight → Customize. Every change previews on the right before you publish it.

Brand → Logo: your store's logo, ideally an SVG or a PNG about 64px tall. Add Logo for dark mode if your logo is dark. Colors → Brand color: your main color. Buttons, links, the topics bar and the topic drawings follow it, and Porchlight keeps text readable on it in light and dark mode. Colors → Highlight color: the an

Images → Home hero image: a wide picture of your products or your store, about 2000px wide. The picture is cropped to fill the space, the headline sits on the left and the Track your order card on the right, so keep the subject near the middle. Porchlight lays a shade of your brand color under the headline, so any phot

This is the setting that cuts "where is my order?" tickets. Choose one: Order tracking → Tracking link: your order status or tracking page, with {order} where the order number goes. The Track your order card opens it. No tracking link: set Order request form and Order number field. The card opens your order problem for

Home page → Request 1–4 label and link: the four buttons under the topics. Point Request 1 link at your returns portal (Loop, Shopify's returns, or an article), and the others at articles or forms. A button without a link opens the request form. Add Home page → Popular searches: three or four things shoppers type, comm

Contact → Support hours, for example Mon-Fri 9:00-18:00; Sat 10:00-14:00, and Time zone, for example America/New York. The contact block shows Open now or Closed now in your team's time. Contact → Chat option opens your Zendesk messaging. Support email and Phone add those options. Header → Header link 1: for example Ba

Tip Every change previews on the right before you publish, and nothing reaches visitors until you click Publish. Click Publish. If Porchlight isn't live yet, set it as the live theme from the theme library. The settings reference lists everything else.

The included fonts, using your store's own font, and loading no external font. Choose a Heading Font and a Text Font under Fonts. They can differ.

Porchlight sets headings in Gabarito, a friendly, round sans set large, and body text in Atkinson Hyperlegible Next, a font designed for readers with low vision. Shoppers of every age read it easily on a small screen. Neither font has Arabic, Hebrew, Chinese, Japanese or Korean letters, so text in those languages shows

Gabarito, Atkinson Hyperlegible Next, Hanken Grotesk, Nunito Sans, Figtree, DM Sans and Inter, two serifs (Lora and Fraunces), and two stacks that load nothing: System (the visitor's interface font) and Georgia. Included fonts load from Google Fonts, only the ones you pick.

If your store uses its own font, use it here too so the help center feels like part of the shop. Get the stylesheet link for your font. On Google Fonts, select the font and its weights (400, 600 and 700 are enough) and copy the address in the it gives you. Adobe Fonts gives you a link to a web project. A font on your o

For a help center that loads nothing from third parties, set both fonts to System or Georgia and leave the custom font empty. Code blocks always use the visitor's own monospace font.

Try Porchlight on your help center, buy a license and make it live. Porchlight is a Zendesk help center theme for online stores. It puts what shoppers come for first: track an order, start a return, report a problem. Then it answers the common questions, and when shoppers still need to write in, it asks for the order number and photos before they submit. It works on every help center p

A Zendesk account with a help center. You need to be a Zendesk admin. Any plan that lets you change your help center theme. Editing the theme's code needs a developer license and Knowledge (Guide) Professional or higher. For order tracking: your store's tracking page, or a ticket form and an order number field in Zende

Open Porchlight on the Zendesk Marketplace and start the free trial. Choose the help center (brand) to install it on. In Knowledge admin → Customize design, Porchlight appears in your theme library. Click Customize to preview it with your own content and change its settings. The trial lasts 14 days. During the trial yo

On the Marketplace listing, buy the standard license or the developer license (includes the source code). Both are one-time purchases. In Knowledge admin → Customize design, open the menu on the Porchlight card and click Set as live theme. A license covers every help center in your Zendesk account. On each other brand,

Every Porchlight feature and setting Yes Yes Free updates Yes Yes, applied by hand once you edit the code Edit templates, CSS and JavaScript No Yes (Knowledge Professional or higher) Price One time, see the Marketplace listing One time, see the Marketplace listing Tip Most stores only need the standard license: colors,

Make it yours in 15 minutes Order tracking Settings reference

The picture and Track your order card, store promises, topics, common requests, contact hours, and the header and footer. The home page is laid out like a store: a search in the header, a bar of topics like store departments, a big picture, then the help itself.

The picture is Images → Home hero image. Porchlight ships with a drawn porch at dusk; replace it with a photo of your products or your store. A shade of your brand color sits under the headline so the words stay readable on any photo. On phones the picture runs edge to edge and the card sits just under it. On the pictu

Up to three short lines under the picture: Store promise 1, 2 and 3, such as Free shipping on orders over $75, 30 days to return, 2-year warranty. Each gets an icon picked from its words (shipping gets a truck, returns an arrow, warranty a shield). Leave one empty to hide it.

Zendesk categories are called topics on the page. Browse help shows each one as a card with a drawing, its name and the start of its description: two columns on phones, up to four on wide screens. From the ninth topic on, the rest are listed by name only, so a large help center stays short. Each drawing is picked from 

Header → Topics bar lists every topic under the header, like a store's departments, with the current topic underlined. On phones it scrolls sideways and fades at the edge to show there is more. Your header links and the community, when you have one, sit at the other end of the bar.

Common requests are four buttons for what shoppers come to do. Each has a label and a link under Home page → Request 1–4: Request 1 Start a return Return arrow Opens the request form Request 2 Exchange a size Ruler Opens the request form Request 3 Change or cancel an order Pencil Opens the request form Request 4 Report

Top questions lists your promoted articles. Promote an article in the Zendesk editor to add it. Recent activity (off by default) adds Zendesk's list of recently updated articles and posts. Contact → Contact block is the Still need help? block next to the top questions, with Contact title and Contact text. It holds a Co

Write Contact → Support hours the way you'd say them, and set Time zone to your team's time zone (America/New York, Europe/Paris, Australia/Sydney). The hours show as you wrote them, with a dot and Open now or Closed now, worked out in your time zone. Without a time zone, Porchlight uses the visitor's own clock. Porchl

A banner after the contact block, for a sale, a gift guide or a new collection: Promotion banner → Show the banner, with a Banner title, Banner text, Banner button label and Banner link. Banner style is a soft tint of your brand color, the solid brand color, or dark. Without a link the banner stays hidden.

Announcement bar: one line above the header in your highlight color, for shipping cut-offs, delays or a sale, with an optional link (Announcement link label and Announcement link). Visitors can close it; a new message shows again. Your logo and, with Show Help Center name, the help center's name. Search in the header: 

Contact → Contact button on phones adds a Contact us button at the bottom of the screen once a shopper scrolls down. It steps aside while the contact block or the footer is on screen, doesn't appear on the request pages, and stays hidden when your Zendesk messaging button is on the page, since that does the same job.

Your logo, Footer text, social links (X, LinkedIn, YouTube, GitHub, Facebook, Instagram), three link columns and a Support column with Contact us, My requests (for signed-in visitors) and the community. Write each column's links as Label URL pairs separated by commas: Columns without links are hidden. The language pick

The not-found page has a drawing, a search field, and buttons back to the home page, to Track order and to Contact us, so a shopper who followed an old link still gets somewhere.

Translated interface text, right-to-left layouts and translating your settings. 

Zendesk's own text (buttons, forms, the request list, community) comes in the 37 languages of Zendesk's standard theme. Porchlight's own text (Track your order, Browse help, Common requests, Open now, Still need help?, the request form tips and so on) is translated into English, Arabic, Chinese (Simplified), Dutch, Fre

Write Support hours with English day names (Mon-Fri 9:00-18:00), whatever your help center's language. Porchlight shows the hours as you wrote them, and the Open now and Closed now labels in the visitor's language.

In Arabic and Hebrew the whole layout mirrors: the header, the topics bar, the home picture and its card, menus, arrows, carousels and the request form. Code blocks stay left-to-right. Each paragraph of an article, comment or post takes its direction from its own text, so an English paragraph in an Arabic article reads

Porchlight shows whatever your help center has in the visitor's language. Topic drawings and icons follow each topic's name in its original language, so translated topics keep their pictures.

Long lines without spaces wrap correctly in titles, menus and articles. Headings and text use the visitor's system font for these scripts.

Using Porchlight on more than one help center in the same Zendesk account. Tip A Porchlight license covers every help center in your Zendesk account: one per store, per country or per language. In Knowledge admin, switch to the other brand with the brand menu at the top. In Customize design, add Porchlight from your theme library and set it live. Give each brand its own logo, colors, fonts, h

Set up the Track your order card: send shoppers to your tracking page, or to an order form with the number filled in. The Track your order card sits on the home picture. A shopper types an order number and clicks Track order. What happens next is up to you: With a tracking link, Porchlight opens your order status or tracking page for that order. Most "where is my order?" questions end there, without a ticket. Without a tracking link, 

Set Order tracking → Tracking link to the address of your order status or tracking page, with {order} where the order number goes. If the page also needs the shopper's email address, add {email}: the card then asks for the email too. To find the address: Open your tracking page for a real order, the way a shopper would

Without a tracking link, the card opens a ticket form of your choice with the order number already in its field. You need an order number field and a form for order problems. You do this once, in Admin Center.

In Admin Center → Objects and rules → Tickets → Fields, click Add field. Choose Text. Name it Order number. Under Permissions, choose Customers can edit, so shoppers see the field on the request form. Give it a title for customers, such as Order number. Make it required for customers if every request on that form is ab

In Admin Center → Objects and rules → Tickets → Forms, click Add form. Name it for shoppers, such as A problem with my order. Add the Order number field, plus anything else you need (a dropdown for Late, Damaged, Wrong item, Missing item, for example). Turn on Editable for end users, so shoppers can pick it on the requ

In Customize design → Porchlight → Customize: Order tracking → Order request form: the form's id, for example 360001234567. Order tracking → Order number field: the field's id, for example 360007654321. Order tracking → Order number hint: the help shown under the field. The default is You'll find it in your order confi

With Order number field set: The order number field moves to the top of every form that has it, so it's the first thing shoppers fill in. It's filled with the number the shopper typed in the card. Porchlight keeps that number for the visit, so it's there even if the shopper opens the form later from Contact us. The Ord

Check that Order number field is the field's id (digits only) and that the field is on the form that opens. The field must be editable by customers: Zendesk only shows and fills fields customers can edit.

Check Order request form: digits only, and the form must be Editable for end users and available on this brand.

Ticket form and field ids are the same across brands in one account, but each brand has its own Porchlight settings. Set the ids, or a tracking link, on each brand. See Several brands.

Yes: turn off Home page → Track your order card. The Track order links in the header, after articles and on the not-found page go with it. The order number field still moves to the top of the request form.

What Porchlight stores and loads, what it never does, and where it has been tested. 

Porchlight has no tracking, analytics or cookies of its own. In the visitor's browser it remembers three preferences: light or dark mode, a closed announcement, and the last tab chosen in tabbed articles. For the length of the visit only, it keeps the order number typed in Track your order (to fill the request form) an

Porchlight's script loads after the page and reads Zendesk's help center API for two things only: the topic list in the topics bar and the phone menu, and quick search results as the shopper types. The topic list is kept for the visit, so moving between pages doesn't ask again. Nothing moves while the page loads: the t

Porchlight is built and tested in Chrome (and so other Chromium browsers such as Edge), Firefox and Safari, on desktop, tablet and phone sizes, in light and dark mode, in English, Arabic, Hebrew and Japanese. On a phone: home, an article, and a topic page in dark mode. Older iPhones and iPads (Safari before 16.2) get t

Keyboard navigation everywhere with visible focus, a skip link, menus that close with Escape and return focus, dialogs that keep focus inside, accessible names on icon buttons, text contrast that meets WCAG AA in both color modes for the default colors, and body text in Atkinson Hyperlegible Next, a font designed for l

The request form with the order number first, request type cards, the request list and a single request. Porchlight uses Zendesk's own request components, so every ticket field type, conditional field, attachment rule and CAPTCHA works as Zendesk intends. Porchlight styles them and adds what helps a store's support team: the order number first, and photos for damaged or wrong items.

Order number first: with Order tracking → Order number field set, that field moves to the top of every form that has it, filled with the number the shopper typed in Track your order, with your Order number hint under it. See Order tracking. Photos on order problems: on the form set in Order tracking → Order request for

Request types as cards: with more than one ticket form, shoppers choose from cards ("What do you need help with?") instead of a dropdown. Each card gets an icon picked from the form's name. Request type descriptions adds a line under each, as Form name:description pairs separated by semicolons: You can use the form's i

Every field type is styled: text, multi-line text, number, decimal, date, checkbox, regular-expression fields, dropdowns with nested options (Problem::Damaged), multi-select, attachments and the description editor. Errors show next to the field. Long form names and long labels wrap inside the card.

Screen recording link: your Screendesk recording link adds a Record your screen card next to the form, so a shopper with a checkout or account problem can show it instead of describing it.

My requests shows Zendesk's tabs, search and a table with colored status pills. Custom ticket statuses get a color from their category. A single request shows the conversation with your team's replies marked, the reply box and a details card.

Profiles, contributions and followed content share the same header and tabs.

What Porchlight gives Google and other search engines. Clean structure: one h1 per page, headings in order, real links for every article, section and topic, and breadcrumbs on every page. Structured data: every article carries schema.org Article data (title, author, publication and update dates, your help center as publisher), and every page with breadcrumbs carries a Brea

Every setting in Porchlight's Settings panel, its default and what it changes. Open Knowledge admin → Customize design → Porchlight → Customize. Settings are grouped like this page. Text settings hold one text for every language; while a text still has Porchlight's default, visitors see it translated (see Languages).

Brand color Color 1E4D3B Buttons, links, the topics bar and the active page in menus Brand text color Color FFFFFF Text on top of the brand color, such as button labels Highlight color Color F2A93B The announcement bar and the open now dot. Keep it light enough for dark text on top Text color Color 18221D Text color fo

Heading Font Choice Gabarito Font for headings. Options: Gabarito, Atkinson Hyperlegible Next, Hanken Grotesk, Nunito Sans, Figtree, DM Sans, Inter, Lora, Fraunces, Custom font (set below), System (no web font), Georgia (no web font). Text Font Choice Atkinson Hyperlegible Next Font for body text. Options: Gabarito, At

Logo Image Porchlight image Company logo Logo for dark mode Image Porchlight image Used in dark mode. Leave empty to reuse the main logo Show Help Center name Switch On Display the Help Center name next to the logo Favicon Image Porchlight image Icon displayed in the address bar of your browser

Announcement bar Switch Off A bar above the header for shipping cut-offs, delays, sales or holiday hours. Visitors can close it Announcement text Text Order by December 18 for delivery before the holidays. One short sentence Announcement link label Text See holiday dates Leave empty for no link Announcement link Text E

Headline Text Need a hand with your order? The large title on the home picture. The picture itself is under Images, Home hero image Subtitle Text Track a parcel, start a return or find an answer. One line under the headline. Leave empty to hide Track your order card Switch On A card on the home picture where shoppers t

Tracking link Text Empty Your order status or tracking page, with {order} where the order number goes and {email} for the email address if the page needs it. For example https://shop.example.com/apps/track?order={order}&amp;email={email}. Leave empty to send shoppers to the order request form instead Order request form

Contact block Switch On The Still need help? block on the home page, with your hours and ways to reach you Contact title Text Still need help? Contact title Contact text Text We answer most messages within a few hours. Contact text Chat option Switch Off Adds Chat with us, which opens your Zendesk messaging or Web Widg

Show the banner Switch Off A banner at the end of the home page: a sale, a gift guide, a new collection Banner title Text Gift guide: something for everyone outdoors Banner title Banner text Text Free gift wrapping and extended returns until January 31. Leave empty for a title only Banner button label Text Shop the gui

Home hero image Image Porchlight image Hero image on the home page Community hero image Image Porchlight image Hero image on the community topics page Community banner Image Porchlight image Image for the community section on the home page Service catalog hero image Image Porchlight image Hero image on the service cata

Instant search Switch On Show suggested articles on search Scoped search in help center Switch On Search results are confined to the category the user is in Scoped search in Community Switch On Search results are confined to the topic the user is in Quick search Switch On Press / on any page, or tap the search button o

Articles in section Switch On A More in list at the end of every article, with up to six other articles from its section Author Switch Off Show author image and name Code copy button Switch On A Copy button on every code block Image zoom Switch On Click an image in an article to view it full screen Follow Switch On Use

Fonts

The defaults

Included fonts

Your store's own font

No external fonts