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?