RecurX can read the colors of your published Shopify theme and apply them to the subscription widget, so it looks like part of your store. The widget also uses your theme's font unless you choose another one. This takes about 2 minutes.
Good to know: on a new store RecurX already does this for you. Until you save the widget settings for the first time, it applies your theme's colors automatically. Once you've saved anything on the widget page, RecurX never changes your colors by itself again — use the steps below whenever you want to re-match.
Step 1: Open the Design tab
- In your Shopify admin, open Apps → RecurX Subscriptions → Subscriptions.
- In the Widget card, click Customize widget.
- Click the Design tab. The Colors card is at the top.
Step 2: Start from your store theme
- Open Start from and choose My store theme. The help text reads Uses the colors of your published theme. The widget keeps using your theme's font.
- Click Apply colors.
Start from has two other choices:
- My brand color — pick a color from the palettes or enter your own under Custom. It applies as you pick it. Your brand color is also used by the quiz, volume bundles, Build-a-box, upsells and memberships on your store.
- A preset — ready-made palettes such as Classic light, Bold dark or Black and white. Select Apply colors to use one.
Step 3: Check the result
RecurX confirms with Colors from {your theme} applied. Save to keep them. The preview on the right updates straight away.
How RecurX reads your theme:
- It reads the color settings saved in your published theme — on Online Store 2.0 themes, the first color scheme. A draft theme you're still editing isn't used.
- For Shopify's Dawn theme, RecurX uses a palette that was checked by hand for readable contrast.
- If the theme has no accent color it can read, you see Your theme's colors couldn't be read. Pick a brand color or a preset instead. Nothing is changed in that case.
Step 4: Fine-tune individual colors
Under the Colors card every color can be changed on its own:
- Cards and borders — Card, Selected card, Border, Selected border.
- Text — Plan name, Heading, Price, Crossed-out price, Description.
- Labels and badges — Label, Label text, Badge, Badge text.
Type a hex value or click Pick.
Tip: If a text color is hard to read on its background, RecurX warns you under the field, for example Hard to read on the card color (2.1:1). Pick a darker or lighter color. Aim for a ratio of 4.5:1 or more.
Step 5: Keep your theme's font
In Typography:
- Leave Font empty to use your store theme's font.
- Leave Text size on Match store theme.
- Plan name size sets the size of the plan names (16px by default).
Step 6: Save
Click Save in the save bar at the top of the page. Your storefront shows the new colors once they're saved.
What happens next
- Changed your theme? RecurX doesn't follow theme changes automatically once you've saved. Repeat Steps 2–6 after you publish a new theme or change its colors.
- Cart widget (Pro) uses your theme's fonts, colors and corners.
- Corner shape is under Shape and spacing on the same tab (Corner radius and Spacing).