Move the back to top icon on Rise theme to left side

Ask & Offer

Topic summary

A user wants to reposition the “back to top” button from the bottom-right to bottom-left corner on their Shopify Rise theme site (diyretroarcade.com).

Initial Challenge:

  • The user located the CSS in assets/theme.css (line 12360) but couldn’t edit it directly
  • The file indicated it was controlled by theme.css.liquid, where they couldn’t find matching code

Solution Provided:
Multiple respondents recommended adding custom CSS through the theme customizer instead of editing core files:

.back-to-top {
  right: auto !important;
  left: 22px !important;
  bottom: 90px !important;
}

Key Considerations:

  • The site has a chat icon in the bottom-left corner, so positioning adjustments (using left: 7rem or bottom: 90px) were suggested to avoid overlap
  • Custom CSS can be added via: Customizer → Theme Settings → Custom CSS

Outcome:
The user confirmed the solution worked and planned to implement it on their live site.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Trying to move the back to top icon in the bottom right corner now to the left corner. Do not see in in theme.liquid site is http://www.diyretroarcade.com

Thanks for the assist!

move
move1916×903 115 KB

2

Hi @shanet1994

To move back to top icon you should check this code in your assets/theme.css line 12360

  .back-to-top {
    position: fixed;
    right: 0.9375rem;
    bottom: 0.9375rem;
    z-index: 1200;
    padding: 0;
    margin-top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms, transform 100ms;
    transform: translateY(0.9375rem);
  }

and change ‘right’ to ’ left’

  .back-to-top {
    position: fixed;
    left: 0.9375rem;
    bottom: 0.9375rem;
    z-index: 1200;
    padding: 0;
    margin-top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms, transform 100ms;
    transform: translateY(0.9375rem);
  }

but note that you can contact icon there. But you probably want to move that to right ?

3

I found that there as well but says that the file is not editable that its controlled by theme.css.liquid but I cannot find anything in the theme.css.liquid that looks like that. the contact us I can move thru the add itself :slight_smile:

4

can move the contact thru the app*

5

hmm OK.

Try to search in the theme code editor for “.back-to-top”, that CSS should be coming from somewhere.

6

You should be able to do this without theme code edits.
You can go to Cusomizer, Theme Settings=> Custom CSS
paste this code:

.back-to-top {
  right: auto;
  left: 2rem;
}

However, you do have a chat icon there, so maybe use this to avoid overlap:

.back-to-top {
  right: auto;
  left: 7rem;
  bottom: 1.3rem;
}
7

Hi @shanet1994,

Please go to Customize > Theme settings > Custom CSS and add code:

.back-to-top {
    right: auto !important;
    bottom: 90px !important;
    left: 22px !important;
}

If I helped you, then a Like would be truly appreciated.

8

this worked, will move to live site later today :wink:

1 Like
9

You can move the “Back to Top” icon by adding a small CSS rule. Even if you don’t see it in theme.liquid, it’s likely included through a global CSS or JavaScript file. Add this snippet to your theme.css or custom.css:

.back-to-top {
  right: auto !important;
  left: 20px !important;
}

If it’s using a different class, inspect the element in your browser (right-click → Inspect) to find the correct selector, then apply similar positioning.

This will shift the icon from the bottom-right to the bottom-left corner.