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

You can select and upload multiple Global Font files at once. Each file can be a TTF, OTF, WOFF, or WOFF2 file up to 2 MB. The same batch upload, formats, and per-file limit apply when uploading fonts for Font Swatch values. Shoppers can select one font at a time from a Font Swatch.

Product Page Settings

The Product page section in Global Settings controls shared storefront behavior:

• Show quantity selector — Show or hide the product quantity selector inside the Popup customizer.
• Out-of-stock options — Choose Disable to keep out-of-stock linked-variant values visible but unavailable, or Hide to remove them from the shopper's option list.
• Popup header — Choose Product title to show the title in the Popup header, or Without title to hide it.
• Popup cart behavior — Choose Redirect to cart page after Add to Cart, or Use default cart behavior to follow the Shopify theme's normal cart flow.
• Focus areas — Highlight the focused customization area and dim the rest of the preview. Clicking or tapping an area scrolls its related customization options into view.
• Enable live preview zoom — On mobile storefronts, let shoppers zoom the Live Preview with the on-screen zoom control or a pinch gesture.
• Enlarge option images — Enlarge supported Image Swatch images, Dropdown values with a leading image, and Badge Group values with a leading image when shoppers hover the image. This is not available for Font Swatch.
• Protect IP — Prevent visitors from using the storefront's normal right-click save-image action on Podifai preview images.

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.