Solved

Move the BUTTON from center of images to low right corner

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)
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
5393 970 1291

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
www.moregatherings.com

Thank you so much!

ZestardTech
Shopify Expert
5393 970 1291

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

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

ZestardTech
Shopify Expert
5393 970 1291

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
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

MoreGatherings
Tourist
5 1 0

This is an accepted solution.

This WORKED! Thank you!!