Follow these steps to display wholesale pricing on your storefront and customize its appearance to match your store’s theme.
Step 1: Access Your Online Store
From your Shopify dashboard, navigate to the Online Store.
Click Edit Theme to open the theme editor.
Step 2: Locate the App Embed
In the left-hand ribbon of the theme editor, scroll to App Embeds.
Find ECA: Easy B2B Wholesale App in the list of available app blocks.
Step 3: Enable the Wholesale Pricing Display
Toggle Enable Wholesale Price Display to turn on wholesale pricing on your storefront.
This will automatically show wholesale prices for eligible customers based on your pricing plans.
Step 4: Customize Plan Name Styling
Adjust how the wholesale plan name appears above your product prices:
Hide Plan Name: Toggle to hide the plan name label if you prefer a cleaner display.
Plan Name Color: Set the color (e.g., #666666).
Plan Name Font Size: Choose a font size (e.g., 12px).
Plan Name Font Weight: Select the weight (e.g., Medium).
Step 5: Customize Wholesale Price Styling
Set how wholesale prices appear on your storefront:
Wholesale Price Color: Choose a color for the wholesale price (e.g., #2D2A2A).
Wholesale Price Font Size: Set the font size (e.g., 18px).
Wholesale Price Font Weight: Select the weight (e.g., Medium).
Step 6: Customize Original Price Styling
Control how the original product price is displayed:
Hide Original Price: Toggle to hide the crossed-out original price.
Original Price Color: Set a color (e.g., #999999).
Original Price Font Size: Adjust the size (e.g., 14px).
Step 7: Layout Settings
Fine-tune spacing for a clean layout:
Spacing Between Elements: Adjust the spacing (e.g., 4px).
Margin Above/Below: Set margin values (e.g., 8px) for balance.
Step 8: Advanced Settings
Control advanced app behaviors:
App Proxy Path: /apps/wholesale – ensures correct app routing.
Auto-initialize on Page Load: Automatically fetch and display wholesale prices when the page loads.
Auto-inject on Collection Pages: Show wholesale prices on collection/catalog pages automatically.
Enable Debug Mode: Logs debug information to your browser console for troubleshooting.
Step 9: Save and Publish
Review all settings to ensure your styling and display options are correct.
Click Save in the theme editor.
Preview your store to confirm that wholesale pricing is visible and styled as expected.
Quick Tips:
Preview before publishing: Make sure your wholesale prices appear correctly for different customer types.
Consistent branding: Match plan name and price colors to your store’s theme for a professional look.
Test across devices: Ensure the layout and spacing look good on desktop and mobile.
Debug mode: Enable temporarily if you encounter display issues.