Add Collection List below Collection Title

Store Design
, ,

Topic summary

A user wants to reposition the collection list to appear directly below the collection title on their Shopify store, which uses the Flex theme from Out of the Sandbox.

Proposed Solution:
Another participant provided step-by-step CSS customization instructions:

  • Navigate to theme code editor (Online Store → Themes → Edit code)
  • Locate the main stylesheet file (styles.css, theme.css, or base.css)
  • Add custom CSS targeting collection thumbnail overlays and captions
  • The CSS removes background colors, adjusts positioning to relative, and modifies title styling (color: black, font-size: 16px)

Status:
The solution has been offered but not yet confirmed as tested or successful by the original poster. The discussion remains open pending implementation feedback.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Looking for some help. Would like to put the collection list under the main collection title (as shown in image below). Any ideas? Using Flex theme from Out of the Sandbox.

URL: https://mrcoolhvacsupply.com/

Screenshot 2024-11-22 at 3.58.54 PM.png
Screenshot 2024-11-22 at 3.58.54 PM.png2840×1426 330 KB

2

Hello @NickGH14

Step 1 – Go to your theme code

  • In your Shopify admin, click Online Store → Themes.
  • Find the theme you’re working on and click Actions → Edit code.

Step 2 – Locate your stylesheet

  • In the left sidebar, open the Assets folder.
  • Look for a file named styles.css, theme.css, or base.css (depends on your theme).
    • If your theme has styles.css, click it.

Step 3 – Add your CSS at the bottom

Scroll all the way down to the bottom of that file and paste this code:

.collection-thumbnail-overlay {
  background-color: unset !important;
}

.collection-info__caption {
  position: relative !important;
}

span.title {
  color: black !important;
  font-size: 16px !important;
}

Step 4 – Save changes

Click the Save button (top right).

Step 5 – Check your store