How to Change the Sticky Add to Cart Button Position to the Bottom

Modified on Sat, 12 Apr at 11:45 AM

By default, our app displays the Sticky Add to Cart button at the top of the screen. While there’s currently no built-in setting to change its position, you can customize it manually by following the steps below.


Step-by-Step Instructions

Step 1: Access Your Theme Code

  1. From your Shopify admin, go to Sales channels → Online Store → Themes.
  2. Find the theme you want to edit, click the three dots (•••), then select Edit code.


Step 2: Create a Custom Snippet

  1. In the left-hand sidebar, scroll to the Snippets folder.
  2. Click Add a new snippet.
  3. Name the file: trustz-custom and click Done.

Step 3: Add Your Custom CSS Code

Open the newly created trustz-custom.liquid file and paste in the following code:

<style>
  #sticky-add-to-cart.app-embed .sticky-add-to-cart {
    top: unset !important;
    bottom: 0 !important;
  }
</style>
HTML

This code moves the sticky Add to Cart bar from the top of the screen to the bottom.


Step 4: Link the Snippet in Your Theme

To make the custom CSS take effect, you need to link your new file in the theme layout.

  1. In the Layout folder, open theme.liquid.
  2. Find the closing </head> tag.
  3. Just before it, add the following line: {% render 'trustz-custom' %}


Pro Tip:

You can also paste the CSS code directly at the end of theme.liquid, but we recommend using a separate snippet file (trustz-custom) to keep things organized and easy to manage.


If you need help with this customization, feel free to contact our support team at support@trustz.app

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article