Custom CSS
Add your own CSS file to customize how Subscribfy widgets look on your store
Add your own CSS file to customize how Subscribfy widgets look on your store.
What You'll Get
Full Control
Override any Subscribfy widget styles
Brand Consistency
Match widgets to your store's design
Persistent File
CSS stays even when you change themes
No App Changes Needed
Works independently of Subscribfy updates
Quick Setup
Let's create a custom CSS file in your Shopify theme. This takes just a few minutes.
Create the CSS File
In your Shopify admin, go to Online Store → Themes → Actions → Edit code.
- Open the Assets folder
- Click Add a new asset
- Select Create a blank file
- Name it
subscribfy-custom-styles.css - Click Done
Link the CSS File
Now you need to tell your theme to load this CSS file.
- Open the Layout folder
- Click on theme.liquid
- Find the
<body>tag - Add this code right after
<body>:
{{ 'subscribfy-custom-styles.css' | asset_url | stylesheet_tag }}- Click Save
Add Your Custom Styles
Go back to Assets → subscribfy-custom-styles.css and add your CSS.
Example: Change the loyalty widget button color:
.subscribfy-loyalty-button {
background-color: #FF5733 !important;
border-radius: 8px !important;
}Common Customizations
| Element | CSS Example |
|---|---|
| Button color | .subscribfy-loyalty-button { background-color: #000; } |
| Points text | .subscribfy-points-text { font-size: 16px; } |
| Widget container | .subscribfy-loyalty-widget { border-radius: 12px; } |
| Element | CSS Example |
|---|---|
| Plan card | .subscribfy-plan-card { border: 2px solid #000; } |
| Price text | .subscribfy-price { color: #333; } |
| Element | CSS Example |
|---|---|
| Portal header | .subscribfy-portal-header { background: #f5f5f5; } |
| Action buttons | .subscribfy-action-btn { border-radius: 4px; } |
Tips
Use !important when needed — Some styles may need !important to override default Subscribfy styles.
Test on mobile — Always check how your custom CSS looks on mobile devices.
Theme updates — If you change or update your theme, you'll need to add the link code to theme.liquid again. The CSS file in Assets will stay.
Troubleshooting
Was this page helpful?