The Compact product bundle section displays a promotional image beside a group of products. Customers can choose variants and add the displayed products to their cart together. It is useful for promoting coordinated product sets without creating a separate bundle product.
Demo usage
See Build Your Bundle – Concept Demo. In the Concept 6.1.0 page.bundle.json template, the Compact product bundle section is configured with three speaker products, a promotional banner headed “Create Your Speaker Bundle”, and the image displayed second on desktop.
Steps:
Add the Compact product bundle section
- From Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page or template you want to edit.
- Click Add section and select Compact product bundle.
- Move the section to your preferred position and click Save.
Choose products for the bundle
- Open the Compact product bundle section settings.
- Choose a Collection to display products from that collection, or select individual items under Products.
- Set Maximum products to show to 2, 3, or 4.
- Click Save.
Important: When products are selected in Products, they take priority over Collection. This section adds the displayed products together, but does not automatically create a discount. Configure any bundle discount separately in Shopify admin.
Set up the promotional image and desktop layout
- Upload an Image for the promotional card.
- Set Desktop image placement to Image first or Image second.
- Adjust Desktop content position (Top, Middle, or Bottom) and Desktop content alignment (Left, Center, or Right).
- Click Save.
The promotional image and the product cards are shown in separate areas on desktop.
Customize the mobile layout
- Upload a Mobile image if you want a different image for smaller screens. Otherwise, the desktop image is reused.
- Choose Mobile image height, including Adapt to image or a fixed height.
- Set Mobile content position and Mobile content alignment.
- Enable Enable swipe on mobile to allow horizontal swiping through the products.
- Preview the layout on mobile and click Save.
Configure variant selection and color swatches
- Enable Show variant labels to show option names on product cards.
- Choose the Variant picker type: Dropdown or Button.
- For button-style pickers, enable Enable color swatches if needed.
- Under Swatch type, choose Color swatch or Variant image.
- Click Save.
For variant-image swatches, assign images to the relevant variants in Shopify admin.
Add promotional text and other content
- Inside the section, click Add block.
- Use Heading, Subheading, and Text to introduce the offer.
- Add Button or Link blocks for navigation, or Icon and Image blocks for supporting visuals.
- Use Empty space to adjust spacing between content blocks.
- Custom Liquid and compatible App blocks are also supported.
- Reorder the blocks and click Save.
Adjust colors, overlay, and parallax
- Under Colors, customize text, background, highlight, button, and Overlay colors.
- Change Overlay opacity to keep text readable over the promotional image.
- Under Section, adjust Top padding and Bottom padding; optionally enable the section divider, full width, or rounded corners.
- Enable Parallax effect for image movement while scrolling, then choose the Parallax direction: Vertical, Horizontal, or Zoom.
- Click Save.
How it works
- The section shows 2–4 products alongside a promotional image card.
- Shoppers choose a variant for each product and use the section's Add to cart button to add the displayed products together.
- The theme uses normal product prices. Promotional text such as “Save $30” does not apply a discount by itself.
Theme updates
- Concept 6.1.0 (October 23, 2026): Reduced spacing between variant buttons in bundles for a more compact layout.
- Concept 4.3.0 (July 10, 2025): Fixed an issue where the Compact Product Bundle promotional banner did not display correctly on mobile.
See the official Concept release notes.
Compact Product Bundle vs. Floating Product Bundle
- Compact Product Bundle: Places the promotional image in a distinct card beside the product list.
- Floating Product Bundle: Uses a larger promotional background, with a different layout for the bundle content.
Troubleshooting
- No products appear: Select a collection or specific products in the section settings.
- Unexpected products appear: Check Products first; it overrides Collection.
- Mobile banner looks wrong: Set a suitable Mobile image and Mobile image height, and confirm the theme is up to date.
- Swatches do not display: Check Variant picker type, Enable color swatches, and the variant images or swatch configuration.
- Products cannot be added to cart: Check that every selected product and variant is available for purchase.
- Bundle discount is missing: Create and configure the discount in Shopify admin; this section does not apply one automatically.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Images with Text Section in Concept
How to Set Up the Comparison Table Section in Concept