Custom CSS
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.
Step 1: 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.cssClick Done
Step 2: 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>tagAdd this code right after
<body>:
##{{ 'subscribfy-custom-styles.css' | asset_url | stylesheet_tag }}
Click Save.
Step 3: 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
Loyalty Widget
Button color |
|
Points text |
|
Widget container |
|
Membership Widget
Plan card |
|
Price text |
|
Customer Portal
Portal header |
|
Action buttons |
|
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
CSS not applying?
Check that the link code is in theme.liquid after the <body> tag. Clear your browser cache and refresh.
Styles overridden by theme?
Add !important to your CSS rules to ensure they take priority.
Can't find the right class name?
Right-click on the element you want to style and select "Inspect" to see its CSS class names.
