Dawn - Help with Product Page, Add to Cart Button Design Changes

[IllIlIl1]

Would it be possible to change the following for the add to cart button on the product page:

1. Capitalize the first letters for -"Add" and "Cart"

2. Make text within the button bold.

3. Display dollar amount (no additional 0's)

Store link- https://b01a38-40.myshopify.com/

Code- dapolu

[niraj_patel · Accepted solution]

Hello @IllIlIl1 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .product-form__buttons .product-form__submit {
     font-weight: 900 !important;
     text-transform: capitalize !important;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

for  3rd point you have to customize the code

[BSSCommerce-HDL · Accepted solution]

Hi @IllIlIl1 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
        .product-form__buttons span {
            text-transform: capitalize!important;
            font-weight: 700!important;
        }
}
</style>

Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[niraj_patel · Accepted solution]

Step 1: Modify the Money Format in Liquid Code

1. Go to Shopify Admin > Online Store > Themes.

2. Find your active theme, click "Actions," and select "Edit Code."

3. Locate the file where the product price is displayed. This is often in files like product.liquid, product-template.liquid, or a snippet file like price.liquid.

4. Find the price display code. It will likely look something like this:

   liquid

   Copy code

   {{ product.price | money }}

5. Remove the cents from the price format. Update the code to only display the dollar amount by changing the format:

   liquid

   Copy code

   {{ product.price | divided_by: 100 | money_without_trailing_zeros }}

   If the theme already uses a custom money format, you might see something like this:

   liquid

   Copy code

   {{ product.price | money_format }}

   In this case, you can change it to:

   liquid

   Copy code

   {{ product.price | divided_by: 100 | money_without_trailing_zeros }}

Step 2: Save and Test

1. Save the changes in the file.
2. Preview your product page to see the updated price format.

[niraj_patel · Accepted solution]

Hello @IllIlIl1 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .product-form__buttons .product-form__submit {
     font-weight: 900 !important;
     text-transform: capitalize !important;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

for  3rd point you have to customize the code

[IllIlIl1]

Thanks, is it possible to remove the additional 0's so it's just the dollar amount?

[niraj_patel · Accepted solution]

Step 1: Modify the Money Format in Liquid Code

1. Go to Shopify Admin > Online Store > Themes.

2. Find your active theme, click "Actions," and select "Edit Code."

3. Locate the file where the product price is displayed. This is often in files like product.liquid, product-template.liquid, or a snippet file like price.liquid.

4. Find the price display code. It will likely look something like this:

   liquid

   Copy code

   {{ product.price | money }}

5. Remove the cents from the price format. Update the code to only display the dollar amount by changing the format:

   liquid

   Copy code

   {{ product.price | divided_by: 100 | money_without_trailing_zeros }}

   If the theme already uses a custom money format, you might see something like this:

   liquid

   Copy code

   {{ product.price | money_format }}

   In this case, you can change it to:

   liquid

   Copy code

   {{ product.price | divided_by: 100 | money_without_trailing_zeros }}

Step 2: Save and Test

1. Save the changes in the file.
2. Preview your product page to see the updated price format.

[BSSCommerce-HDL · Accepted solution]

Hi @IllIlIl1 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
        .product-form__buttons span {
            text-transform: capitalize!important;
            font-weight: 700!important;
        }
}
</style>

Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

@IllIlIl1 If you really need to hide this .00, you can try add this code beside above:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
document.querySelectorAll(".product-form__buttons span")[0].innerHTML = document.querySelectorAll(".product-form__buttons span")[0].innerHTML.replace(".00", "")
</script>

[IllIlIl1]

Thanks!