Impact Theme CSS

Store Design

Topic summary

A user seeks to reduce vertical spacing around button areas in Shopify’s Impact theme, specifically wanting to make margins more uniform between the “Add to Cart” button, offer notifications, and a wishlist button (indicated by red arrows in an attached screenshot).

Solutions Provided:

Two developers offered identical CSS code targeting specific block elements:

  • Add custom CSS to either theme.css or base.css
  • The code adjusts margin-bottom for buy buttons, removes margin from offer lists, and adds margin-top to the wishlist button block
  • Both solutions include the exact CSS snippet with block-specific data attributes

Alternative Perspective:

One commenter suggests leaving the spacing as-is, noting it helps the Add to Cart button stand out visually and warns that modifying margins might create issues when customizing other auto-spaced block options in the future.

Status: Multiple CSS solutions provided; discussion appears resolved with code implementation pending user testing.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I am curious if anyone is familiar with the Impact theme. It doesn’t allow you to change the top and bottom margins of its block sections within the theme easily. I was wondering if anyone knew a hack to make around the button areas (red arrows) more cohesive like the green arrow. It’s messing with my ocd. Thank you.

Screenshot 2025-07-25 at 3.48.04 PM
Screenshot 2025-07-25 at 3.48.04 PM1920×1450 79.4 KB

2

Hey @modernout,
Could you please share your store URL along with password [if applicable] so that I can take a look and provide you with the solution code.
Waiting to hear back from you.
Thanks

3

My url is modernout.com or modernout.Myshopify.com

4

@modernout Can you please share this page link?

5

Hi @modernout ,
Go to Online Store > Themes > Actions > Edit Code > theme.css
Add below code at the bottom of theme.css file

.product-info__block-item[data-block-id="buy_buttons"] {
    margin-bottom: 1rem;
}
body .product-info__block-group.product-info__offer-list {
    margin: 0;
}
.product-info__block-item[data-block-id="AWEZVMHR6UWhHT0dib__swish_formerly_wishlist_king_wishlist_button_block_WrBrF6-1"] {
    margin-top: 1rem;
}

image
image1796×801 106 KB

6

Hello @modernout

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

.product-info__block-item[data-block-id="buy_buttons"] {
    margin-bottom: 1rem;
}
body .product-info__block-group.product-info__offer-list {
    margin: 0;
}
.product-info__block-item[data-block-id="AWEZVMHR6UWhHT0dib__swish_formerly_wishlist_king_wishlist_button_block_WrBrF6-1"] {
    margin-top: 1rem;
}
7

Frankly, I don’t see why that space bothers you. It allows the Add to Cart button to stand apart from other notification boxes. Your theme includes several block options below the yellow button with “auto” spacing, so if you edit the button margin, you may end up chasing your tail when you customize the page in the future.

1 Like