Podifai automatically matches your Shopify theme’s fonts and colors. For further customization, you can add your own CSS to fine-tune the look and feel of your customizer.
Adding Custom CSS
- Go to your Shopify admin → Online Store → Themes → Customize
- Click App embeds in the left sidebar
- Find Podifai and click the settings icon
- Paste your CSS into the Custom CSS field
- Click Save
Use your browser’s Inspect tool (Right-click → Inspect) to find the exact CSS selectors for the elements you want to style.
Common Customizations
Swatch Size
/* Make color/image swatches larger */
.podifai-swatch {
width: 48px;
height: 48px;
}
Border Radius
/* Round the corners of option containers */
.podifai-option-group {
border-radius: 12px;
}
/* Make swatches circular */
.podifai-swatch {
border-radius: 50%;
}
Font and Text
/* Change option label styling */
.podifai-option-label {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
Spacing
/* Adjust space between option groups */
.podifai-option-group {
margin-bottom: 24px;
}
/* Adjust gap between swatches */
.podifai-swatch-container {
gap: 12px;
}
Selected State
/* Customize the selected swatch border */
.podifai-swatch.selected {
border: 2px solid #000;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
Price Add-on Display
/* Style the additional price text */
.podifai-price-addon {
color: #666;
font-size: 12px;
}
Hide Elements
/* Hide the option description */
.podifai-option-description {
display: none;
}
CSS Selector Reference
| Element | Selector |
|---|
| Entire customizer wrapper | .podifai-customizer |
| Option group container | .podifai-option-group |
| Option label | .podifai-option-label |
| Option description | .podifai-option-description |
| Swatch container | .podifai-swatch-container |
| Individual swatch | .podifai-swatch |
| Selected swatch | .podifai-swatch.selected |
| Dropdown | .podifai-dropdown |
| Text input | .podifai-text-input |
| Text area | .podifai-text-area |
| Image upload area | .podifai-image-upload |
| Price add-on text | .podifai-price-addon |
| Accordion header | .podifai-accordion-header |
| Accordion content | .podifai-accordion-content |
These selectors are based on Podifai’s current DOM structure. Avoid targeting deeply nested elements or auto-generated class names, as these may change in future updates.
Best Practices
- Use specific selectors. Target
.podifai-* classes rather than generic element selectors to avoid affecting other parts of your theme.
- Test on mobile. CSS changes that look good on desktop may break on smaller screens. Always check responsive behavior.
- Don’t override functionality. Avoid hiding interactive elements like buttons or inputs, and don’t change
pointer-events or display on functional components.
- Keep it minimal. The less custom CSS you add, the easier it is to maintain when Podifai updates.
Need Help?
If you’re trying to achieve a specific look and can’t figure out the right CSS, send a screenshot of what you want to [email protected] and we’ll write the CSS for you. 
