Change the Look

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

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.

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

Supported Styling

Use Podifai's built-in Global Settings and option appearance controls to style your customizer. Do not add custom CSS or edit Shopify theme code to change Podifai elements. Theme-level changes can produce inconsistent results across devices and may stop working after a theme or app update.

If a Podifai setting looks different on desktop and mobile, confirm the setting in the Podifai editor first. If the difference remains, send us your store URL, product URL, theme name, device and browser details, and screenshots from both devices so we can check the theme compatibility issue. See the Troubleshooting guide for the support checklist.

Customize Button Text

You can customize the text shown on the storefront Customize button. This is useful when you prefer wording such as Personalize, Design Yours, or another call to action.

Button visibility also depends on whether personalization is required or optional. See Customizer Display Modes for Popup, Inline, required personalization, and optional personalization settings.

Customizer Language

Podifai currently supports the customizer interface in English. You can change the Customize button text, but full per-language translations for every option label, value, help text, and interface control are not currently available.

Tips

• Use Global Settings for shared colors and fonts across all Podifai options.
• Use each option's appearance controls for size, spacing, borders, radius, and layout.
• Test the supported settings on both desktop and mobile before publishing.
• Contact Podifai support when the same setting renders differently between devices.