A user seeks to modify a return button on their product pages by aligning it left, reducing its size, and changing the background to white with a 1px border.
Initial Solution:
page-width class to containerFollow-up Adjustments:
Technical Implementation:
Multiple CSS snippets provided targeting:
.btn.btn--small.return-link for button styling#shopify-section-template--[ID]__collection-return for alignmentCode should be added to theme.css file in Shopify theme assets. The discussion includes screenshots demonstrating desired vs. current appearance, with solutions successfully resolving alignment and styling issues across desktop and mobile views.
Hi,
id like to make the return button align left
make the button smaller
and change the background color to white with 1 px border where is says back to menswear etc
my site is https://luxurymrkt.com/collections/footwear-1/products/axel-arigato-clean-90-suede-sneakers
Well a few things need to happen:
.1. the container needs to get the class “page-with” (liquid)
This I would have to look into your backend for
.2 the element needs to get a max-with (css) - where as this value of 20em is arbitrary
.3 the “a” inside the element needs a background, a color and a border (css)
.4 the reverse color for a:hover (css)
.text-center.page-content.page-content--bottom {
max-width: 20em;
}
a.btn.btn--small.return-link {
background: #fff;
color: #000;
border: 1px solid;
}
a.btn.btn--small.return-link:hover {
color: #fff;
}
Great that it worked but I am not sure what you mean by “is still black after click”
It becomes black if you put the mouse over it and then stays that way. You do not want that?
Btw you should change the image size on the product detail page and make it bigger. The right hand panel has too much space to give the page the right balance I think.
Yea I’d like the button to just stay as is. No border just the white background black words looks nice and clean. On hover also.
*you mean on desktop make product image bigger? Thing is the length of pants overflows the bottom looks kind of weird 
not sure how to adjust the width or what you’re referring to.
Hi @Luxurymrkt
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
-Go to Online Store->Theme->Edit code
-Asset->theme.css paste the below code at the top of the file.
#shopify-section-template–15648733003957__collection-return .return-link{
background:white !important;
color:black !important;
border:solid 1px black !important
}
Best Regards;
PageFly
you can add
@media(min-width:767px){
#shopify-section-template–15648733003957__collection-return a{
padding-left:0 !important;
}
#shopify-section-template–15648733003957__collection-return{
padding-left:40px !important
}
#shopify-section-template–15648733003957__collection-return div{
text-align:left !important ;
}
}
you can add it to the top of the file theme.css
@media (max-width:767px){
#shopify-section-template–15648733003957__collection-return {
padding-left: 17px !important;
}
}
Thank you for sharing good information. I also want to share good information Please refer to 토토커뮤니티 when you are wondering if my site is safe You won’t regret it.
