FROM CACHE - en_header
Promotion image

How to align buttons

Solved

How to align buttons

margo141
Tourist
11 0 3
‎09-25-2024 06:56 PM

How to align "add to cart button" , "share" and " wish list" buttons together side by side in Trade version?

I've tried many things, but the button does not want to move(((( Please someone help me

Screenshot 2024-09-25 142807.png

Labels:
395 Views
0 Likes
Report
Accepted Solution (1)
In response to margo141

namphan
Shopify Partner
1335 164 199
‎09-26-2024 11:04 AM

This is an accepted solution.

Hi @margo141,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__info-container .st-wishlist-button {
    float: right;
    margin-top: 5px;
}
.product__info-container .product-form {
    max-width: calc(100% - 60px);
}
.product__info-container .product-form .product-form__buttons {
    max-width: 100% !important;
}

  

☕Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

272 Views
1 Like
Report
Replies 12 (12)

suyash1
Shopify Partner
9876 1228 1566
‎09-25-2024 09:54 PM

@margo141 - I think all of these fields are having separate sections and hence those are not moving, ,ay need code editing

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
362 Views
0 Likes
Report

Dan-From-Ryviu
Shopify Partner
9668 1936 1971
‎09-25-2024 09:55 PM

Hi @margo141 

Please share your store link so I can check 

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

361 Views
1 Like
Report
In response to margo141

Dan-From-Ryviu
Shopify Partner
9668 1936 1971
‎09-26-2024 12:24 AM

Please add this code to theme.liquid file, after <head> in Sale channels > Online Store > Themes > click '...' in current theme > Edit code 

<style>
.product #shopify-block-swishlist_simple_wishlist_wishlist_product_button_cgytHr {
float: right;
margin-top: 28px;
}
.product .product-form { max-width: calc(100% - 70px); }
</style>

Screenshot 2024-09-26 at 11.23.18.png

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

333 Views
1 Like
Report
In response to Dan-From-Ryviu

margo141
Tourist
11 0 3
‎09-26-2024 09:23 AM

Thank you so much, but it did not work out(((

284 Views
0 Likes
Report

namphan
Shopify Partner
1335 164 199
‎09-25-2024 10:32 PM

Hi @margo141,

Please send me the store link, I will check it for you

☕Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
343 Views
0 Likes
Report

Viralmint
Shopify Partner
11 2 3
‎09-26-2024 05:50 AM

Hello @margo141 

Please add below css code to theme.css file

div#shopify-block-swishlist_simple_wishlist_wishlist_product_button_cgytHr {
right: 0;
position: absolute;
margin-top: 20px;
}
product-form.product-form {
width: 100%;
position: relative;
margin-top: 15px !important;
max-width: 85%;
}

Viralmint_0-1727344015321.png

 

If you find our suggestions helpful, please consider giving them a like or marking them as a solution.

For custom designs and solutions, feel free to contact us. We offer 360-degree services to help scale your e-commerce brand. Don't hesitate to reach out!
https://viralmint.in/viralmint-shopify-community/


316 Views
1 Like
Report
In response to Viralmint

margo141
Tourist
11 0 3
‎09-26-2024 09:33 AM

Thank you so much, but it worked out only for two products... I do not have a Theme.css file, so I put it in assets/section-main-product.css file and it worked for 2 products. But how can I change the rest of them? 

280 Views
0 Likes
Report
In response to margo141

namphan
Shopify Partner
1335 164 199
‎09-26-2024 11:04 AM

This is an accepted solution.

Hi @margo141,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__info-container .st-wishlist-button {
    float: right;
    margin-top: 5px;
}
.product__info-container .product-form {
    max-width: calc(100% - 60px);
}
.product__info-container .product-form .product-form__buttons {
    max-width: 100% !important;
}

  

☕Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
273 Views
1 Like
Report
In response to namphan

margo141
Tourist
11 0 3
‎09-26-2024 11:24 AM

Thank you so much!!!! it worked out great!!!!!! 

Many thanks!!!!! 

270 Views
0 Likes
Report
In response to margo141

namphan
Shopify Partner
1335 164 199
‎09-26-2024 11:26 AM

Hi @margo141,

If you have any questions, you can contact me directly at email in signature.

Nice to meet you 😊

☕Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
265 Views
0 Likes
Report
In response to namphan

margo141
Tourist
11 0 3
‎09-26-2024 11:29 AM

Thank you so much!! Nice to meet you as well

263 Views
1 Like
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy