Make the hollow add to cart button full

Store Design

Topic summary

Goal: change the product “Add to cart” button from an outline to a filled style in the free Publisher theme.

Proposed solution (no code editing): add a small CSS rule in the theme’s “Sections → Custom CSS” setting to style the button. This approach preserves easy theme updates and avoids modifying theme files.

CSS provided targets button.product-form__submit and sets:

  • text color to rgb(var(–color-base-background-1))
  • background to rgb(var(-- color-base-text))
    This uses the theme’s CSS variables to produce a solid, filled button appearance.

Notes:

  • The change relies on existing theme color variables; the exact color (e.g., green) will reflect your theme’s configured palette.
  • No additional steps or code edits were recommended.

Status: one clear solution offered; no confirmation or further discussion from the original poster. The thread appears potentially resolved but unconfirmed.

Summarized with AI on December 15. AI used: gpt-5.
1

Basically I want to make the add to cart button on my products a full green instead of just the outline. I’m using the free publisher theme.

2

Add this to the sections “Custom CSS” setting:

button.product-form__submit {
  color: rgb(var(--color-base-background-1));
  background: rgb(var(--color-base-text));
}

Do not edit your theme code unless it’s absolutely necessary (not in this case). This will save your headaches with theme update.