Rearrange the "Add to Cart" / "Choose Options" Button

Store Design
1

Hi Guys,

I am using the Toyo theme.

My store URL is: snufflebum.com

Pw: bohtro

The mobile view of my website looks something like this:

snufflebum_0-1722009703208.png
snufflebum_0-1722009703208.png446×750 201 KB

As you can see, here, the “Choose Options” Button / “Add to Cart” Button appears on the product image. I want to rearrange the layout such that, this button appears below the Product price in the mobile view, because currently it becomes difficult for a user to have a look at the product when the button is covering a lot of its image. I want this change to happen site-wide.

Additionally, I wish to reduce the height of the button and also change the background color and the color of the text inside the button.

Can someone please assist me with this?

Thank you.

2

Hello Sir,
I check your store and I see that your problem is not currently solvable at this time but I have attached a solution I think it will help you.

Add This css in your edit code > base.css file

@media screen and (max-width:767px){
    .quick-add span {
        font-size: 12px !important;
    }
    .button.quick-add__submit {
        min-height: 2.5rem !important;
    }
    .product-card-wrapper .card--card .quick-add.bottom.center {
        transform: translate(-50%, 0rem) !important;
    }
}