Hey. I am trying to change the position for my shop now button and also make the size a little bigger. The thing is I ONLY want to do this to the desktop version as I already added some custom code to the mobile version to make the shop now button for mobile smaller and move it down. Ill attach an example of where I want it to be below. Thanks! Oh also I am using dawn theme.
Hi @qrave
I hope you’re doing well. Welcome to Shopify Community. Kindly share your website URL and Password (if enabled) and I would be more than happy to help you out!
Kind Regards,
Aatiqa
This is Richard from PageFly - Shopify Page Builder App
Hi @qrave I can help you. Please can you provide the website url. Thank you.
Best regards,
Richard | PageFly
https://40c7e7-8d.myshopify.com/
password is ranosk
https://40c7e7-8d.myshopify.com/
password is ranosk
Hi @qrave ,
You can edit this by adding a simple line of css.
Go to your online store > themes >click on customise > click on the section which needs to be edited > in right sidebar scroll down > paste the below code in custom css.
.banner__buttons a{
width:170px; //adjust according to your needs
height:50px; //adjust according to your needs
}
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
I tried doing it but when I clicked save it gives me this message and doesn’t allow me to save it. :“Online store session editor can’t be published” Do you know how to fix this? Thanks
Hi @qrave ,
If it is showing error may be it is because of syntax issue .
.banner__buttons a{
width:170px;
height:50px;
}
just add the above code if it still have problem we can try another method.
Go to online store > themes > click on three dots on current active > edit code > search base.css in leftside bar > open it and paste the below code.
#Banner-template--18274110931189__image_banner .banner__buttons a{
width:170px !important;
height:50px !important;
}
If you found this helpful, leave a like and choose this as the accepted solution,
If you have any other queries feel free to ask me as well.
Regards,
Sweans
Both of your solutions did the same thing. They both made it a little bigger on desktop but they effected the mobile view which I didn’t want to change. I only want to change the size of it for desktop, not mobile. Any solution to this? Thanks
Hi @qrave ,
Here is the updated code
Go to online store > themes > click on three dots on current active > edit code > search base.css in leftside bar > open it and paste the below code.
@media screen and (min-width: 1000px) {
#Banner-template--18274110931189__image_banner .banner__buttons a{
width:170px !important;
height:50px !important;
}
}
with the above updated code it wont effect button in mobile.
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
This worked great, thanks! But if you could help me with one last thing that would be great. Can I move the button slightly higher also without effecting the mobile version. Thanks
Hi @qrave ,
You can change the button postion higher by adding this line of code.
#Banner-template--18274110931189__image_banner .banner--desktop-transparent .banner__box {
padding-bottom:80px !important;
}
just paste the code inside the recent code.
@media screen and (min-width: 1000px) {
#Banner-template--18274110931189__image_banner .banner__buttons a {
width: 170px !important;
height: 50px !important;
}
#Banner-template--18274110931189__image_banner .banner--desktop-transparent .banner__box {
padding-bottom:80px !important;
}
}
Like this code.
If you need further assistance, feel free to reach out!
Regards,
Sweans