How to Change the Style or Color of the Add to Cart Button
STEP 1
Navigate to the product page and expand the Product Information section.
STEP 2
Locate the Buy Button block and click on it.
STEP 3
Ensure Button Settings is set to Custom.
STEP 4
This unlocks individual styling options for the Add to Cart button.
STEP 6
Adjust your button style and colors:
Add to Cart Style → Choose between Default, Solid, or Outline for your buttons’ appearance.
Add to Cart Color→ Select from your existing theme colors: Primary, Secondary, Dark, or Light.
Primary/Secondary Color → To use a custom color, choose Custom from the color options and select from the color picker your desired hex code (e.g.
#FFCC00).
STEP 7
Click Save to apply changes.
How to Change the Style or Color of the Buy Now Button
STEP 1
Navigate to the product page and expand the Product Information section.
STEP 2
Locate the Buy Button block and click on it.
STEP 3
Ensure Button Settings is set to Custom.
STEP 4
Navigate to the Buy it now Color and choose between Default, Solid, Outline or Custom Color.
STEP 6
When Custom color is selected, Primary and Secondary color pickers will appear where you can select or enter your desired hex code (e.g. #FFCC00).
STEP 7
Click Save to apply changes.
How to Change Button Styles Globally Across All Templates
If you have different product templates or use the Featured Product section on other pages, you can ensure all buttons stay consistent by setting global styles:
STEP 1
Go to your Theme Settings and open the Global Settings tab.
STEP 2
Adjust your button styles and colors as desired under the Custom Buttons section.
STEP 3
In your product templates and Featured Product sections, make sure the Buy Button option is set to Inherit. This will apply your global styles automatically across all pages.
How to Enable or Disable Button Animation Effects
STEP 1
Click on the Theme Settings icon and open the Global Settings tab.
STEP 2
Find the Add to cart animation effect option.
STEP 3
Select an animation (e.g. Glacier) or choose None to disable effects.
STEP 4
Click Save.