HELP ! Few issues after New Update Baseline Theme Version 3.2.1

Store Design
, , , ,

Topic summary

After updating the Shopify Baseline theme to version 3.2.1, prior customizations stopped working and visual behavior changed. Before/after screenshots and the storefront URL with a password were shared, making images central to understanding the issues.

Key regressions reported:

  • Page shifts horizontally when scrolling (loss of fixed layout behavior).
  • Transparent sticky header on product pages no longer appears. A sticky header is a header that remains fixed at the top while scrolling.
  • Product image slider pagination dots are missing. These are the overlay dots indicating slide position.

Technical context:

  • Previous CSS was pasted into theme.min.css (e.g., rules for fixed/transparent header, hiding arrows, centering Splide slider pagination, disabling horizontal scroll). In 3.2.1, that asset no longer exists, so those styles are not applied.
  • Splide-related classes and header section selectors were included in the shared CSS, suggesting the slider and header structure may have changed.

Actions and requests:

  • One responder offered to review tasks via direct contact; the requester shared the issue list and code.
  • Guidance is requested on where to place or adapt the prior CSS in the updated theme and what modifications are needed.

Status: Unresolved; awaiting implementation guidance and placement for custom CSS to restore prior behavior.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello everyone,

I recently updated to Baseline version 3.2.1, and it seems I’ve lost my previous configurations. Could someone help me fix these issues or guide me on how to edit the code? I’ve also included screenshots from BEFORE/AFTER the update here below. Thanks in advance for your help or any suggestions!

List of issues found:

  • The website it’s not fixed, moves left/right when scrolling.
  • Transparent sticky header overlay on the product page is gone!
  • Product pagination overlay dots also gone!

Best regards,
Ameerah

website: https://amerastudios.com/

password: Resort24

Before the update

Desktop version before update
Desktop version before update1556×1209 168 KB

Mobile version before update
Mobile version before update571×1237 195 KB

AFTER the the update:

moves left/right when scrolling after update
moves left/right when scrolling after update1125×2283 110 KB

IMG_890F0D44E488-2.jpeg
IMG_890F0D44E488-2.jpeg1125×2283 106 KB

see here after updated Baseline theme version 3.2.1
see here after updated Baseline theme version 3.2.11125×2093 94.4 KB

After update product pagination
After update product pagination570×1229 173 KB

1 Like
2

Hello @AmeraStudios

Please create a list of all the tasks and send it to me. I will review them and make all the necessary changes. Also, share your WhatsApp number so we can discuss all the tasks.

3

Hello Webdep, Thanks for reaching out. Yes I’ve been informed before.

Previously I’ve just copy and paste to the custom code on: Theme.min.css (works very well until the new Baseline theme version update) and now doesn’t work that way. I need some help to place my previously configurations. where to copy and paste.

Thanks for your all suggestions,

Best regards

Ameerah

4

Hello @devcoders , thanks for your message. You can see here all I’ve mentioned. Thanks again for the support.

Best regards

Ameerah

5

Hello @webdep , I really appreciate your help.

Regarding the issues I mentioned. Here are the codes assets from my theme.min.css file that were working before. I updated to Baseline 3.2.1. and this assets dont exist anymore. My question is: can i use this customization codes to this new update? if yes? where? can i place this and, if is there some modification what can i modify? Thanks for any help.

Best regards,
Ameerah

@media (max-width:767px) {
.template-product #
shopify-section-header{
position:fixed !important;
top:0;
left:0;
right:0
}
section[data-section-type=“header”] header{
background:transparent !important
}
}
select.locale-selectors__selector {
font-size: 13px !important;
}
html, body{overflow-x: hidden!important;
}
section.absolute.top-0.left-0.right-0.z-50 {
position: fixed !important;
top: 0 !important;
background:transparent !important;
}
@media screen and (max-width: 767px){

section.absolute.top-0.left-0.right-0.z-50 {

position: fixed !important;

top: 0 !important;

z-index: 1 !important;

}

}
.splide__pagination–product {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.splide__arrows {
display: none;
}
@media (max-width:2560px){
.template-product #shopify-section-header{
position:fixed !important;
top:0;
left:0;
right:0
}
section[data-section-type=“header”] header{
background:transparent !important
}
.pb-theme {
padding-bottom: var(–spacing);

@media (max-width:1024px){
section[data-section-type=“header”]{
position:absolute !important;
top:0;
left:0;
right:0
}
section[data-section-type=“header”] header{
background:transparent !important
}
}
@media screen and (max-width: 1024px){
section.absolute.top-0.left-0.right-0.z-50 {
position: fixed !important;
top: 0 !important;
background:transparent !important;
}
}