Overview
The CTA Button Configuration feature, housed in the CTA Feature Slices, gives you complete control over the appearance and styling of call-to-action buttons on your Treez Ecommerce storefront. You can now choose from expanded button styles or create fully customized buttons that match your dispensary's brand identity.
Button Type Options
When configuring a CTA button in Prismic, you can select from five button types:
Primary: Your main brand button style (default)
Secondary: An alternative button style for less prominent actions
Tertiary: A subtle button option for tertiary actions
Link: Text-only link styling
Custom: Fully customizable button with your own color choices
Configuring Standard Button Types
Primary, Secondary, Tertiary, and Link Buttons
Open the document you wish to edit in Prismic & navigate to your CTA Feature slice
Locate the CTA Type dropdown field
Select your desired button type (primary, secondary, tertiary, or link)
Add your CTA Button Text
Configure your Link destination (internal page link)
Set External Link if needed, using the "Choose link type" option
These button types will automatically use your site's pre-configured brand styles.
Creating Custom Buttons
When you need precise control over button appearance, the Custom button type allows you to define exact colors for every state.
Step 1: Select Custom Button Type
In the CTA Type dropdown, select custom
Additional custom styling fields will appear below
Step 2: Configure Normal State Colors
Define how your button appears by default:
Custom CTA Background: The button's background color (hex code)
Custom CTA Border Color: The button's border color (hex code)
Custom CTA Text Color: The button's text color (hex code)
Step 3: Configure Hover State Colors
Define how your button appears when customers hover over it:
Custom CTA Background Hover: Background color on hover
Custom CTA Border Color Hover: Border color on hover
Custom CTA Text Color Hover: Text color on hover
Color Input Tips
Click the color picker icon to select colors visually
Enter hex codes directly (e.g., #8B92E7 for purple)
Ensure sufficient contrast between text and background for accessibility
Test hover states to ensure they provide clear visual feedback
Multiple Button Configuration
You can add both a primary and secondary CTA button to create multiple action options:
Configure your Primary CTA using the fields in the CTA section
Scroll to the Secondary CTA section
Configure your second button using the same options
Each button can have its own type (including custom styling)
Advanced Layout Options
Button Width Configuration
Control whether your buttons expand to fill available space or fit their content:
When enabled, buttons will be sized to fit their text content
When disabled, buttons will expand to fill their container
This setting applies to both primary and secondary CTAs
Header Width Settings
If you're using the max width header configuration option, your CTA content area will automatically adjust to accommodate full-width layouts.
Mobile Considerations
All CTA buttons automatically optimize for mobile devices with a minimum width of 160px to ensure easy tapping on smaller screens. No additional configuration is needed.
Best Practices
Color Selection
Maintain consistency with your dispensary's brand guidelines
Use high-contrast combinations for better readability
Test hover states to ensure clear visual feedback
Button Hierarchy
Use Primary buttons for your main desired action (e.g., "Shop Now")
Use Secondary buttons for alternative actions (e.g., "Learn More")
Reserve Tertiary buttons for less critical actions
Testing
Preview your changes before publishing
Test on both desktop and mobile devices
Verify that hover states work correctly
Accessibility
Ensure text color contrasts sufficiently with background color
Make button text clear and action-oriented
Avoid color-only indicators for important information
Troubleshooting
Custom colors aren't showing
Verify you've selected "custom" as the CTA Type
Check that hex codes are formatted correctly (include the # symbol)
Clear your browser cache and refresh the preview
Buttons appear too small on mobile
This is automatically handled by the system with a 160px minimum width
If issues persist, contact Treez Support
Need to reset to default styles
Change the CTA Type from "custom" to "primary" or another standard option
Save your changes to revert to theme defaults