Change the Look

Change the look of your custom options.

Overview

Podifai inserts its own UI blocks on your product pages. All styling — colors, fonts, spacing — is controlled by Podifai's global settings, so you can match your brand without touching any code. These settings apply to all products with custom options.

Global Style Settings

Open a product customizer from the Products page, then use the Global Settings panel to adjust shared colors and fonts.

Open Global Settings to style your customizer

Use Global Settings to control shared colors, fonts, and the storefront look for Podifai options.

Colors & Shades

Podifai uses two color groups to style the options UI:

Primary color — Used for selected states, accents, and active highlights. When a customer clicks a swatch or badge, the selection indicator uses this color. Pick a color that matches your brand's accent color.
Neutral shades — Control the everyday UI elements like labels, borders, and backgrounds. By default, Podifai uses neutral shades for most of the interface. There are four levels you can adjust:
- Lightest — Background fills (option group containers, hover states)
- Light — Borders, dividers, unselected outlines
- Medium — Secondary text, descriptions, placeholder text
- Dark — Primary labels, option names, headings

Adjusting these lets you control the contrast and visual weight of the options UI. For light themes, use lighter neutrals. For dark themes, invert the scale.

Use primary and neutral shades to tune the contrast and visual weight of the custom options UI.

Font

Set the default font family for option labels and text. You can choose from:

Theme font — Use the same font as your Shopify theme for a consistent look
Google Fonts — Pick any Google Font by name
Custom upload — Upload your own font files

Select a Google Font to update the default font used by Podifai option labels and text.

Custom CSS

All Podifai elements use podifai- prefixed CSS classes. For styling beyond what the settings panel offers, add custom CSS rules in your Shopify theme targeting these class names. Go to Online Store → Themes → Customize → Theme Settings, or edit your theme's CSS file directly.

CSS Class Reference

Class	Element
`.podifai-container`	Root wrapper for all Podifai options
`.podifai-option-group`	Each option type wrapper
`.podifai-option-label`	Option title/label text
`.podifai-swatch`	Individual swatch button (color/image)
`.podifai-swatch--active`	Currently selected swatch
`.podifai-badge`	Individual badge button
`.podifai-badge--active`	Currently selected badge
`.podifai-dropdown`	Dropdown select element
`.podifai-text-input`	Text input field
`.podifai-text-area`	Text area field
`.podifai-upload`	Image upload zone
`.podifai-price-addon`	Price add-on display text
`.podifai-accordion`	Accordion wrapper (when display mode = Accordion)
`.podifai-accordion-header`	Accordion toggle button

Common CSS Examples

/* Increase swatch size */
.podifai-swatch {
  width: 48px;
  height: 48px;
}

/* Round badge corners */
.podifai-badge {
  border-radius: 999px;
}

/* Custom selected state color */
.podifai-swatch--active,
.podifai-badge--active {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 2px #8B5CF6;
}

/* Adjust option group spacing */
.podifai-option-group {
  margin-bottom: 24px;
}

/* Style the upload zone */
.podifai-upload {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 32px;
}

Tips

Use browser DevTools to inspect Podifai elements and identify the exact class names on your store.
Podifai uses !important sparingly — your theme CSS should override without needing it in most cases.
Test on both desktop and mobile after adding custom CSS.
Global Settings (primary color, font) are the easiest way to match your brand — use CSS overrides only for spacing, borders, and layout adjustments.

Enable App Embed

Managing Orders