Floating button

Hi - I tried putting in a custom code block to make a button that floats (stays fixed when scrolling) at the top left of the page that takes you back to the previous page (of all products), on certain product pages. I adapted a code I found but the button still disappears behind picture blocks. Can anyone help?

You need to have this code block as far down the page as possible, place it at the bottom of the last section if you want it just on one page, or at the bottom of the footer if you want it on every page. This will solve the z-index issue without needing any other code.

Thanks for your input! Hmmm... I put the code block at the very bottom of the page. In case I wasn't clear, what I mean is, the button stacks behind the image blocks, so when scrolling past images, it's behind them rather than on top... 

You were clear, and it sounds like you did the best thing, is the code block at the end on of the page in the mobile layout too?

Can you share your website URL and the page this is on?

Hi, sure. I've no skills or understanding of code really, just found one on a forum and copied and edited it as best I could... beyond the 'disappearing behind the image' issue, there's a few things I'd love to know how to change on it - namely, I'd like it to match the style of the other buttons on the side - so dark borders, off-white background, turns to dark background [I have the relevant colour codes and white text when hovered on. I also want to change the position so it's a little further to the right but I think I know how to do that.

The page I am experimenting on is not live but I have just enabled it so you can see - it's not linked on our website (it's actually an old deleted page). Website is www.heartwoodsaunas.com, but you can only find the page from this URL: https://www.heartwoodsaunas.com/aire-old

I've adjusted and commented in the CSS for the button here:

.t-button {
    display: inline-block;
    position: fixed;
    z-index: 9999 !important;
    background: #fff; /* button background */
    color: #222; /* text colour */
    padding: 13px 26px; /* padding */
    border:2px solid #222; /* border */
    border-radius: 3px; /* border radius */
    top: 35%; /* vertical position */
    left: 10px; /* left spacing */
    transition:ease-in-out 300ms;
  &:hover {
    background: #222; /* hover background colour */
    color:#fff; /* hover text colour */
}

Let me know how you get on with this.

That's really awesome, thanks. I'm wondering if we could change the text font and spacing to match the other buttons on the site too?

... Also, I did try to add the < symbol as a 'back' indicator using the code for the symbol, but it positioned it on the same line as the text, like this  < back - is there a way to bring it down so the arrow is positioned lower, centered to the text rather than on the same line?

Try adding these to the CSS:

font-family: futura-pt;  /* font */
font-weight: 400; /* weight */
font-size: 10px;
letter-spacing: .02em;
text-transform: uppercase;  /* Uppercase */