🎨 Overview
This article provides the CSS code you need to move the product detail sidebar from the right side to the left side of the page in the Elevate theme.
By default, the product page displays the main content (lessons, sections, etc.) on the left and the sidebar (About card, progress info) on the right. The CSS below flips this layout so the sidebar appears on the left instead.
Before (default — sidebar on the right)
After (updated — sidebar on the left)
🛠️ How to Change the Product Menu Orientation
Follow the steps below to move the product sidebar to the left side of the page:
Click Settings (gear icon) in the sidebar, hover over Brand, then click Theme.
Click the ADVANCED tab at the top of the page.
Make sure the CSS sub-tab is selected (it is by default).
Copy and paste the following code into the CSS editor:
/* Move the product sidebar to the left */.ch-page-product-detail__grid { direction: rtl;}.ch-page-product-detail__grid > * { direction: ltr;}Click SAVE to save your changes.
Click PUBLISH to publish the theme changes (this may take up to a minute — please do not leave the page until publishing is complete).
⚠️ If you have existing custom CSS, add the new code below your existing styles so nothing is overwritten.
💡 How It Works
The CSS code uses the direction: rtl (right-to-left) property on the product page grid container to reverse the column order. The second rule (direction: ltr) on child elements ensures all text and content within each column still reads left-to-right as expected.
This approach targets the .ch-page-product-detail__grid class, which controls the layout of the product detail page in the Elevate theme.
🔍 Finding CSS Class Names
The Elevate theme includes a built-in Content Reference tool that lists every CSS class available for customization. To access it:
Go to Settings (gear icon) → Brand → Theme.
Click the CONTENT tab.
Use the PAGES and COMPONENTS tabs to browse all available CSS classes, or use the Filter search bar to find specific selectors.
💡 The Content Reference tool is a great way to discover CSS class names for any page or component you want to customize. You can copy selectors directly from the reference and paste them into the CSS editor.