Hi
im needing some help. I would like to remove the outer green line around my collection, and also make my wording much more sleek. I’ve attached an example to show
Topic summary
A user seeks help removing a green border around their product collection and improving text styling to achieve a sleeker appearance. Two attached images illustrate the current design issues.
Solutions Provided:
-
Remove Green Border: Access Shopify Admin → Online Store → Themes → Edit Code, locate the CSS file (theme.css or style.css), and add
border: none !important;to the relevant collection class. -
Improve Typography: Modify CSS to use modern fonts like Montserrat, adjust font size/weight, add letter spacing, and apply neutral colors for a cleaner look.
-
Inspection Method: Use browser developer tools (right-click → Inspect) to identify exact CSS classes affecting the elements.
One responder requested the store URL for more specific assistance. The discussion includes before/after preview examples and step-by-step instructions with screenshots. The issue remains open pending implementation by the original poster.
Hy @DDClub
I can help you more if you can share your store URL.
Hi @DDClub
To help you remove the outer green line around your collection and make the wording sleeker, you’ll need to make some edits in your Shopify theme’s CSS. I’ll guide you through the process step-by-step. If you’re new to this, don’t worry; it’s straightforward!
1. Remove the Outer Green Line
The green line is likely coming from a border defined in your theme’s CSS. Here’s how you can remove it:
1-Go to your Shopify Admin:
- From your Shopify dashboard, click Online Store > Themes.
2-Edit Code:
- Click on Actions > Edit Code next to your active theme: https://prnt.sc/r0ZeLlFUxHSK
3-Find the Relevant CSS File:
- Look for a file named theme.css, style.css, or something similar in the Assets folder: https://prnt.sc/peyu4mMg4R79
4-Add or Modify the Code:
- Search for the CSS class affecting your collection. To specifically target the green border, you can add this CSS at the end of the file:
.collection-item { /* Replace with the actual class affecting your collection */
border: none !important; /* Removes the green border */
}
5-Save and Preview:
- Save your changes, and check if the border is gone on your storefront.
2. Make the Wording Sleeker
To improve the text design, you can:
- Adjust the font style, size, or weight.
- Add letter spacing or modify the alignment.
- Use a clean font like Roboto, Montserrat, or Open Sans.
Here’s a quick CSS snippet to make your wording more polished:
.collection-item-title { /* Replace with the actual class for your collection titles */
font-family: ‘Montserrat’, sans-serif; /* Sleek and modern font */
font-size: 18px; /* Adjust size as needed */
font-weight: 500; /* Adds a clean, semi-bold look */
color: #333; /* Neutral, elegant color */
letter-spacing: 0.5px; /* Adds a touch of spacing */
text-transform: capitalize; /* Optional: Makes text consistent */
}
3. Apply Custom Changes
If the green border and text styles are specific to your theme, inspect the elements using your browser’s developer tools:
- Right-click on the area you want to change, and select Inspect.
- Hover over the elements to find the exact CSS classes used. Update the code snippets above with those class names.
Example Preview
Here’s how the adjustments might look:
Before: https://prnt.sc/u0Zd7LaQVZRL
After: https://prnt.sc/x33knIyMxtl5
If you’re unsure about any step or need more help fine-tuning the design, let me know!
Best regards,
Daisy