Want to add a forum like this one to your store? Install Champ Now

Welcome to Champ's live demo

Did you know that this isn't just a demo?
This is our live pre-sales Q&A and support forum. Take a look around and say "Hello".


[New Feature] Layout customization

Mar 18, 2020 - 1:50 PM

https://getchamp.myshopify.com/community/champ/forums/7/topics/15948 Copy
  • Hi everyone,

    I hope everyone reading this is safe and well, wherever in the world you are. First off, apologies for the delay in feature development for Champ. As most of you are probably experiencing in your local region, there have been a lot of disruptions in our daily lives due to COVID-19. I will try my best to add additional features to Champ during this time.

    Today, I added a new feature, as requested by @brett.

    You can now add an additional column in the main area of the page. This feature is a bit advance, and so feel free to ignore this post if you don't feel comfortable with:

    • HTML
    • Liquid snippets
    • CSS / JavaScript

    Note that this is not a feature for everyone. It is there if you need it, but it is not necessary to use Champ. I cannot help you in customizing this sidebar, but it is there should you need the layout flexibility.

    Having given the proper warnings and disclaimers, let's get on with how to use this.

    Let's take a look at the finished product:


    What we're trying to do is add an additional sidebar to the left (or right) of the main content area.


    To do this, you will need to create TWO snippets:

    • champ-layout-definitions
    • champ-secondary-sidebar

    In the Champ layout definitions, you can define the columns for the Primary sidebar and Main content (Primary content) areas. Champ uses Bootstrap 4 as its base CSS framework, so you can read up about how to do that here: https://getbootstrap.com/docs/4.4/layout/overview/

    You will define the classes that Champ uses to render the Primary Sidebar and Content columns. Note that all responsive classes will work, so you should use these in mind:

    eg. col-12 col-md-8 (This will use the full width by default, and an 8 column width for medium width screen sizes) -- again, these instructions are on the Bootstrap website.

    Here is an example of all the variables you need to assign in the champ-layout-definitions:

    {% assign primary_sidebar = "col-12 col-md-3" %}
    {% assign primary_content = "col-12 col-md-9" %}
    {% assign show_secondary_sidebar = true %}
    {% assign inner_primary_content = "col-12 col-md-8 order-2 order-md-2" %}
    {% assign inner_secondary_sidebar = "col-12 col-md-4 order-1 order-md-1" %}
    {% assign secondary_sidebar_visibility = "home, topics, posts" %}
    {% assign footer_content = "col-12 col-md-8" %}
    {% assign footer_content_enabled = "col-12 col-md-8" %}
    • primary_sidebar: defines the column for the main sidebar
    • primary_content: defines the column for main content area

    To enable the secondary sidebar section, set show_secondary_sidebar as true. This will divide up the main content area into an inner sidebar and content area, which you can further define with inner_secondary_sidebar and inner_primary_content.

    Next up, you can define which pages this secondary sidebar will appear on:

    • home
    • topics pages
    • individual post pages

    And finally, to match your above layout, you can define what the footer area looks like. Again, there are two variables: footer_content and footer_content_enabled.

    The footer_content is when the secondary sidebar is NOT shown, and the footer_content_enabled is when it IS shown.

    So with all that out of the way, you can use this secondary sidebar to create an affixed sidebar, by leveraging some JavaScript or an external library or even plain CSS, such as these:

    Next, you need to create a snippet called champ-secondary-sidebar to add the content you want. In here, it's just plain HTML. You can add JavaScript or CSS as well, by wrapping them in <script></script> and/or <stylesheet></stylesheet> tags, as usual.

    Have fun with this.

    This post was edited Mar 18, 2020 01:55PM

    Need help? Contact me at support@getchamp.net or here. Brand new! Add your own signature at https://getchamp.myshopify.com/community/champ/preference
  • Awesome feature !!!

    I have a suggestion
    Not essential for me but a nice-to-have

    Allowing basically to have a different layout for the Homepage, Topics, and Posts
    I understand as per your example that the configured layout is shared for all the page types selected in secondary_sidebar_visibility

    Thinking of creating a Homepage with a different grid than my posts
    Something like this: https://werkstatt.fuelthemes.net/grid-4-columns/

    Maybe that's possible already and I missed how to do it. Sorry for that

    Thank you


    Champ user
  • Hi @brett , what you described is not really doable (not easily, I don't think, without using a bunch of JavaScript).

    There's a lot of layout formatting code on the backend, and unfortunately, will be difficult to redesign without a lot of planning. I'll put your suggestion somewhere in my brain and will consider it during the next major rewrite of the application.


    Need help? Contact me at support@getchamp.net or here. Brand new! Add your own signature at https://getchamp.myshopify.com/community/champ/preference
  • Gotcha and absolutely no worries at all.
    Once again, this one cool but necessary idea at all :)


    Champ user
Quick reply

How to format posts

Champ uses Markdown for formatting text in posts. Certain markup tags (eg. H1) are forbidden to ensure that pages remain semantically compliant. Other tags are automatically sanitized to ensure all content is secure.

  • Emphasis, aka italics, with *asterisks* or _underscores_.
  • Strong emphasis, aka bold, with **asterisks** or __underscores__.
  • Combined emphasis with **asterisks and _underscores_**.
  • Strikethrough uses two tildes. ~~Scratch this.~~
  • Links are added automatically, but can be formatted like so: [My link](https://mylink.com)
For more information, take a look at the Markdown Cheatsheet.