Edit Add to Cart and Buy Now Buttons for Dawn Theme

Store Design
, ,

Topic summary

A user seeks help customizing Dawn theme buttons with three specific requests:

1. Remove hover animation:

  • The Add to Cart button has a bouncing/jumping animation on hover that needs to be disabled
  • Solution: Edit CSS in base.css or theme.css by removing transform and animation properties from .button:hover classes

2. Make “Buy It Now” button all caps:

  • User successfully capitalized the Add to Cart button but can’t replicate for Buy It Now
  • Solution involves adding text-transform: uppercase; CSS to the Buy It Now button class

3. Remove dynamic checkout buttons:

  • Replace Apple Pay, Shop Pay, etc. with a standard Buy It Now button
  • Two approaches suggested:
    • Disable via Theme Customizer under Product Pages settings
    • Edit code by removing/commenting out {{ form | payment_button }} in product template files and replacing with a static button

All solutions require accessing the theme code editor through Online Store > Themes > Actions > Edit code. The discussion remains open with partial solutions provided.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone, I was wondering if anyone could help me change the Add to cart buttons and buy it now buttons for dawn theme. In the dawn theme, the add to cart button like jumps, or like it is animated when you hover over and it just like bounces on its own. I was wondering how I could remove that feature.

Second thing is, I was able to make the Add to cart button all caps, but I can’t figure out a way to make the Buy it now button all caps, im pretty sure i need to edit the code, but not sure where. Would love if someone could help.

Last thing is, ive noticed a lot of people saying they dont want dynamic checkout buttons like apple pay or shop pay etc. instead they want just the standard Buy it now. Could someone help me with that in removing the dynamic pays? and making it just buy it now?

2

hi @ComfyHomeFinds ,
I am from Mageplaza - Shopify solution expert.

Here’s how you can address each of your concerns:

1. Remove the Bounce Animation on Hover for Add to Cart Button

The hover animation is controlled by CSS. To remove it:

  1. Access Your Theme Code:

    • Go to Online Store > Themes in your Shopify admin.
    • Click Actions > Edit code for the Dawn theme.

  2. Find the Relevant CSS:

    • Open the Assets folder and look for a file like base.css or theme.css.

  3. Modify the Button Animation:

    • Search for .button:hover, .btn:hover, or similar classes controlling the hover effect.
    • Look for properties like transform, scale, or animation.
    • Remove or disable them.
    • Example:
.button:hover {
    transform: none !important;
    animation: none !important;
}
​

  • .Save the File and Test:

    • Save your changes and preview the store to ensure the bounce effect is removed.

2. Make the “Buy It Now” Button All Caps

To style the “Buy It Now” button text:

  1. Locate the Button’s CSS:

    • Open the Assets folder and find base.css or a similar CSS file.

  2. Add the CSS for the “Buy It Now” Button:

    • Find the class that targets the “Buy It Now” button. If you’re unsure, inspect the button in your browser developer tools to identify the class (e.g., .shopify-payment-button).

    Example:

.shopify-payment-button {
    text-transform: uppercase;
}

  • Save and Test:

    • Save your changes and refresh the store to see the updates.

3. Remove Dynamic Checkout Buttons (Apple Pay, Shop Pay, etc.)

To remove dynamic checkout buttons:

  1. Disable Dynamic Checkout Buttons:

    • Go to Online Store > Themes > Customize.
    • Navigate to the Product Pages or any section where the buttons appear.
    • Look for settings related to Dynamic Checkout Buttons and disable them. These are often under Product Information or Buy Buttons.

  2. Edit the Code to Force Standard “Buy It Now”:

    • If there’s no toggle in the theme customizer:
      • Go to Actions > Edit Code.
      • Open the relevant Liquid files. For product pages, this could be product-template.liquid or main-product.liquid.
      • Look for the code snippet for dynamic buttons, typically marked as:
{{ form | payment_button }}
​

  • Comment out or remove this line.

  • Replace with a Static “Buy It Now” Button:

    • Add a standard button in place of the dynamic one:

​

  • Style the New Button:

    • Use CSS to match your theme’s styling.