Large White Space above all pages of Shopify Store

[BonerBossdotCom]

Good day Experts, I have this problem wherein I suddenly have this massive white gap above all pages on my Shopify store.

This occurred after I installed 2 apps, both for SEO and CSS optimization. I cannot seem to find a solution to reverse this and I am unsure which app caused this. Please help.

[BonerBossdotCom]

www.bonerboss.com

[tim]

Your assets/component-cart-drawer.css is empty.

Probably because of the CSS "optimization".

I'd roll back to the older theme version, before this app was installed.
Or, copy/paste contents of this file from the older theme (you'd need to remove the following code in this case)

<style>
  .drawer {
    visibility: hidden;
  }
</style>

[TheUntechnickle · Accepted solution]

Hey @BonerBossdotCom,

Please replace the content of your file (assets/component-cart-drawer.css) with this CSS:

/* Cart Drawer Component Styles for Origin Theme */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background-color: var(--color-background);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;
}

.cart-drawer.active {
  transform: translateX(0);
}

.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
}

.cart-drawer-heading {
  font-size: var(--font-size-heading-4);
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.cart-drawer-close {
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-drawer-close svg {
  width: 18px;
  height: 18px;
}

.cart-drawer-empty {
  padding: 40px 20px;
  text-align: center;
}

.cart-drawer-empty-message {
  font-size: var(--font-size-base);
  margin-bottom: 20px;
}

.cart-drawer-continue {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--color-button);
  color: var(--color-button-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: var(--font-weight-medium);
  transition: background-color 0.2s ease;
}

.cart-drawer-continue:hover {
  background-color: var(--color-button-hover);
}

.cart-drawer-items {
  padding: 20px;
}

.cart-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item-image {
  width: 80px;
  margin-right: 15px;
}

.cart-item-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cart-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cart-item-title-price {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cart-item-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  margin: 0;
}

.cart-item-price {
  font-weight: var(--font-weight-medium);
}

.cart-item-variant {
  font-size: var(--font-size-small);
  color: var(--color-text-subdued);
  margin-bottom: 12px;
}

.cart-item-quantity-remove {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.cart-item-quantity-button {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cart-item-quantity-input {
  width: 40px;
  text-align: center;
  border: none;
  -moz-appearance: textfield;
}

.cart-item-quantity-input::-webkit-outer-spin-button,
.cart-item-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item-remove {
  background: transparent;
  border: none;
  font-size: var(--font-size-small);
  color: var(--color-text-subdued);
  text-decoration: underline;
  cursor: pointer;
}

.cart-item-remove:hover {
  color: var(--color-text);
}

.cart-drawer-footer {
  padding: 20px;
  border-top: 1px solid var(--color-border);
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: var(--font-weight-medium);
}

.cart-drawer-checkout {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background-color: var(--color-button);
  color: var(--color-button-text);
  text-align: center;
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-drawer-checkout:hover {
  background-color: var(--color-button-hover);
}

.cart-drawer-view-cart {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background-color: transparent;
  color: var(--color-text);
  text-align: center;
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-drawer-view-cart:hover {
  background-color: var(--color-background-secondary);
}

.cart-note {
  margin-top: 20px;
}

.cart-note-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--font-size-small);
}

.cart-note-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  resize: vertical;
  min-height: 80px;
}

.free-shipping-bar {
  margin: 0 20px 15px;
  padding: 12px;
  background-color: var(--color-background-secondary);
  border-radius: 4px;
}

.free-shipping-message {
  font-size: var(--font-size-small);
  text-align: center;
}

.free-shipping-progress {
  margin-top: 8px;
  height: 6px;
  background-color: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.free-shipping-progress-bar {
  height: 100%;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

/* Responsive styles */
@media screen and (max-width: 767px) {
  .cart-drawer {
    width: 100%;
  }
  
  .cart-item-image {
    width: 60px;
  }
}

/* Animation for adding item to cart */
@keyframes itemAdded {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-item.just-added {
  animation: itemAdded 0.5s ease forwards;
}

/* Styles for upsell products */
.cart-upsell {
  padding: 15px 20px;
  border-top: 1px solid var(--color-border);
}

.cart-upsell-title {
  font-size: var(--font-size-base);
  margin: 0 0 15px;
  font-weight: var(--font-weight-medium);
}

.cart-upsell-product {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.cart-upsell-image {
  width: 60px;
  margin-right: 12px;
}

.cart-upsell-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cart-upsell-info {
  flex-grow: 1;
}

.cart-upsell-name {
  font-size: var(--font-size-small);
  margin: 0 0 5px;
  font-weight: var(--font-weight-medium);
}

.cart-upsell-price {
  font-size: var(--font-size-small);
  margin-bottom: 8px;
}

.cart-upsell-add {
  background-color: var(--color-button);
  color: var(--color-button-text);
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-upsell-add:hover {
  background-color: var(--color-button-hover);
}

The CSS optimisations you did broke your cart functionality, and that's been causing the issue. Hopefully this will resolve it! If it doesn't, please DM or email your collaborator code and we'll fix this for free.

Cheers!
Shubham | Untechnickle

[tim]

it's wrong code though. probably wrong theme version?

[topnewyork]

Hi @BonerBossdotCom , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks