The product page widget is the primary way customers interact with your subscription plans. Customizing its text and color ensures it matches your brand identity and feels like a native part of your store. You should customize the widget when you want to improve visual consistency or use specific brand language to increase conversions.
Benefits of Customizing Your Widget:
Brand Consistency: Align the widget colors with your store’s primary palette.
Improved Clarity: Use custom text to explain your subscription benefits in your brand's unique voice.
Better User Experience: A well-integrated widget reduces customer hesitation at checkout.
Video Walkthrough [How to Customize Widget Design and Text in Recurpay]
Step 1: Access the widget design settings
Go to the Recurpay dashboard, select Settings, then General, and click on Widget Design.
Step 2: Update widget colors
Select the color picker for buttons, text, or accents to match your brand's specific hex codes.
Step 3: Edit widget text
Navigate to Settings and click on Translations to modify the wording of labels and buttons.
NOTE: Use this section to change standard text like "Subscribe & Save" to something more specific to your brand.
Step 4: Apply custom CSS
If you need advanced styling beyond colors and text, enter your code in the Custom CSS in your shopify theme edit under edit code
TIP: Only use custom CSS if you are comfortable with basic coding; otherwise, stick to the built-in design tools.
Step 5: Save your changes
Click Save to apply the new design to your live product pages.
WARNING: Always check your product page in a new browser window after saving to ensure the widget displays correctly.
Advanced Customization For a completely bespoke design, developers can utilize our Public APIs to build a custom interface on top of the Recurpay subscription engine.
Related Articles
Need Help? If you face any issues during installation, reach out to our team at help@recurpay.com or start a live chat anytime for real-time assistance. We are available 24x7.