Move back to (collection); at top left of page? (Debut Theme)

[GetOrchard]

Hi There,

I am currently trying to move my back button to the top left of the page when viewing a product.

Currently I have it sitting at the Top left, but I would like it a bit more 'raised' off the picture and lined up with it.

I am trying to move it to the top left, in the middle of the picture and Footer. I have attached a picture with a red box outlining around where I want it.

If anyone could help me would be greatly appreciated!

[Ninthony]

If you can post your url and password if password protected we can probably give you some CSS to copy. You can find the password on Online Store > Preferences > Password Protection

[hash777]

@GetOrchard  Hi there, pls provide url to get solution.

THANKS

[GetOrchard]

https://orchard-accessory-store.myshopify.com/?_ab=0&_fd=0&_sc=1&key=b023995009f19e6d8f8b908432ffff5...

Sorry about that this is the url

[hash777]

@GetOrchard  Hi there, I don't see the back button here.

Pls send the url where you shown the back button. 

THANKS

[GetOrchard]

The button is there on that page 

https://orchard-accessory-store.myshopify.com/products/axessorize-proshield-case-for-lg-g8-glacier-g...

Above the photo

[GetOrchard]

Currently I'm just trying to lift the button up vertically a bit

[hash777]

@GetOrchard  may be you are in draft mode as i can't see button except in your screen shots.

[Ninthony]

Your store is password protected, you can find the password in Online Store > Preferences > Password Protection -- we need it to see your store.

[GetOrchard]

Sorry password is frawgh

[Ninthony]

I also do not see a button, you may be previewing a different theme where you have added this button?

[GetOrchard]

I changed product.liquid.

I moved 

<div id="backToCollection"></div>

on top of

 {% section 'product-template' %}
{% section 'product-recommendations' %}

and changed the div class to text-left:

if(showCollection) {
var backToCollectionHTML = '<div class="text-left return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="btn btn--secondary btn--has-icon-before">{% include 'icon-arrow-left' %}{{ 'products.product.back_to_collection' | t }} ' + theme.backToCollection.collection.title + '</a></div>';
var backToCollectionContainer = document.getElementById('backToCollection');
backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
}

[GetOrchard]

The button was already there I just moved it up in the product.liquid when you view an item

[GetOrchard]

In order for the button to pop up you have to go into a collection, click a product in there and when you are viewing the product the button will come up. 

So for example, I go into LG > G8 > Select any product > Product Page.

This is where the back button is displayed.

[hash777]

@GetOrchard  send the full screenshot of your laptop while you are trying to move button up, as you said. That might help.

THANKS

[GetOrchard]

I don't understand what you mean by this. What do you mean by trying to move it up? I'm editing the code to move it up. Do you want me to send a picture of the code ?

[hash777]

@GetOrchard  Yes pls send me screenshot of code where you are editing the code.

[GetOrchard]

[hash777]

@GetOrchard  ok you want button like this . RIGHT ?

[GetOrchard]

Yes exactly!!!

[hash777]

@GetOrchard  hi therem at last. Ok you can add some css rules to the bottom of your 'theme.scss.liquid' file and save

.btn--secondary {
margin-bottom: 50px
}

If helpful then please Like and Accept Solution.

THANKS

[Ninthony · Accepted solution]

You can add this to the bottom of your theme.css file in your assets folder:

.return-link-wrapper {
    margin-top: 0;
}

.return-link-wrapper .btn {
    margin-bottom: 40px;
}

[GetOrchard]

That is literally perfect!! I can't thank you all enough!