Add to Cart button height is cut in half on live product page

Technical Q&A
,
1

I’m having an issue with my “Add to Cart” button on my Shopify product page. In the Shopify editor, the button appears normal and everything looks fine. However, when I view the actual product page (live view), the button no longer looks correct.

The button is still there, but its height is cut in half, which makes it look distorted.

The issue was already there before I added any custom code, so it’s probably not caused by that.

Does anyone know what could be causing this difference between the editor view and the live page?

Scherm­afbeelding 2026-02-25 om 16.36.53
Scherm­afbeelding 2026-02-25 om 16.36.531920×916 205 KB

4

This is probably a CSS specificity issue where something on the live site is overriding the button’s default styles, even if you haven’t added custom code yourself. The editor often renders with slightly different CSS and in an iframe that isolates its styles.

First thing to do is open your live product page, right-click on the “Add to Cart” button, and select “Inspect” (or “Inspect Element”). Look at the height, min-height, padding, and line-height properties applied to the button itself and its parent elements. You’ll likely see a conflicting rule from another stylesheet (possibly an app’s CSS, a theme update, or even a different part of your theme’s default styles) that’s setting a fixed, smaller height or zero padding that overrides the normal button styling.

Pay close attention to any !important declarations or rules with higher specificity. You can usually identify the problematic CSS file and line number in the inspector. Once you find it, you might need to add some custom CSS to your theme’s base.css or theme.css file (or directly in the theme customizer’s custom CSS section) to specifically target that button and override the incorrect styling. Something like button.add-to-cart { height: auto !important; padding: 15px 30px !important; } might fix it, but you’ll need to adjust the selector and values based on what you find in the inspector.

Hope that helps!

1 Like
5

Please share the link to your product page so we can check

7

Thank you for your response and the clear explanation, I really appreciate it.

In the end, I solved the issue by reverting back to a previous version of my theme, before I had added any custom code. The only custom code I had added was code I tried implementing with AI to increase trust on the product page (such as additional trust elements). I noticed the issue appeared in that version.

However, I don’t think it was necessarily the custom code itself, but possibly how or where it was added.

Do you have any advice on how to properly implement trust elements on the product page without affecting the styling or other parts of the theme?

type or paste code here
<div class="custom-product-notices">
  <div class="notice limited">
    <span class="pulse-dot" aria-hidden="true"></span>
    <span>Beperkte hoeveelheid</span>
  </div>

  <div class="notice">
    <!-- uniek class voor het verzend-icoon -->
    <svg class="icon shipping-icon" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 -960 960 960" fill="currentColor"
         role="img" aria-label="Gratis verzending">
      <path d="M155-195q-35-35-35-85H40v-440q0-33 23.5-56.5T120-800h560v160h120l120 160v200h-80q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35q-50 0-85-35Zm113.5-56.5Q280-263 280-280t-11.5-28.5Q257-320 240-320t-28.5 11.5Q200-297 200-280t11.5 28.5Q223-240 240-240t28.5-11.5ZM120-360h32q17-18 39-29t49-11q27 0 49 11t39 29h272v-360H120v360Zm628.5 108.5Q760-263 760-280t-11.5-28.5Q737-320 720-320t-28.5 11.5Q680-297 680-280t11.5 28.5Q703-240 720-240t28.5-11.5ZM680-440h170l-90-120h-80v120Z"/>
    </svg>
    <span>Gratis verzending met Czech Post en PPL.</span>
  </div>

  <div class="notice">
    <!-- uniek class voor het retour-icoon -->
    <svg class="icon return-icon" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 -960 960 960" fill="currentColor"
         role="img" aria-label="30 dagen retourrecht">
      <path d="M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z"/>
    </svg>
    <span>30 dagen retourrecht zonder risico</span>
  </div>
</div>
/* Základní styl pro blok upozornění */
.custom-product-notices {
  margin-top: 14px;
  color: #333;
  font-family: sans-serif;
}

.custom-product-notices .notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 14px;
}

/* Všechny ikony mají pevnou velikost */
.custom-product-notices .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
}

/* Pulzující tečka */
.pulse-dot {
  width: 10px;
  height: 10px;
  background: #e10600;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #e10600;
  animation: pulse 1.5s infinite;
  opacity: .6;
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}