Center sticky form product page on desktop

Store Design
, , , ,
1

Hi,

Is there a way to center the sticky form on the product page, I would like it to be centered but still sticky when I scroll down or up Ihave tried to illustrate it in the photo, the theme I’m using is Broadcast.

Screenshot 2023-05-20 at 18.30.23.png
Screenshot 2023-05-20 at 18.30.23.png3840×2160 357 KB

2

To center the sticky form on the product page in the Broadcast theme, you can modify the theme’s code and apply some CSS. Here’s how you can do it:

  1. From your Shopify admin, go to “Online Store” and click on “Themes”.

  2. Find the Broadcast theme and click on “Actions” > “Edit code”.

  3. In the left sidebar, navigate to the “Assets” directory and open the theme.scss.liquid file.

  4. Scroll to the bottom of the file and add the following CSS code:

.sticky-form-wrapper {
  position: sticky;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
3

Hi,

i dont have theme.scss.liquid however I tried to add the code to theme.css but it didn’t work?