Hello! I noticed a new issue with my website where every product pages opens with a huge image & a repeated title & order button before the “regular” section of the page loads beneath it. My site did not appear like this until the last few days. The link below is an example from my page, but every single product on my site now has this same issue:
I assume since this issue is page-wide, there is probably one core CSS line or lines of code that would patch this up, I’m just not sure where to start. Any help is appreciated, thank you!
Sim_1
January 9, 2026, 9:03pm
2
Hello there,
@carlslocker
Yes, I agree with Sim_1, but please back up your live theme and update your theme. I have seen the product page problem, which is a problem caused by CSS. If you update the theme but the problem is not solved, then tell me, and I will definitely help you.
following css code missing your assest/style.css file.
.sticky-add-to-cart__bar {
position: fixed;
bottom: 20px;
left: 50%;
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
display: block;
width: 600px;
border-radius: calc(
var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
);
box-shadow: var(--shadow-popover);
padding: var(--padding-sm);
/* Layout styling */
display: flex;
align-items: center;
gap: var(--gap-md);
@starting-style {
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
}
&::before {
--border: 2px;
content: '';
position: absolute;
inset: calc(var(--border) * -1);
background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
background-clip: content-box, border-box;
border: var(--border) solid #0000;
border-radius: inherit;
z-index: -1;
backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
}
}
@media (prefers-reduced-motion: no-preference) {
.sticky-add-to-cart__bar {
transition-property: transform, opacity, display;
transition-duration: 0.3s;
transition-timing-function: var(--ease-out-quad);
transition-behavior: allow-discrete;
}
}
.sticky-add-to-cart__bar[data-stuck='true'] {
transform: translateX(-50%) translateY(0%);
opacity: 1;
}
sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
display: none;
}
.sticky-add-to-cart__info[data-has-image='false'] {
padding-left: var(--padding-lg);
}
.sticky-add-to-cart__image {
flex-shrink: 0;
aspect-ratio: 1;
height: var(--height-buy-buttons);
overflow: hidden;
border-radius: var(--style-border-radius-buttons-primary);
background: var(--color-background-secondary);
}
.sticky-add-to-cart__image-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sticky-add-to-cart__info {
flex: 1;
min-width: 0; /* Allow text truncation */
}
.sticky-add-to-cart__title {
font-size: var(--font-paragraph-medium--size);
font-weight: var(--font-weight-semibold);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sticky-add-to-cart__variant {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
font-size: var(--font-paragraph-small--size);
margin-top: var(--margin-3xs);
}
.sticky-add-to-cart__price {
font-weight: var(--font-weight-semibold);
}
.sticky-add-to-cart__button {
height: var(--height-buy-buttons);
position: relative;
}
/* Mobile adjustments */
@media screen and (max-width: 749px) {
.sticky-add-to-cart__bar {
bottom: 0;
width: 100%;
max-width: none;
border-radius: 0;
&::before {
--border: 1px;
}
.add-to-cart-text__content {
display: none;
}
}
.sticky-add-to-cart__info[data-has-image='false'] {
padding-left: 0;
}
.sticky-add-to-cart__title {
font-size: var(--font-paragraph--size);
}
.sticky-add-to-cart__button {
padding: var(--padding-lg);
}
.sticky-add-to-cart__price {
font-size: var(--font-paragraph-small--size);
}
.sticky-add-to-cart__button {
width: var(--height-buy-buttons);
}
sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
display: initial;
}
sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
width: auto;
}
}
/* Small mobile - hide text content and compare price */
@media screen and (max-width: 389px) {
.sticky-add-to-cart__bar {
.compare-at-price {
display: none;
}
}
.sticky-add-to-cart__title {
display: none;
}
/* For product with only default variant show title */
.sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
display: block;
}
/* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
.sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
display: block;
}
.sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
Thanks!
Could also turn off “sticky cart” in product page settings.
Hi @carlslocker
Can you please send me a screenshot showing where the issue is occurring? I’m not able to see it on my end.
Perfect, fixed it right away - thank you!
@Josh_digital
Please stop using AI-generated responses.
First, it makes no sense that you do not know what theme it is and then ask for a collaborator’s code. AI can be helpful sometimes, but don’t you think the original poster can also ask ChatGPT? But they want an answer from real people’s experiences.
Second, it is against the rules of this community, and you will be banned.
Third, the topic is marked as solved, so why spam?
