Articles on: FAQs

How do I customize the bundle widget layout and styling?

How do I customize the bundle widget layout and styling?


Short answer: FoxSell bundle widgets can be customized through the Shopify theme editor settings for each app block. Available options include colors, spacing, swatches, and layout adjustments. For advanced customizations beyond the built-in settings, theme code edits may be needed.


Customizing through the theme editor


Most FoxSell widgets include customization options directly in the Shopify theme editor:


Accessing widget settings


  1. In Shopify admin, go to Online Store > Themes
  2. Click Customize on your active theme
  3. Navigate to a product page using a FoxSell bundle
  4. Click on the FoxSell app block (e.g., "FoxSell Shade", "FoxSell Glow", "Mix and Match PDP")
  5. View the block settings in the sidebar


Common customization options


Depending on your widget type, you may see options for:


Setting

What it controls

Section padding

Space above and below the widget

Background color

Widget background color

Border radius

Corner roundness of the widget

Font size

Text size within the widget

Color swatches

Enable/disable color swatch display

Swatch size

Dimensions of color swatches

Variant selector style

Dropdown vs. button-style selectors

Products per row

How many products show side by side

Mobile products per row

Products shown on mobile devices


Color swatch setup


To display color swatches for variant selection:


  1. Open the widget settings in the theme editor
  2. Find the Color swatches or Swatches section
  3. Enter the option name (usually "Color" or "Colour")
  4. Add color values with their hex codes (e.g., #FF0000 for red)
  5. Save the theme


Automatic swatches from Shopify metafields


Some widgets can pull color data automatically from Shopify color metafields. Check your widget settings to see if this option is available.


Layout limitations


Side-by-side vs. stacked layout


Some merchants want bundle options displayed side by side instead of stacked vertically. The available layout options depend on:


  • Your specific widget type (Tiered, Guided Steps, Fixed Bundle with Infinite Variants, etc.)
  • Your theme's structure
  • The built-in settings for that widget


If the theme editor doesn't offer the layout you need, custom theme code changes may be required.


When custom code is needed


For customizations beyond the built-in settings:


  1. Work with a Shopify developer - They can add custom CSS or modify the theme code
  2. Contact FoxSell support - We can advise on what customizations are possible and any best practices


Note: Custom theme code changes are outside the scope of standard FoxSell support. We recommend working with a developer for significant layout modifications.


Troubleshooting styling issues


If your widget doesn't look right after customization:


  1. Clear your browser cache - Old styles may be cached
  2. Check mobile view - Test on mobile devices as settings may differ
  3. Verify theme settings - Some themes have global settings that affect app blocks
  4. Check for conflicts - Other apps or custom code may interfere with styling




Need help with a specific customization? Contact us at support@foxsell.app with details about what you're trying to achieve.

Updated on: 24/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!