Beginner
How to build pricing pages on Shipixen
Quick Answer
Building pricing pages on Shipixen involves using the built-in pricing component templates, customizing tiers and features, and connecting payment processing. The platform provides pre-designed layouts that you can modify with your specific pricing plans and branding.
Prerequisites
- A Shipixen account
- Basic understanding of pricing tiers
- Knowledge of your product features
- Payment processor setup (Stripe recommended)
1
Access the Pricing Page Builder
Log into your Shipixen dashboard and navigate to Components > Pricing. Click on Create New Pricing Page to open the pricing page builder interface.
Tip
Start with a template that matches your business model - SaaS, one-time purchase, or freemium.
2
Choose Your Pricing Layout
Select from available pricing layouts: 3-Tier Standard, 2-Tier Simple, or 4-Tier Enterprise. Click on your preferred layout and then Customize This Template to begin editing.
Tip
The 3-tier layout with a highlighted middle option typically converts best for most SaaS products.
3
Configure Pricing Tiers
For each pricing tier, fill in:
- Plan Name (e.g., Basic, Pro, Enterprise)
- Price and billing frequency
- Plan Description (one-liner)
- CTA Button Text
Tip
Keep plan names simple and benefit-focused rather than feature-focused.
4
Add Features and Benefits
In the Features Section, add feature rows by clicking Add Feature. For each feature:
- Enter the feature name
- Use checkmarks, X marks, or custom values for each tier
- Add tooltips for complex features
Tip
List your most compelling features first and use specific numbers rather than vague terms like 'unlimited'.
5
Customize Design and Styling
Navigate to the Design tab to customize:
- Color Scheme - match your brand colors
- Typography - select fonts and sizes
- Spacing - adjust card padding and margins
- Highlight Tier - choose which plan to emphasize
6
Configure Payment Integration
Go to Payment Settings and connect your payment processor:
- Select Stripe, PayPal, or Custom
- Enter your API keys or webhook URLs
- Configure Success and Cancel redirect URLs
- Test the payment flow using Test Mode
Tip
Always test your payment flow thoroughly before going live to avoid losing potential customers.
7
Add Social Proof and Trust Signals
Enhance your pricing page with trust elements:
- Toggle on Money-back Guarantee badge
- Add Customer Testimonials below pricing tiers
- Include Security Badges (SSL, payment security)
- Display Customer Count or usage statistics
Tip
Social proof can increase conversion rates by up to 15% - don't skip this step.
8
Publish and Deploy Your Pricing Page
Once satisfied with your pricing page:
- Click Preview to test responsiveness
- Run the built-in A/B Test Setup if desired
- Click Publish to make it live
- Copy the generated URL or embed code
- Add the page to your website navigation
Tip
Consider creating multiple versions to A/B test different price points or feature presentations.
Troubleshooting
Pricing tiers not displaying correctly on mobile
Check the Mobile Settings in the Design tab and ensure Stack on Mobile is enabled. Adjust the Card Width to
100% for mobile breakpoints.Payment buttons not working after integration
Verify your API keys in Payment Settings and ensure Live Mode is enabled. Check that your webhook endpoints are correctly configured in your payment processor dashboard.
Features list appears misaligned across tiers
Go to Features Section and click Auto-align Features. If issues persist, manually adjust the Feature Row Height setting to
uniform.Page loading slowly with multiple pricing tiers
In Performance Settings, enable Lazy Loading for images and reduce the number of custom fonts. Consider simplifying animations in the Effects panel.
Ready to get started with Shipixen?
Put this tutorial into practice. Visit Shipixen and follow the steps above.
Visit Shipixen →