Can anyone help me with my theme ? My add to cart button is way to big and I don't know how to fix!

[mchien92]

I had a designer create a website for me and the add to cart is way too big.

Is there a way to edit the code to change this?

The website is www.101-pickleball.com

Thanks guys.

[PaulNewton]

For at least that part use a global custom-css setting and override some of the silly styles

btn-atc {
  height: fit-content;
  align-self: center;
  width: max-content !important;
}

A lot of the design problems seem so stem from over reliance on dumb css utility classes instead of actually bothering to name and put together cohesive sets of rules for concrete elements like the add to cart buttons. That's also why in it's current state most fixes will have to use !important declaration overrides when they should have too.

Go back to the designer and ask them for some brush up revisions reminding them you need to be able to make stylistic changes sanely.

Or hire someone to do some comprehensive fixes like to the quantity buttons, etc.

[mchien92]

Is there any way I could do this myself? Or will it require a lot of work

[PaulNewton]

The button fix is right there as described use a custom css setting and revise as needed.

And yes of course you can continue to fix all the rest of the issues like this one yourself.

Either way will require a lot of work.

[INA_MSWEB]

Hi @mchien92  Thank you for reaching out to us with your concern regarding the "Add to Cart" button size on your website, www.101-pickleball.com. I understand how important it is for the user experience on your site to be optimal, and I am here to help you resolve this issue.

Adjusting the "Add to Cart" Button Size

To modify the size of the "Add to Cart" button, you will need to make changes to your website's CSS code. Here is a simple guide to help you with the adjustments:

• Log in to your Shopify admin panel.
• Go to Online Store > Themes.
• Click on Actions next to your current theme, then select Edit code.
• In the Assets folder, find the file named theme.scss.liquid or styles.scss.liquid.
• At the bottom of this file, add the following CSS code to adjust the size of the "Add to Cart" button:
  .btn-add-to-cart { font-size: 16px; /* Adjust the font size as needed */ padding: 10px 20px; /* Adjust the padding as needed */ }

• You can customize the font-size and padding values to achieve your desired button size.

• Click Save to apply the changes.

Sales with Shopify Coupon Discount on Cart App

to enhance your customers' shopping experience and boost sales, I recommend integrating the Coupon Discount on Cart app. This app allows you to display available discount coupons directly on the cart page, encouraging customers to complete their purchases with the added incentive of savings. By showcasing available discounts at the point of checkout, customers are more likely to proceed with their purchases. Providing discounts transparently enhances the shopping experience, making customers feel valued. The app integrates seamlessly with your Shopify store, requiring minimal setup.

If you need further assistance or have any questions, please feel free to contact us. We're here to ensure your website performs at its best.

Best regards,

Ina

[EcomGraduates]

.button--add-to-cart {
    font-size: 14px; 
    padding: 10px 20px;
}

"Add to Cart" button, you'll need to adjust the CSS code in your theme

Replace .button--add-to-cart with the correct class name for your button if it's different. 

[danielsam]

just check learn more