About customizations
Important: please note that we at Champ cannot help with your specific customization requests. Unfortunately, due to the large number of ways that things can be customized, our small team is unable to handle such requests. We recommend that you reach out to the many Shopify experts for help.
Champ is designed to offer basic customizations out of the box, such as:
- Logo
- Menus
- Changing the forum (page) layout
- Colour modifications
- Translations
Champ also allows you to perform more advance customizations:
- Custom CSS
- Using customized Liquid snippets
Logo
By default, Champ displays your myshopify.com domain on the upper left hand corner of your forum. Understandably, this doesn’t look too nice to your visitors! We recommend that the first step you make in customizing your forum is to upload your own logo.
You can do this in the dashboard by going to Settings. At the very top, you’ll see a section where you can upload and save your logo:
Tip: We recommend that you use a transparent PNG image for the logo. The logo itself should, ideally, by white in colour. This typically looks quite nice with a darkish background.
Example:
You can also customize the height and the URL of the logo:
Note: These options only appear after you’ve uploaded your logo.
Changing forum layout
You can change the forum (page) layout right within Champ without modifying any CSS. Please note that changing the layout will change it across all your pages within Champ. There is no option to set the layout per forum or on a specific page only.
With Champ, you have 4 layout choices:
- Right menu (default)
- Left menu
- Full width with info menu on the top
- Full width with info menu n the bottom
To change the layout, go to Designs. You will see the four (4) layout choices. Select the one you want and click Update layout.
Menus
The menu that’s displayed at the top of your forum can be customized:
You can customize it by going to Champ’s dashboard and clicking on Settings.
There, you will see a section to add, remove, edit, or rearrange menu items:
To add a menu item, enter the name of the menu item in the input box and the link you want the menu item to go to. Don’t forget to add the http:// or https:// before the URL address. Champ does not verify that your link works, and so remember to check that your link is valid before entering it. Once you’re done, click on Add and it will be added.
Click on any of the added menu items to edit it.
If you need to rearrange menu items, you can drag the bars to the left of the item to rearrange it in the order that you like.
Menu items are displayed from left to right. If you need to change this, you can modify this using custom CSS.
You also have the option to display the Login / User link on the right hand side. When activated, a login link will appear when a user is not logged in. If a user is logged in, a link to the user preference page appears instead.
Right sided menu
For the right side menu, you can decide whether you want to show the login/logout/user preference link:
Colour modifications
You can adjust certain colour settings by going to Design in the dashboard:
You will be able to adjust certain colour settings:
Not all colours can be modified here. As everything is just CSS, you can add and modify the default CSS yourself in the space provided below:
Note: As our team is quite small, we don’t support custom CSS modifications. We recommend asking one of the many Shopify experts who can help you make CSS modifications to your online store to help you make any desired adjustments if you’re not familiar with CSS code.
Forums sort order
You may want to sort your forums in a specific order in the forum view.
Sorting forums can be done in the dashboard. Click on Forums to begin.
On the screen, you’ll see the list of forums on your site. To the right of each forum, you will see up and down sort arrows, which correspond to the positioning of each forum:
Note: If you have forum categorization active, the sort order will be separated into its respective category.
Translations
Champ comes with a default set of labels. If you need to change the labels to fit your local languages, or you simply want to edit the labeling, go to Translations.
You’ll see the available labels that you can change there:
All user-facing labels are editable here. The following HTML tags can be inserted in the label here:
- p
- b
- em
- h1
- h2
- h3
- h4
- h5
- h6
- img
- a
- ul
- ol
- li
- i
For example, in the Footer text, you can use something like this:
Back to <a href=”https://mystore.com”>the store</a>
This will generate a link for the words “the store” with the URL https://mystore.com.
Remember to click Save when you’re done.
Custom CSS
If there’s something specific you want to achieve in styling your forums, custom CSS is one of the ways to do it.
Champ’s layout is based on Bootstrap 4.0.0’s template. As such, you can base any custom CSS or code on Bootstrap’s existing CSS classes. In the various layouts of the forum, you will see Champ specific CSS classes (prefixed with champ-*). You can use these to “hook in” the appropriate CSS styles. If there’s a part of the forum templates that is missing these prefixes, please contact us at support@getchamp.net and we can rectify it.
To learn more about Bootstrap 4.0.0, go to Bootstrap’s official website.
We don’t offer tutorials on how to do this as this is beyond the scope of our guides here. There are many tutorials on the internet that can help you with this.
Finally, as our team is quite small, we can’t help with customization requests. We recommend asking one of the many Shopify experts who can help you make CSS modifications to your online store to help you make any desired adjustments if you’re not familiar with CSS code.
Using customized Liquid snippets
Champ lets you completely replace certain sections with custom Liquid snippets.
- Above header (champ-above-header)
- Header (champ-header)
- Below header (champ-below-header)
- Above sidebar (champ-above-sidebar)
- Sidebar (champ-sidebar)
- Below sidebar (champ-below-sidebar)
- Above footer (champ-above-footer)
- Footer (champ-footer)
- Below footer (champ-below-footer)
- Within the <head> section right before </head> (champ-head-section)
- Area beneath each post reply text area (champ-reply-box-append)
To add/replace the default parts of the layout, you will need to create a snippet file in your shop’s theme. Champ will read those snippet files and insert/replace them when Champ renders your forum page.
The snippets needs to be named in a specific way for Champ to read the file properly. The name is in parenthesis in the list above.
Custom forum path
By default, Champ installs to the /community/champ path of your store. So if your Shopify domain is https://getchamp.myshopify.com, then the forum will be at https://getchamp.myshopify.com/community/champ.
This can be (somewhat) customized. There are several path prefixes that Shopify allows:
- /apps
- /a
- /community
- /tools
The path can be customized from /community/champ to /apps/forums, for example.
To change this, there are 2 changes that need to happen:
- You need to update the app’s forum path setting
- You will need to update the settings in your Shopify dashboard.
To update the app’s forum path setting, go to Champ’s dashboard and update the path to whatever new path you want. Click on Settings to get here:
Remember to click Save.
Next, you will need to update the settings in the Shopify dashboard. Go to Apps and click on About for Champ:
Find the proxy path setting and click on Customize URL:
A popup will appear that will allow you to change the path:
Once both of these steps are done, your forum will be located in its new location.
A note about the URL’s in Champ: As of July 24, 2018, we’ve modified the URLs generated by Champ to include the title of the forum or the topic. This URL is preceded by a unique ID to ensure that URLs do not conflict should there be duplicates.
Enabling forum search
You can enable users to search your forums by going to Settings > Enable Search.
A search bar will be added to the forum’s sidebar.
Meta description
You can set your site’s meta description in the Settings.
By default, this meta description will be used on all pages that are not forum or topic pages.
For forum pages (eg. /community/champ/forums/1-my-forum), you can specify the description under the forum specific settings. Again, this is set in the dashboard.
For topic pages (eg. /community/champ/forums/1-my-forum/1-my-topic), Champ will extract the first post’s content into a short excerpt and use that as the meta description.
Embedding YouTube videos
You may wish to allow your users to embed YouTube videos into the forum.
Champ can automatically convert YouTube links into embedded videos. To enable this feature, go to Settings and scroll to YouTube Embed settings:
YouTube is a trademark and property of Google.
User messaging
Champ has a feature where you can allow users to message each other via private messaging. This feature is turned off by default. To enable it, activate the checkbox and click Save:
User profiles
A user’s profile displays your users forum statistics and other user-related information. This page is publicly accessible and looks something like this:
Each user has their own unique page with their own unique information.
You can specify what kind of information this page presents to the public:
You can:
- Make a user’s email address publicly viewable. The email address is pulled from your existing Shopify customer database. Note that you should only do this if you have secured your forums as this will lead to search engines indexing your users’ private information.
- Display profile view counts
Other options available here is for you to add the ability for users to add a customized signature. This signature will display after every post by that user.
404 redirection
You can set the redirection path of Champ when a user tries to access a page that doesn’t exist in your forum.
By default, the user will be redirected to the root path of your forum.
However, you can create a custom 404 page (in your Shopify store, using the Page feature) to create a custom 404 page for your forum.
To modify this, go to Settings and scroll to 404 Redirection.
Adding moderator badges to avatars
Let’s take a look if you want to add a moderator badge to avatars that belong to moderators. For example:
In this example, we’ll be adding a checkmark to the upper right hand corner of the avatar. To accomplish this, you’ll need to know a bit of HTML, CSS, and JavaScript.
Note: We won’t be able to provide support to customize or help you design this. This involves some tinkering (ie. trial and error) in order to get this right.
All moderator avatars have the class of champ-moderator-badge in the img tag:
You can see from the above screenshot of the HTML code that you can use the champ-moderator-badge to add HTML and CSS (using jQuery) to display a badge.
Here’s the code to add some extra markup, based on champ-moderator-badge:
To add this code, create a champ-below-footer snippet file in your Shopify theme. The code in this file will be injected into your champ page automatically.
A quick explanation of what this code does:
- It will pick up the img tags with the class of champ-moderator-badge in various places (eg. within a post, in the user online section, etc) and will add some markup for the badge.
- It will refresh every time the page is refreshed (by responding to the champ-loaded event).
- It will remove any old tags (so tags don’t get created twice).
- We also use a checkmark emoji here to signify the badge:
Next, we add some CSS in the app’s dashboard:
Depending on how you want things to look, you will need to customize this yourself. You will also notice that the CSS we write here isn’t the traditional CSS, as you can nest CSS classes here. The CSS here is preprocessed using SCSS.