Using AI to Write Custom CSS
- 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.
■ Feel free to combine library templates — selecting another one appends its styles rather than overwriting your editor.
- What to Tell the AI (copy-paste template)
Copy this template into ChatGPT (or any AI). The lines in "FILL IN BEFORE SENDING" section are the ones you must fill in before sending — replace every placeholder with your actual values.
SYSTEM / ROLE
You are writing CSS for the Rapi Bundle Shopify app's 'Custom CSS' field. Reply with ONE fenced CSS block, valid CSS only, no prose.
ALLOWED CLASSES
Use ONLY these classes:
- .rapi-bundles
the bundle card
- .rapi-bundles__bar
one offer row (sold-out row also have .rapi-bundle-offer-sold-out)
- .rapi-header-title
bundle title row
- [class^='rapi-bundle-content']
outer wrapper — must NOT be the subject of a rule
SELECTION RULE
Selected offer has NO .selected /.active class. Target via :has():
.rapi-bundles:has( .rapi-bundles__bar input:checked) { ... }
TECHNICAL RULES
- Root every selector at .rapi-bundles. No body/html/ *.
- Template: .rapi-bundles
.rapi-{TEMPLATE}-bundles { }
- Animate only: transform, opacity, box-shadow, background-color,
color, border-color.
- @keyframes prefix: 'rapi-'.
- Add prefers-reduced-motion block.
- Avoid !important unless required.
FILL IN BEFORE SENDING
Template: [light | heavy | original | prestige | minimalist | grid]
Goal: [one sentence describing what to style]
Primary color: #______
Border radius: ____px
The lines in "FILL IN BEFORE SENDING" = fill these in before you send the prompt to the AI. Delete the brackets and write your actual template name, goal, and brand values.
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.
- 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.
- 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
- 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."
- 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: 04/05/2026
Thank you!