How to put size chart just above add to cart

Solved

How to put size chart just above add to cart

DaniCollantes
New Member
10 0 1

Hi, i want to change the placement of the size chart button and put it just above the add to cart button such in the example i provide. I'm using the app BF Size Charts and they can't give me a solution. I'm trying to change it on a theme (Baseline) that isn't live yet. I'll provide you an imageMaquina de Contenido (1).pngCaptura de Pantalla 2024-07-11 a las 10.22.36.png

Accepted Solution (1)
sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

Hi @DaniCollantes Please add the code to solve the issue.

 

 

margin-top: unset !important;

I have provided you the code in previous post, just add above line in the same code.

So the updated code will look like this:
<style>
.add-to-cart-container.mt-8.lg\:w-3\/4 {
    margin-top: unset !important;
    width: 100% !important;
}
</style>

 

 

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above </body> tag

Result:

 

sahilsharma9515_0-1720694957101.png

 

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 6 (6)

sahilsharma9515
Shopify Partner
1076 132 203

Hi @DaniCollantes 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

If this theme is not live then there is a option when you click on the theme and preview the store with this theme, there is a option of sharing the preview link with other so you need to provide that link, so that we can look into that.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

Hi @DaniCollantes Please add the code to solve the issue.

 

 

margin-top: unset !important;

I have provided you the code in previous post, just add above line in the same code.

So the updated code will look like this:
<style>
.add-to-cart-container.mt-8.lg\:w-3\/4 {
    margin-top: unset !important;
    width: 100% !important;
}
</style>

 

 

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above </body> tag

Result:

 

sahilsharma9515_0-1720694957101.png

 

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


DaniCollantes
New Member
10 0 1

Thank you so much

Raj-webdesigner
Shopify Partner
316 73 74

Add this css in your edit code > theme.min.css file

.product-content-container .shopify-product-form .add-to-cart-container.mt-8.lg\:w-3\/4{
	margin-top: 0;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Rahul_dhiman
Shopify Expert
204 40 37

Hello @DaniCollantes 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css or theme.css
add this code at the end of the file.

div .best-fit-size-chart, div .scr-open-parent {
width: 100%;
max-width: 100%;
height: 10px !important;
}

and the result will be
10.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here