Using AI to Write Custom CSS

1. Before You Start

■ Decide scope: This bundle = widget-only. All bundles = shop-wide rule on every bundle block.

■ Use live theme classes: Target documented hooks like .rapi-bundles, .rapi-bundles__bar, .rapi-header-title, [class^="rapi-bundle-content"]. Copy them from the app's Custom CSS screen.

■ Theme safety: Prefer specific selectors rooted at those hooks. Avoid bare tags like div { } or * { } to prevent restyling the whole storefront.

2. What to Tell the AI (copy-paste template)

Copy this template and fill in the bracketed placeholders:

You are helping me write CSS for my Shopify storefront.
The CSS will be pasted into my bundle app's "Custom CSS" field.
It only affects the bundle widget if I use the right selectors.
Constraints:
- Output ONLY valid CSS. No markdown, no explanations.
- Root selectors: [paste from app — e.g. .rapi-bundles,
 .rapi-bundles__bar, .rapi-header-title, etc.]
- Avoid !important unless necessary; prefer 1-2 levels
 of specificity under .rapi-bundles.
- I use template: [Light / Heavy / Prestige / etc.]
Goal (one sentence): [e.g. Round corners on offer cards
 and add a soft shadow on hover.]
Optional brand tokens:
- Primary color: #______
- Border radius: ____px

Ask for one small change at a time — e.g. 'only header typography' then 'only offer borders'. Smaller chunks are easier to debug when something conflicts with your theme.

3. Review the Output (quick checklist)

• Syntax — balanced { }, no stray HTML or JS.
• Specificity — selectors live under .rapi-bundles (or your documented roots), not body or #shopify-section-…
• !important — only if the theme already overrides your rule; remove it if you can.

4. Test in the App

1 - Paste into Custom CSS, choosing This bundle or All bundles as intended.

2 - Use the in-app preview first.

3 - Check your storefront product page. Hard-refresh / clear cache if needed

5. If Something Breaks

■■ Remove the last chunk of CSS you added.

■■ Narrow the selector — e.g. from .rapi-bundlesbar to .rapi-bundlesbar-title.

■■ Ask the AI: "This rule is too broad and affects [X]. Rewrite it to only target the bundle widget under .rapi-bundles."

6. Limits to Set with Users

AI can invent class names. Always cross-check against the list in your app or with browser Inspect on the live widget

Grid/flex reordering may need a developer if the theme already uses aggressive CSS overrides.

Checkout, cart drawer, and non-bundle pages are outside this custom CSS unless they explicitly share those classes

Always verify AI-generated class names against the live widget using browser Inspect

Updated on: 06/04/2026