How can I relocate a button in the Studio Theme?

How can I relocate a button in the Studio Theme?

GeeKyuu24
Pathfinder
108 3 13

Hi team,

 

How can I move the button here? 

Store: Glowcare.se
PS: Glowcare1991 

434.PNG

Replies 15 (15)

GeeKyuu24
Pathfinder
108 3 13

Also, I am having a problem locating the button of the image banner at the bottom part of the image in a mobile view :(( I really need some assistance as customer support from Shopify can't do it. 

534545.PNG

topnewyork
Globetrotter
633 114 134

Hi @GeeKyuu24 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

@media screen and (max-width: 425px){

    #Banner-template--19769109610821__b071baef-cb61-4803-985d-59e0cc8b7422 .button--primary{
        font-size:14px !important;
        padding:5px 8px;
    }

    .banner__buttons{
        margin-top:15rem !important;
    }

}

RESULT:

topnewyork_0-1696591774313.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
GeeKyuu24
Pathfinder
108 3 13

This what I got 

GeeKyuu24_0-1696591983129.png



And the button here was affected too 

GeeKyuu24_1-1696592010983.png

 

Moeed
Shopify Partner
5516 1496 1786

Hey @GeeKyuu24 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.banner__box.content-container.content-container--full-width-mobile.color-scheme-6aac9d87-4d14-46ff-a4af-1a4d3f47989f.gradient {
    width: 52% !important;
}
}
</style>

RESULT:

Moeed_0-1696591914702.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


GeeKyuu24
Pathfinder
108 3 13

Thanks, Moeed but the mobile view was affected

GeeKyuu24_1-1696592363274.png



I want the button here to look like this 

534545.PNG

topnewyork
Globetrotter
633 114 134

@GeeKyuu24 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

.banner__buttons .button{
    height: auto !important;
    width:50% !important;
    position: relative;
    left:-45%;
}

.banner__buttons{
    width: 100%;
}

topnewyork_0-1696591247900.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
GeeKyuu24
Pathfinder
108 3 13

Thanks, Should I post another request for the image banner button on mobile view which I sent above?

 

GeeKyuu24
Pathfinder
108 3 13

I added the code from both file and none of them worked 😞 

topnewyork
Globetrotter
633 114 134

@GeeKyuu24 share screenshot where you paste?

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
GeeKyuu24
Pathfinder
108 3 13

Here and I tried both: 

GeeKyuu24_0-1696592222346.png

 

topnewyork
Globetrotter
633 114 134

@GeeKyuu24 

You removed all !important in below marked line. 

GeeKyuu24_0-1696592222346.png

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
GeeKyuu24
Pathfinder
108 3 13

no luck. 

 

topnewyork
Globetrotter
633 114 134

@GeeKyuu24  can you invite me as a collaborator?

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
GeeKyuu24
Pathfinder
108 3 13

Don't have enough money to pay for the service.

 

topnewyork
Globetrotter
633 114 134

@GeeKyuu24 Paste this code in theme.liquid file above </body> tag

{% style %}
.banner__buttons .button{
    height: auto !important;
    width:50% !important;
    position: relative;
    left:-45%;
}

.banner__buttons{
    width: 100%;
}

{% endstyle %}

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel