Need a little help customizing my Collections List page

[AreaMan]

I'd like to make a few changes to my Collections List page, and would be super appreciative if someone could give me a hand:

1. change the background color of the main content area only (not the header and footer) to white.
2. remove the thin divider line beneath the headline OUR COLLECTIONS.
3. adjust the size of the headline (reduce it a few point sizes) to match the others on my site.

I'm using the Atlantic theme. Here is my collections list page.

Thanks in advance for any assistance 🙂

[DaisyVo]

Hi @AreaMan 

I understand you're looking to customize your Collections List page in the Atlantic theme. Let's tackle each of your requests step by step.

1. Change the Background Color of the Main Content Area to White

To set the main content area's background to white without affecting the header and footer:

• From your Shopify admin, navigate to Online Store > Themes.
• Find your current theme (Atlantic) and click Customize: https://prnt.sc/9q9malyRGlaI
• In the theme editor, select Theme settings (usually represented by a gear icon).
• Click on Colors.
• Locate the setting for the main content area's background color. Set it to white (#FFFFFF).

If the theme settings don't offer this specific option, you might need to add custom CSS:

• Go back to Online Store > Themes.
• Click on Actions > Edit code: https://prnt.sc/DVzk-BYGniPf
• In the Assets folder, open your main CSS file (often named theme.css or styles.css).

At the bottom of the file, add:

.main-content {

  background-color: #FFFFFF;

}

• Save your changes.

2. Remove the Thin Divider Line Beneath the "OUR COLLECTIONS" Headline

To eliminate the divider line under the "OUR COLLECTIONS" heading:

In the same CSS file (theme.css or styles.css), add:

.collections-list .section-header__divider {

  display: none;

}

• Save your changes.

3. Adjust the Size of the "OUR COLLECTIONS" Headline

To reduce the headline size to match others on your site:

Still in the CSS file, add:

.collections-list .section-header__title {

  font-size: [desired size]px;

}

• Replace [desired size] with the font size in pixels that matches your site's other headlines.
• Save your changes.

Important Note: Before making any code changes, it's wise to back up your theme to prevent potential issues. If you're not comfortable editing code, consider reaching out to a developer or the theme's support team.

If you need any other assistance, I am willing to help.

Best regards,

Daisy.

[AreaMan]

Hi @DaisyVo,

I added all three changes to the bottom of the theme.css.liquid file (see attached). Unfortunately, none of the changes affected the site experience. Did I do something incorrectly? I appreciate your help!