Champ › Guides › Design & wording

Design & wording

In short: you can change your forum's colours, font, logo, layout, menu, address and wording. Most of it is done in the Champ dashboard with no code. The sections on custom CSS and Liquid snippets are for people who can edit code — skip them if that is not you.

How your forum fits into your store#

Shopify shows the forum as a page on your own store, inside your theme. Your store's header and footer stay around it. That is why the forum looks like part of your store and not a separate app.

You change the rest in three places in the Champ dashboard:

• Design — colours, font, page layout and custom CSS.
• Settings — logo, forum address, menu, search and most other options.
• Translation — every word the forum shows.

Colours#

In the Champ dashboard, open Design and find Colours. You can set:

• Header Background Color and Header Text Color — the forum's own header bar
• Body Background Color and Body Text Color
• Body Link Color
• Heading Text Color
• Primary Color — buttons and highlights
• Category Heading Background Color and Category Heading Color

Click Save when you are done.

By default the header is blue and the page is white. Most stores change the header to their brand colour and leave the rest.

Font#

In Design, find Base font. Type the font you want for your forum pages, then click Update font.

Tip: use a font your theme already uses. Then the forum does not need to download a second font, and pages load faster.

Logo#

In Settings, find Logo. Upload your logo and click Save. A PNG file gives the best quality.

After you upload it, you can also set:

• Logo height (px) — between 30 and 200. A taller logo makes the forum header taller.
• Logo URL — the page people go to when they click the logo.

The logo appears in the forum's header. If your store's own header (with your logo) is right above it, you may want to leave the forum logo off. Two logos stacked on top of each other can look like a mistake.

Page layout#

In Design, find Page layout. It sets where the forum's sidebar goes on every forum page. Pick one, then click Update layout:

• Right sidebar
• Left sidebar
• Full width, info on top
• Full width, info at bottom

To group your forums under headings, use categories. In Settings, find Categories and turn on Display forums in separate categories. The forums guide explains the steps.

To change how many recent topics show in the sidebar, go to Settings, find Topic settings, and change Latest topics in the sidebar.

Menu links in the forum header#

You can add your own links to the forum's header. For example: back to your shop, to a help page, or to your returns policy.

1. In Settings, find Primary header menu.
2. Type the link text in Menu item.
3. Type the full address in Link, for example https://yourstore.com/pages/returns.
4. Click Add.

Drag the links to change their order.

The same section has switches for the sign-in, register and sign-out links on the right of the header.

If your links do not appear on the forum, your theme may be replacing Champ's header. See Using Liquid snippets below (the champ-header snippet).

Links inside posts. In Settings, Link target sets whether links that members put in their posts open in the same tab or a new tab.

The order of your forums#

Customers see your forums in the order you set.

1. In the Champ dashboard, open Forums.
2. Use the up and down arrows next to each forum to move it.

To reorder categories, drag them in Settings, under Categories.

Tip: put the forum you want a newcomer to read first at the top. This is often not your busiest forum.

Change the words on your forum#

You can change every piece of text the forum shows: buttons, headings, messages and error messages.

1. In the Champ dashboard, open Translation.
2. Find the text you want. The search box at the top finds it quickly.
3. Type your new wording in its box.
4. Click Save.

Your change shows on the forum right away. To go back to Champ's original wording, clear the box and save.

Use this to run your forum in another language. Or just change words to match how your community talks — for example "Topics" to "Threads", or "Post" to "Reply".

Custom CSS#

Who needs this: only people who know CSS (the code that controls how web pages look). The settings above cover most needs.

For anything the settings cannot do, open Design, find Custom CSS, add your CSS and click Update CSS.

.champ-topic-title {
  font-family: "Your Theme Font", sans-serif;
  letter-spacing: -0.01em;
}

Good to know:

