Change background colour of collection page - Atlantic theme

[AU]

Hi - I would like to be able to change the dark grey background colour of the collection pages on this page.
Thanks for your help.

Link https://5lmkqkbxyv3oxgud-69025857763.shopifypreview.com

[niraj_patel]

Hello @AU 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 div#shopify-section-template--17604163502307__main {
      background: #a9a9a9 !important;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[AU]

Hi thank you for your response. Unfortunately this has not worked.

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
div[data-section-id="template--17604163502307__main"] {
background: darkgray !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[AU]

Hi just to clarify what I need is to remove the dark grey from the "collection boxes" on the home page , not change the backgrounds of the individual collection pages. Hope that makes sense.

[GTLOfficial]

Hello @AU 
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
add this code at the end of the file.

#shopify-section-template--17604163502307__main {
background-color: gray !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Sweans]

Hi @AU ,

To change the background color, you can follow the steps given below.

1. Log in to your Shopify Admin Panel:

2. Navigate to Online Store > Themes:

   In the left-hand sidebar, go to "Online Store" and then click on "Themes."

3. Edit Code:

   Find your active theme, click on "Actions," and select "Edit code."

4. Locate the CSS File:

   In the left-hand sidebar, find the Assets folder and look for a file with a name like theme.css, style.css, or something similar. Click on this file to open it.

Add the CSS Code:

for collection page

[data-section-type="static-collection-list]{
 background-color: #grey !important;
}

for sub collection pages like nautical collection , artic animals etc.

[data-section-type="static-subcollection"] {
    background-color: #grey !important;
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[BSSCommerce-B2B]

HI @AU , 

I have reviewed your requirement, you just need to edit script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.location.pathname.includes('/collections') || window.location.pathname.includes('/pages')) {
      var pageBodyContent = document.querySelector('.page-body-content');
      if (pageBodyContent) {
        pageBodyContent.style.background = 'darkgrey';
      }
    }
  });
</script>

In this step, you change the background of body content to darkgrey and only effect on collection page as you want.

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!