Product Page Buttons

The Product page buttons section allows you to customize how all action buttons look on the product page.

These settings help create a consistent visual hierarchy across your product interface, ensuring that important actions stand out while maintaining a cohesive look with your store’s overall theme. You can customize border and background colors, gradients, hover effects, shadows, and even text and icon colors for each button group individually.

---

Location: Theme settings -> Product page buttons

---

Add to cart button

Option	Explanation
Border	Sets the border color of the Add to Cart button.
Show background	Enables a filled background or makes the button outline-only.
Background	Sets the background color when the button is in normal state.
Background gradient	Allows using a gradient fill instead of a solid color.
Text	Sets the text color inside the button.
Icon	Sets the color of any icon used inside the button.
Show background on hover	Adds a filled background only when the button is hovered.
Background hover	Defines the background color when hovering over the button.
Background gradient hover	Applies a gradient background on hover.
Text hover	Changes the text color on hover.
Icon hover	Changes the icon color on hover.
Enable shadow	Adds a shadow behind the button for depth and emphasis.

---

Dynamic checkout buttons

Examples: Buy Now, Express Checkout buttons

Option	Explanation
Background	Sets the background color of dynamic checkout buttons.
Text	Controls the text color.
Background hover	Defines background color when hovered.
Text hover	Changes the text color when hovered.

---

Wishlist button

Option	Explanation
Border	Sets the border color of the wishlist button.
Show background	Enables a background fill or keeps the button outline-only.
Background	Defines the normal background color.
Background gradient	Allows using a gradient fill.
Icon	Sets the icon color inside the button.
Show background on hover	Adds background fill only when hovered.
Background hover	Sets the background color when hovered.
Background gradient hover	Applies a gradient on hover.
Icon hover	Changes the icon color when hovered.
Enable shadow	Adds a drop shadow for visual prominence.

---

Compare button

Option	Explanation
Border	Sets the border color of the compare button.
Show background	Enables background fill or outline-style.
Background	Defines the solid background color.
Background gradient	Allows using a gradient background style.
Icon	Controls the icon color inside the button.
Show background on hover	Adds background only when hovered.
Background hover	Sets background color on hover.
Background gradient hover	Applies gradient styling when hovered.
Icon hover	Changes icon color on hover.
Enable shadow	Adds shadow for depth and better visibility.

---

Variants buttons

Used for product option selections such as Size, Color, etc.)

Option	Explanation
Border	Sets the border color of variant buttons in normal state.
Background	Controls the background color of variant buttons.
Border	Adjusts border color when using additional hover/background effects.
Text	Sets the text color on variant buttons.
Background hover	Defines background color when the button is hovered.
Border hover	Changes border color on hover.
Text hover	Changes text color on hover.
Background sold out	Background color for variant buttons representing unavailable options.
Border sold out	Border color for sold-out variants.
Text sold out	Text color used for sold-out variants.