How to improve the design of Sticky ATC?

[UserDundun]

Hi Community,

I have a paid theme Minimalista. I just added a section called Sticky ATC. But it doesn’t have a lot of options to improve the look. I want to make the font bigger, remove some boxes, control when the bar to show up. But the existing option is very limited. How could I do these? Please take a look of the screenshot below.

[tim_tairli]

You should be able to hide some elements or modify their look with CSS.
Let us know how exactly you want to modify it.

However, most likely, the trigger can’t be changed that easily. Usually, sticky add to cart button is shown when the main cart button scrolls off the screen.

Say, adding this to the “Custom CSS” of the “Sticky cart” section will make fonts bigger:

#md-sticky-atc * {
  font-size: 1.5rem;
}

[suyash1]

@UserDundun the changes you want can be done with custom css, if you can provide me the website link then I can provide the css

[devcoders]

Hi @UserDundun

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[UserDundun]

Hi I would like to change

1. “Add to Cart” button becomes longer button, make the font bigger
2. All the font on sticky ATC are bigger. (I guess when I put in the code, I can play with the font size myself?)
3. Increase the space in between iPhone pro 17, number and button.
   Here is the link: CHECKERBOARD CASE - BLACK + CREAM – S I C O R A Thank you so much!

[The_ScriptFlow]

Thanks for sharing your store url.

In order to do the requested changes you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css file paste the following code shared below.

#md-sticky-atc .product-content .product__title {
     font-size: 16px !important;
    font-weight: 800 !important;
}
#md-sticky-atc .product-content .price {
   font-size: 16px !important;
    margin-top: 10px;
}
.product-form__controls {
     gap: 20px !important;
}
#md-sticky-atc .select select {
       font-size: 16px !important;
}
#md-sticky-atc button[name="add"] {
      min-width: 15rem !important;
    font-size: 16px !important;
}

Results:

You can adjust the css values as per your need.

Cheers

[UserDundun]

It works! Thank you so much!

[The_ScriptFlow]

My pleasure.

if you ever need help then let us know.

Thanks

[UserDundun]

Quick question that related. When I scroll up the page, the background page will interfere the sticky ATC. See the attachment below. Could you help me solve this? Thank you!

[PaulNewton]

Hi @UserDundun your gonna want to remove that pin from your post or risk getting spammed for requests, and change it in your admin.
Only share such details in private.

If you can’t edit that post just flag that post and ask a moderator to remove it for your privacy.