How can I change the footer line color in my Debut theme?

Store Design
, ,

Topic summary

A user seeks to change the color of a footer line in their Debut theme and requests the CSS code.

Multiple solutions provided:

  • PageFly-Lucas suggests adding code to theme.scss.css:

    .devQuickLinks .site-footer__item {
  border-right: 1px solid red !important;
}

  • irene-vintage recommends modifying base.css in the Assets folder:

    .footer-line {
  background-color: #0000FF; /* Replace with desired color */
}

  • Ujjaval and INA_MSWEB both propose similar solutions targeting .devQuickLinks .site-footer__item with border-right: 1px solid #b15305 !important;

Common approach: Navigate to Online Store → Themes → Edit code, locate the appropriate CSS file, and paste the provided code at the bottom. All responders emphasize saving changes and previewing results.

Note: Some text in responses appears reversed/corrupted but the CSS code snippets remain intact and actionable.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

hi,

I want to change the color of the line in my footer (shown below in picture). Can someone please give me the code for this.

coding 2.jpg
coding 2.jpg1749×1205 167 KB

My URL is www.embroideryandsage.com

thanks!

2

Hi @embroiderysage

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss.css

Step 3: Paste the below code at bottom of the file → Save

.devQuickLinks .site-footer__item {

border-right: 1px solid red !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

3

Hello @embroiderysage ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css filde → add this following code at the bottom of page

.footer-line {
  background-color: #FF0000; /* Replace with your desired color */
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

1 Like
4

@embroiderysage add below css into devM-style.css file

.devQuickLinks .site-footer__item {
    border-right: 1px solid #b15305 !important;
}

Ujjaval_0-1685425384163.png
Ujjaval_0-1685425384163.png1587×787 235 KB

5

Hi @embroiderysage

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

.devQuickLinks .site-footer__item {border-right: 1px solid #b15305 !important;}

Regards,

San