Customizing Forums

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:

Logo settings

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:

Example logo header

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:

Champ's customizable menu

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:

Modify Champ menus

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.

Colour modifications

You can adjust certain colour settings by going to Design in the dashboard:

You will be able to adjust certain colour settings:

Champ 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:

Champ custom labeling

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)
  • Sidebar (champ-sidebar)
  • Above footer (champ-above-footer)
  • Footer (champ-footer)
  • Below footer (champ-below-footer)
  • Within the <head> section right before </head> (champ-head-section)

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:

  1. You need to update the app’s forum path setting
  2. 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 View Details for Champ:

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.

© 2018 GetChamp.net