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!

0 Likes
Pallavi
Shopify Expert
703 89 100

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
0 Likes
MoreGatherings
Tourist
5 1 0
www.moregatherings.com

Thank you so much!
0 Likes
Pallavi
Shopify Expert
703 89 100

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
0 Likes
MoreGatherings
Tourist
5 1 0

Screen Shot 2021-02-17 at 10.39.54 PM.png

0 Likes
Pallavi
Shopify Expert
703 89 100

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
0 Likes
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?

0 Likes

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
MoreGatherings
Tourist
5 1 0

This is an accepted solution.

This WORKED! Thank you!!

0 Likes