How can I modify the 'Buy it now' button on my product page?

Store Design

Topic summary

A user needs to modify the appearance and code of the “Buy it now” button on their product page. They’re using the Spotlight theme (a Dawn-based Shopify theme) and requested the specific CSS file location for the product page.

Solution provided:

  • Target the button using the CSS selector .product-form__submit to customize styling (example: color: red;)
  • Recommended approach: Use Shopify’s custom CSS settings instead of directly editing theme code to avoid complications during theme updates
  • A link to Shopify’s documentation on adding custom CSS was shared
  • Additional reference provided to a community search for similar Dawn/Spotlight theme button styling discussions

Status: Solution offered, awaiting confirmation if it resolves the user’s needs.

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

I am required to change the look and code of “Buy it now” button on product page. Kindly let me know the exact liquid and css file for product page. I am using spotlight theme. The store address is 87b913-2(.)myshopify(.)com

Thank you!

2

Spotlight is a dawn based theme by shopify.

Style add to cart buttons by targeting a CSS selector like the following:

.product-form__submit { color: red; }

To avoid editing theme code directly use custom CSS settings https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Search https://community.shopify.com/c/forums/searchpage/tab/message?q=Style%20spotlight%20dawn%20theme%20buy%20button&noSynonym=false&collapse_discussion=true

Good Luck.