Make design / customize button increased padding to the sides how ?

[Shane_h]

Hi i have tried a few different css codes but no joy - any idea how i can increase the padding width around the customize product button here please https://kitout-fitness.co.uk/collections/bags

thanks as always

[dhimansangeeta]

hello @Shane_h 

Online Store > Themes> Actions > Edit code...>base.css add the code bottom of the file

button.button.button--primary.button--small {
    padding: 5px 20px;
 
}

result will be

if its helpful please accept my solution

Thanks

[Shane_h]

im afraid we dont have a base.css file in the charge template

regards 

[BiDeal-Discount]

Hi @Shane_h 

let try to add custom css below:

.main-collection [data-mode="grid"] .item-actions-wrapper button {
  padding: 10px 20px;
}

then the result should be like:

[Shane_h]

that works but do you know how to add globally to the theme in the code not just CSS styling

regards shane

[swym · Accepted solution]

Hey @Shane_h! 

You can easily increase the customise button padding by following the below steps: 

1. Open the Code Editor for the theme where you would like to apply the modifications as directed in the example screenshot below. 

2. Let’s create a new snippet to add these modifications. We suggest using a snippet so you can easily remove/include it as needed. Also, adding these changes using this snippet will ensure that they do not get overridden by any styles added before it. The screenshot below shows how to create a new snippet. Let’s title this snippet new-custom-styles.liquid. 

3. Now, inside this file, paste in the below code: 

<style>
  .main-collection [data-mode="grid"] .item-actions-wrapper button{
     padding-inline: 100px !important; /* update this number to adjust padding horizontally */
     padding-block: 10px; /* update this number to adjust padding vertically */ 
  }
</style>

4. Finally, let's render this file inside your theme layout file. Screenshot below for reference: 

After adding the styling, the button width should now have increased padding as per the values we added before! 

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions. 

Thank you!

Regards, 

Aaryan from Swym

[Shane_h]

thanks very much 👍