Need Help Aligning Custom Announcement Bar in Impact Theme

Store Design
, , , , , ,

Topic summary

A user added a custom announcement bar below the header in Shopify’s Impact theme but encountered a layout issue: the content aligns correctly with the header, but the background doesn’t extend to full page width. The theme’s built-in width constraints appear to be limiting the background span.

Problem Details:

  • Custom bar appears above product images/content
  • Background box doesn’t reach viewport edges
  • Previous CSS attempts to override theme settings were unsuccessful
  • User provided test store URL (teststoreffw.myshopify.com) with password for troubleshooting

Solutions Offered:

Two community members provided CSS fixes targeting the custom announcement bar section:

  1. Made4uo-Ribe’s solution: Add CSS to base.css/style.css/theme.css targeting the section wrapper with background color styling
  2. devcoders’ solution: Add CSS to assets/theme.css removing left/right padding and adding bottom padding to the specific section

Both solutions involve editing theme CSS files through the Shopify admin code editor. The discussion includes a screenshot showing the desired full-width result.

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

Hi there,

I’ve added a second announcement bar under the header in my Impact theme. The theme already has a built-in announcement bar above the header, which works perfectly. However, for the custom announcement bar I’ve added below the header, I’m encountering the following issue:

  • The content (bullet points) aligns correctly with the header, but the background box doesn’t stretch to full width of the page.
  • It seems like the Impact theme’s built-in width constraints are affecting the new bar, and I need to make the background span the entire viewport while keeping the content aligned with the header.

I’ve tried adjusting the padding and width using custom CSS, but I can’t seem to override the theme’s settings properly without affecting other sections of the page.

Could anyone guide me on how to make the background of the custom announcement bar span full width while keeping the content aligned with the header?

Thanks in advance!

1 Like
2

Tijn2_0-1736712198646.png

3

That would be perfect brother!

4

Let me know what you need in order to help me out.

5

Sure you can connect with me on discord :
tijn_a
or telegram
@DitIsTijn

6

Hi @Tijn2

Please, share your store URL. Thanks!

7

Hello @Tijn2

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

8

Hi there,

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

9

Hi Devcoders,

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

10

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

1 Like
11

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.section.section-blends.section-full:has(div#s .custom-announcement-bar-wrapper) {
     background-color: rgb(250, 255, 225);
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

12

Hello @Tijn2

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

section#shopify-section-template--24779514675540__custom_liquid_Pdzct8 .section.section-blends.section-full {
padding-left: 0;
padding-right: 0;
padding-bottom: 15px;
}