Styling
AC Custom Fields provides comprehensive styling options to ensure your custom fields seamlessly integrate with your Shopify store's design. This document outlines the various styling features availabl
Styling Options
Layout Options
Width Settings
Control how your field spans across the product page:
Full Width: The field extends to the full width of its container
Custom Width: Specify a precise width (in pixels or percentage)
Width Value: When using custom width, set the exact width value
Height Settings
Adjust the height of your input fields:
Default Height: Use the standard height for the field type
Custom Height: Specify a custom height (particularly useful for textarea fields)
Height Value: When using custom height, set the exact height value
Color Customization
Text Colors
Customize the colors of various text elements:
Label Text Color: Color of the field label
Input Text Color: Color of the text entered by customers
Help Text Color: Color of the help text below the field
Placeholder Text Color: Color of the placeholder text
Error Message Color: Color of validation error messages
Background Colors
Adjust the background colors of your fields:
Input Background Color: Background color of the input field
Disabled Background Color: Background color when the field is disabled
Error Background Color: Background color when the field has an error
Border Customization
Border Settings
Customize the borders of your input fields:
Remove Borders: Option to completely remove all borders
Border Color: Color of the field borders
Border Width: Thickness of the borders
Border Style: Style of the borders (solid, dashed, dotted)
Border Radius
Control the roundness of your field corners:
All Corners: Apply the same radius to all corners
Individual Corners: Customize each corner separately (top-left, top-right, bottom-right, bottom-left)
Typography
Label Typography
Customize the appearance of field labels:
Font Family: Choose from available font families
Font Size: Adjust the size of the label text
Font Weight: Set the weight (boldness) of the label text
Text Transform: Apply transformations like uppercase, lowercase, or capitalize
Input Typography
Customize the appearance of text entered by customers:
Font Family: Choose from available font families
Font Size: Adjust the size of the input text
Font Weight: Set the weight of the input text
Help Text Typography
Customize the appearance of help text:
Font Family: Choose from available font families
Font Size: Adjust the size of the help text
Font Weight: Set the weight of the help text
Error Message Typography
Customize the appearance of error messages:
Font Family: Choose from available font families
Font Size: Adjust the size of error message text
Font Weight: Set the weight of error message text
Styling Preview
As you adjust styling options, the live preview panel shows how your field will appear on your store. This real-time feedback helps you fine-tune the appearance until it perfectly matches your store's design.
Theme Integration
AC Custom Fields automatically attempts to match your store's theme styling for a seamless integration. You can:
Use Theme Defaults: Adopt your theme's default styling for form fields
Custom Override: Apply your own styling that overrides theme defaults
Partial Customization: Keep some theme styling while customizing specific aspects
Mobile Responsiveness
All styling options are designed to work responsively across devices. Consider these mobile-specific recommendations:
Use full width fields on mobile devices for better usability
Increase input height slightly for better touch targets
Ensure font sizes are readable on small screens (minimum 14px recommended)
Test your styling on multiple device sizes
Styling Best Practices
Maintain Consistency: Keep styling consistent across all your custom fields for a professional look.
Prioritize Readability: Ensure there's sufficient contrast between text and background colors.
Match Your Brand: Use colors that complement your store's color scheme.
Don't Overdesign: Simple, clean styling often works best for form fields.
Test Across Devices: Verify your styling looks good on desktop, tablet, and mobile.
Consider Accessibility: Ensure your color choices provide enough contrast for all users.
Advanced Styling
For advanced styling needs beyond what's available in the standard options, AC Custom Fields supports:
Custom CSS Classes: Apply your own CSS classes to fields for advanced styling
Style Inheritance: Create style presets that can be applied to multiple fields
Style Export/Import: Save and reuse styling configurations across fields
Style Limitations
Font Selection: Limited to fonts already available in your Shopify theme
Animation Effects: Custom animations are not currently supported
Advanced Layouts: Complex multi-column layouts within a single field are not supported
For custom styling requirements beyond these options, please contact our support team to discuss possible solutions.
Last updated