Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an 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;
}
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
https://orchard-accessory-store.myshopify.com/?_ab=0&_fd=0&_sc=1&key=b023995009f19e6d8f8b908432ffff5...
Sorry about that this is the url
@GetOrchard Hi there, I don't see the back button here.
Pls send the url where you shown the back button.
THANKS
The button is there on that page
Above the photo
Currently I'm just trying to lift the button up vertically a bit
@GetOrchard may be you are in draft mode as i can't see button except in your screen shots.
Your store is password protected, you can find the password in Online Store > Preferences > Password Protection -- we need it to see your store.
Sorry password is frawgh
I also do not see a button, you may be previewing a different theme where you have added this button?
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);
}
The button was already there I just moved it up in the product.liquid when you view an item
@GetOrchard send the full screenshot of your laptop while you are trying to move button up, as you said. That might help.
THANKS
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 ?
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.
Yes exactly!!!
User | RANK |
---|---|
229 | |
146 | |
55 | |
52 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023