• Champ checks your CSS before saving it. If there is a mistake that stops it working, Champ does not save it and tells you why. One typo cannot break your forum's look, colours included.
• Champ's class names do not change. We keep them the same on purpose, so your CSS keeps working after Champ updates. Inspect the page, use the class names you find, and they will still be there next year.

Avoid !important when you can. Also avoid styling by position on the page, like .champ-forum-row:nth-child(3) — it breaks as soon as you add a forum.

Using Liquid snippets#

Who needs this: only people who can edit Shopify theme code. Liquid is the template language Shopify themes are written in. A snippet is a small Liquid file in your theme.

You can add your own content to the forum page, or replace parts of it, with snippets from your theme.

1. In your Shopify admin, go to Online Store → Themes → Edit code → Snippets.
2. Create a snippet with one of the names below. For example, champ-sidebar becomes the file snippets/champ-sidebar.liquid.
3. Reload a forum page. Champ uses your snippet straight away. There is nothing to turn on in the Champ dashboard.

If a snippet does not exist, Champ shows its own content in that spot. So you only create the snippets you need. Delete a snippet to bring Champ's content back.

Insert snippets add your content. Champ's own content stays:

Replace snippets remove a part of Champ's page and show your snippet instead:

Shopify renders snippets as part of your theme. So they can use everything your theme can: shop, customer, customer.tags and the rest. For example, to show something only to customers with the vip tag:

{% if customer and customer.tags contains 'vip' %}
  <div class="vip-banner">Thanks for being a VIP member.</div>
{% endif %}

Layout definitions and the secondary sidebar#

champ-layout-definitions does not show anything on the page. It sets Liquid variables that control the layout. Create it to turn on the secondary sidebar, or to change the column widths:

{% assign show_secondary_sidebar = true %}
{% assign secondary_sidebar_visibility = 'home,topics,posts' %}

{% assign primary_sidebar = "col-12 col-md-4 order-2 order-md-1" %}
{% assign primary_content = "col-12 col-md-8 order-1 order-md-2" %}
{% assign inner_primary_content = "col-12 col-md-8" %}
{% assign inner_secondary_sidebar = "col-12 col-md-4" %}
{% assign footer_content = "col-12 col-md-8 offset-md-4" %}
{% assign footer_content_enabled = "col-12 col-md-8 offset-md-4" %}

• show_secondary_sidebar turns the champ-secondary-sidebar column on.
• secondary_sidebar_visibility lists the pages it appears on: home (the forum's main page), topics (a forum's list of topics) and posts (a single topic).
• The other variables are Bootstrap grid classes (Bootstrap is a common CSS toolkit). They set the width of the sidebar, the content column, the two inner columns when the secondary sidebar shows, and the footer. footer_content_enabled is used when the secondary sidebar is on that page. footer_content is used when it is not.

Snippets and CSS on the New forum design#

In Design, under Appearance, you can choose New forum. It is a rebuilt version of every forum page. All the snippet names above still work, in the same places. But the page code around them is new. If your forum already has snippets or custom CSS, check these points before you switch:

• Bootstrap is not loaded. Champ keeps the common layout pieces working — the container, row and col grid (including the md and lg column sizes), buttons, closed modals staying hidden, img-fluid, and a few spacing and text helpers. Anything else from Bootstrap loses its styling.
• jQuery is not loaded. Any script that uses $(...) stops working. Rewrite it in plain JavaScript. Forum pages also change without a full page reload, so a script that sets something up should check it has not already run.
• champ-layout-definitions only switches the secondary sidebar. show_secondary_sidebar and secondary_sidebar_visibility still work. The column-class variables are ignored, because the New forum sets its own columns.
• champ-header and champ-sidebar still replace the whole section. So a store with its own header never sees the new one. Remove the snippet if you want the new header.
• Your custom CSS is not carried over. It was written for the original page code, so the New forum does not use it. After you switch, Design → Custom CSS holds the New forum's own CSS, starting empty. Your original CSS is kept, and switching back brings it back.

