BulklyCart B2B KB
Ask Question Shopify App Store
Wholesale Portal Configuration

Portal Styling & Branding

Customize your wholesale portal's appearance with colors, logos, fonts, and custom CSS.

#styling #branding #portal #appearance #customization

Portal Styling Overview

The Portal Styling page lets you customize the look and feel of your wholesale portal to match your brand identity. From colors and logos to fonts and button styles, every visual element can be tailored to create a professional, on-brand experience for your B2B buyers. You can access a live preview of your portal at any time using the Open Portal button.

Color Settings

Customize the color palette of your entire wholesale portal:

How to Set Colors

  1. Navigate to Portal Styling in the BulklyCart admin sidebar.
  2. Find the Colors section.
  3. Use the color pickers to set:
  • Primary Color: Used for main headings, active navigation items, and key interface elements.
  • Secondary Color: Used for accents, highlights, and supporting elements.
  • Background Color: The main background of the portal pages.
  • Text Colors: Default text color for paragraphs, labels, and descriptions.
  • Button Colors: The background color of action buttons (Add to Cart, Place Order, etc.).
  • Button Hover States: The color buttons change to when a buyer hovers over them.

Click Save to apply your color changes.

Logo and Favicon

Your brand's logo appears in the portal header and on invoice templates. BulklyCart supports multiple logo formats to ensure your branding looks great in every context:

Uploading Your Logos

  1. In the Portal Styling page, scroll to the Logo & Favicon section.
  2. Upload your Standard Logo: This is your primary logo used in the portal header and invoices. Use a clear, high-quality image.
  3. Upload a Light-Colored Logo: If your portal uses a dark background or dark header, upload a light version of your logo (e.g., white or light-colored) so it remains visible.
  4. Upload a Favicon: This small icon appears in the browser tab when buyers visit your portal. Use a square image (typically 32x32 or 64x64 pixels).

Typography

Control the fonts used throughout your wholesale portal:

  • Font Family: Choose from a wide selection of web-safe fonts. Your selected font applies to all text in the portal.
  • Font Sizes: Adjust the default font sizes for various text elements to ensure readability.

Button Styling

Beyond button colors, you can also customize:

  • Border Radius: Control how rounded your button corners are. Set to 0 for sharp, square buttons, or increase the value for softer, more rounded buttons.

Catalog Layout Settings

Fine-tune how products are displayed in the portal catalog:

  • Image Ratio: Set the aspect ratio for product images in the catalog grid (e.g., square, landscape, portrait).
  • Products Per Page: Control how many products appear on each page of the catalog. Higher numbers reduce page navigation but may increase load time.
  • Pagination Position: Choose where the page navigation controls appear (top, bottom, or both).

Volume Pricing Table Design

If you use volume pricing, the tiered pricing table appears in multiple places across your portal: the product catalog, product detail pages, and Quick Order Forms. You can style this table to match your brand:

  • Table Colors: Set background, header, and alternating row colors.
  • Borders: Customize border thickness and color.
  • Fonts: Choose specific font styles for the pricing table text.

These settings apply consistently across all locations where the volume pricing table appears, ensuring a unified look throughout your portal.

Quick Order Volume Banner

The volume pricing savings banner that appears on Quick Order Forms can also be styled:

  • Background Colors: Set the banner's background color to make it stand out or blend in.
  • Border Radius: Control the roundness of the banner's corners.
  • Discount Text Font Size: Adjust the size of the savings text to emphasize or de-emphasize the discount information.

Custom CSS Injection

For advanced customization beyond the built-in styling options, you can inject custom CSS directly into your portal. This is useful for:

  • Targeting specific elements with unique styles.
  • Adding custom animations or transitions.
  • Overriding default styles for specific components.
  • Matching complex brand guidelines that require pixel-perfect control.

Simply paste your CSS code into the Custom CSS text area and save. Your styles will be applied on top of the portal's default styles.

Reset to Defaults

If you want to start over with a clean slate, use the Reset to Defaults option. This will:

  • Restore all color settings to the original defaults.
  • Remove all uploaded logos and favicons.
  • Reset font selections and sizes.
  • Clear any custom CSS.

Warning: This action cannot be undone. Make sure you've saved any custom CSS or noted your color codes before resetting.

Live Preview Tips

After saving your styling changes, click the Open Portal button to see how your portal looks with the new settings. Here are some tips:

  • Test on both desktop and mobile browsers to ensure your colors and fonts look good on all screen sizes.
  • Check that your logo is visible against the portal background color.
  • Verify that button colors provide enough contrast with button text for easy readability.
  • Test the volume pricing table styling by viewing a product with active volume tiers.