Move the BUTTON from center of images to low right corner

Solved
MoreGatherings
Tourist
5 1 0

Hello!

I'm creating a store in the debut theme. I'd like to add button's to my image but they're all showing up smack in the middle. I'd like them in the low right corner. Does anyone know how I can do this? Also, I'm very green with coding so detail would be so helpful! Thank you!

Accepted Solution (1)

Accepted Solutions
MoreGatherings
Tourist
5 1 0

This is an accepted solution.

This WORKED! Thank you!!

View solution in original post

Replies 8 (8)
ZestardTech
Shopify Expert
3502 579 805

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
MoreGatherings
Tourist
5 1 0
ZestardTech
Shopify Expert
3502 579 805

thank you for the sharing the URL kindly let me know which low right corner button
please share me screenshot.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
MoreGatherings
Tourist
5 1 0
ZestardTech
Shopify Expert
3502 579 805

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

div#shopify-section-161325873656a91820 div#Hero-161325873656a91820 .hero__inner {
padding: 0;
}
div#shopify-section-161325873656a91820 div#Hero-161325873656a91820 .hero__inner .page-width.text-center {
max-width: 100%;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}

div#shopify-section-161325873656a91820 div#Hero-161325873656a91820::after {
width: auto;
content: '';
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
MoreGatherings
Tourist
5 1 0

Thanks for your help. I copy and pasted this code all the way at the bottom and it doesn't seem to have done anything. the button is still showing up in the center. Any ideas what I could be doing wrong?

diego_ezfy
Shopify Partner
2725 511 689

@MoreGatherings 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.scss and paste this at the bottom of the file:

 

.btn.hero__btn {
    position: absolute !important; 
    right: 10px !important; 
    bottom: 10px !important; 
}

 



Please let me know whether it works.


By the way, since you're using Debut, you may want to enable swiping/arrows in your product page images and add a sticky navigation bar to improve your website. 

Kind regards,
Diego

MoreGatherings
Tourist
5 1 0

This is an accepted solution.

This WORKED! Thank you!!