Switching is instant, and so is switching back. Change the setting, then check your forum's main page, a topic and the reply box. If something needs work, switch back to Classic first.

Tips for trouble-free snippets:

• Test on a copy of your theme first. Snippets live in a theme. Duplicate your theme, add the snippets there, and use Preview. If you later publish a different theme, copy your snippets to it.
• A Liquid error hides the snippet. If a snippet has an error, Champ shows its own content in that spot instead of the error. If your snippet does not appear, check it for errors.
• Watch for links you typed in by hand. Links to the forum that you type into a snippet break if you change your forum address.

Change your forum's address (forum path)#

Your forum's address ends in /community/champ when you install Champ. For example: https://yourstore.com/community/champ. This last part is called the forum path.

You can change it in Settings, under Forum path. The dashboard suggests examples such as /a/forums or /community/message_board.

The forum path always has two parts: one of Shopify's four starting words (/a, /apps, /community or /tools), then a name you choose. This is how Shopify knows to show a Champ page. A path like /forums on its own does not work.

Before you change it, know that old links stop working. Menu links, links in emails, links inside posts, and forum pages Google already knows about all point to the old address.

If you change it:

1. Click Save.
2. Open your forum in a new tab straight away, at the new address.
3. If you see a "page not found" error, change the forum path back to what it was and save again.
4. Update the forum link in your store's menu (Content → Menus in your Shopify admin).

If your forum is new and has few visitors, changing the address now costs nothing. If your forum has been live for years, think carefully first: Google has to find every page again at its new address, and you may lose visitors from search for a while.

Forum search#

Search is off when you install Champ. To turn it on, open Settings, find Search, and turn on Enable search. A search box then appears on your forum pages. It searches topics and posts.

We recommend turning it on. Once you have a few hundred topics, search is how people find old answers.

How your forum looks on Google and in shared links#

These settings help Google show your forum well, and control how links look when people share them.

• Meta description (in Settings) — the short summary Google may show under your forum's name. Champ uses it when it cannot create a description from a topic or post.
• Link preview (Open Graph) (in Settings) — the title, description and image shown when someone shares a link to your forum, for example on Facebook.

Each topic gets its own description and link preview automatically. You can override them for a single topic. Each forum also has its own Search engines section, with Custom page title and Custom meta description.

Champ also creates a sitemap for your forum. A sitemap is a list of your forum's pages that helps Google find every topic.

Where missing pages go#

If someone opens a forum page that does not exist, Champ can send them somewhere useful instead. This helps after you move or delete forums.

In Settings, find 404 redirection and enter the full address, starting with https://. If you leave it blank, visitors go to your forum's main page.

YouTube and Vimeo videos#

Members can paste a YouTube or Vimeo link and have the video play inside the post. In Settings, find Media embeds (oEmbed) and turn on Embed YouTube links automatically and/or Embed Vimeo links automatically.

Both are off by default. An embedded video runs code from YouTube or Vimeo on your store. Turn them on if your community shares videos. Leave them off if it does not.

Private messages between members#

In Settings, find User messages and turn on Enable user-to-user messaging. Members can then send each other private messages. The messages appear in a chat window on forum pages. You cannot see these conversations.

Think before you turn this on. You cannot moderate private messages between customers, and some people misuse them. It works well on a members-only forum where you know who has access. On a forum that is open to everyone, it is a risk.

Member profiles#

In Settings, under User profiles, you can turn each of these on or off:

• Enable user descriptions — a short "about me" on the member's profile page
• Enable user signatures — a line shown after each of their posts
• Display profile view counts
• Make email addresses publicly viewable in user profiles — keep this off

Related settings in other sections:

• Display user avatars in the topics list — in Topic settings
• Anonymize usernames — in Privacy

Moderator badges on avatars#

Moderators get a badge on their avatar, so members know who speaks for your store. You can change how the badge looks with custom CSS.

Next#

• Image uploads →
• Storefront JavaScript →