DAWN THEME | Featured collection background color change + header alignment

Store Design
1

Hello!

I’m trying to change the color of my home page featured collection section and center the header of it, but I’m not sure what I have to do. Here’s a screenshot of the section I wanna make changes to. Any help?

Thanks in advance!

Screen Shot 2022-02-22 at 8.32.46 AM.png
Screen Shot 2022-02-22 at 8.32.46 AM.png2838×1474 422 KB

2

Hello Gbocachica,

This could be done with a little bit of css added to your page. But, at the moment, we should detect the name of the classes or sections that need to have the styling adjusted. Could you paste here the link to your website and specify the page where you can find this Featured Collection section or whether it should be modified for all the pages throughout the website?

3

share your store link

4

Here’s the link to view my store: https://aa3yw48e0wsv0efj-62289740035.shopifypreview.com

The Featured Collections that I want to edit are in the home page.

Thank you!

5

Hi @gbocachica ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
#shopify-section-template--15610864304387__featured_products {
    background-color: #fafafa;
padding-top: 10px;
}

#shopify-section-template--15610864304387__featured_products .title-wrapper-with-link {
    text-align: center;
    justify-content: center;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Just copied the code and it didn’t work.

7

add this code at the end of theme.css

.title-wrapper–self-padded-tablet-down {
justify-content: center !important;

}
#shopify-section-template–15610864304387__featured_products
{background-color:#e5e5e5 !important;}

8

Hi @gbocachica ,

Sorry for the late reply.

You can paste my code at the top of the base.css file.

#shopify-section-template--15610864304387__featured_products {
    background-color: #fafafa;
padding-top: 10px;
}

#shopify-section-template--15610864304387__featured_products .title-wrapper-with-link {
    text-align: center;
    justify-content: center;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Hi @AvadaCommerce ,

Just pasted the code at it worked, but it only worked in one of the Featured Collection sections of the Home Page. Any advice so it can work on both?

10

Hi @gbocachica ,

can you resend your site link? The previous preview link is dead

Thanks you

11

Here’s the link: https://9dg5zbtp2qn5w2mt-62289740035.shopifypreview.com
@AvadaCommerce

12

Hi @gbocachica ,

You can paste my code at the top of the base.css file:

.title-wrapper-with-link {
    justify-content: center !important;
}