Product style help

[DDClub]

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

 

 

 

[prpwebs]

Hy @DDClub 

I can help you more if you can share your store URL.

[DaisyVo]

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