Solved

How can I arrange three buttons inline on my product page?

vishwa312
Tourist
28 0 3

I  have 3 different buttons on my product page I added 3 buttons using block but right now it's vertically I want inline I tried CSS but it's not working. Can anyone tell me how do I create another block for 3 buttons in one group and inline. 

My website:https://storageshedshop.com/products/11-ft-x-7-ft-wood-plastic-composite-heavy-duty-storage-shed-pen...

 

Accepted Solution (1)

PageFly-Oliver
Shopify Partner
878 190 171

This is an accepted solution.

Hi @vishwa312 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media(min-width:767px){
#main .product-info__quantity-selector {
display: inline;
}
#main .product-info__buy-buttons{
   display: inline-flex;
    width: 66%;
    flex-flow: column;
}
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

PageFly-Oliver
Shopify Partner
878 190 171

This is an accepted solution.

Hi @vishwa312 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media(min-width:767px){
#main .product-info__quantity-selector {
display: inline;
}
#main .product-info__buy-buttons{
   display: inline-flex;
    width: 66%;
    flex-flow: column;
}
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

vishwa312
Tourist
28 0 3

Thank you soo much. But I have 6

button with same class on product page but I want 3 button in one line and another 3 button in second line is it possible? Can you plz help me.

vishwa312
Tourist
28 0 3

Thank you soo much. But I have 6

button on product page but I want 3 button in one line and another 3 button in second line is it possible? Can you plz help me.

Right now when I give same CSS to another 3 button it's goes up with 1 line 3 button.

website link: https://storageshedshop.com/products/11-ft-x-7-ft-wood-plastic-composite-heavy-duty-storage-shed-pen...