Sidebar Collection

For Plain Jane, and Plain Jane Interactive

What You’ll Learn

• How to configure the Sidebar Collection section

• How to adjust cart, menu, product, and label settings

• How to enable sort, search, and pagination behavior

---

How to Customize the Sidebar Collection

1. Navigate to Theme Editor

   • From your Shopify admin, go to Online Store > Themes

   • Click Customize on your active theme

   • Open the Collection template and select the Sidebar Collection section

2. Sidebar Menu

   • Click Select to assign a menu

   • Position the sidebar on the Left or Right

   • Optionally upload a skin image to customize the background

3. Sidebar Settings

   • Adjust Sidebar Opacity using the slider (e.g. 1 px)

   • Set the Background Color (e.g. #202020)

   • Toggle Enable Fixed Menu or Enable Sidebar Shadow as needed

4. Date & Time (Optional)

   • Customize Date/Time Colors for desktop and mobile

   • Toggle Show Date/Time to display timestamps

5. Sidebar Links

   • Set Text Alignment (Left, Center)

   • Adjust spacing for link levels and font size

   • Customize colors:

     • Menu & Cart Link Colors

     • Cart Text, Quantity, and Background colors

     • Mobile Colors included

6. Product Titles & Prices

   • Customize font size and text color for titles and prices

   • Set Compare Price Color (e.g. red #FF0000)

   • Toggle display options:

     • Show Product Titles

     • Show Product Prices

     • Show Compare Prices

7. Labels

   • Set font size and background/text colors for:

     • Pre-Order

     • On Sale

     • Out of Stock

   • Toggle visibility of each label type

8. Product Background

   • Set corner radius and background color

   • Optionally make the background transparent

9. Search & Sort Icons

   • Set icon position and colors

   • Toggle visibility of search/sort icons and swap icons

10. Search Bar

    • Adjust background opacity and colors for:

      • Search box

      • Cancel button

      • Search results

      • Input field

    • Style corners and shadows optionally

11. Sort Menu

    • Customize:

      • Text & background colors for default and active options

      • Sort menu handle colors

12. Pagination & Loading

    • Choose Pagination Type: Infinite Scroll or Page Numbers

    • Set colors for:

      • Pagination Text

      • Active Page and its text

      • Pagination Arrows

💡 Tip: Make sure to preview on both desktop and mobile views to confirm spacing, readability, and layout integrity.

Need Help?

• 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6
• 📧 Email us at: [e-mail]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website