The Floating product bundle section lets you showcase a group of related products alongside a promotional image and content. Customers can choose product variants and add the displayed bundle products to their cart directly from the section.
This section is useful for presenting coordinated products or a curated product set in a visual layout.
Steps:
Add the Floating product bundle section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want the bundle to appear.
- Click Add section and select Floating product bundle.
- Click Save.
Select the bundle products
- Open the Floating product bundle section.
- Use Collection to display products from a selected collection, or use Products to select specific products manually.
- Adjust Maximum products to show to display 2–4 products.
- Click Save.
Configure the image and desktop layout
- Select the main Image for the section.
- Adjust Image height.
- Use Desktop image placement to choose Image first or Image second.
- Adjust Content position and Text alignment to position the promotional content over the image.
- Click Save.
Configure the mobile layout
- Upload an Image mobile if you want a separate image for smaller screens.
- Adjust Mobile image height.
- Choose Content position mobile and Text alignment mobile.
- Enable Swipe on mobile to let customers swipe through the product cards on smaller screens.
- Click Save.
Configure product variant options
- Under the Product card settings, enable Show variant labels if you want the option names displayed.
- Choose Variant picker type: Dropdown or Button.
- If you select Button, you can enable Color swatches.
- Choose the Swatch type: Color swatch or Variant image.
- Click Save.
Add promotional content blocks
- Inside the section, click Add block.
- Add Heading, Subheading, or Text blocks to introduce the product bundle.
- Use Button or Link blocks to direct customers to another page if needed.
- Add an Icon or Image block to enhance the promotional content.
- Use Spacing to control the space between blocks.
- Custom Liquid and app blocks are also available if needed.
- Drag blocks to change their order, then click Save.
Customize colors and section appearance
- Use the Colors settings to adjust text, background, highlight, button, and image overlay colors.
- Adjust Overlay opacity to change how strongly the overlay covers the background image.
- Under Section, adjust top and bottom padding.
- Enable Make section full width or Make section rounded as needed.
- Enable Parallax and choose Vertical, Horizontal, or Zoom for the background image effect.
- Enable Divider if you want a separator around the section.
- Click Save.
How the Floating Product Bundle Works
- The section displays the selected product cards next to or over the promotional visual layout.
- Customers can select variants on each product card before adding the bundle products to the cart.
- The Add to cart button submits the displayed bundle products together.
- Bundle products use their normal Shopify product and variant pricing; this section does not itself create a bundle discount.
Troubleshooting
- No products appear: Make sure you selected a Collection or added items to Products.
- Unexpected products appear: Check whether Products has been selected, since it takes priority over Collection.
- Color swatches do not appear: Set Variant picker type to Button and enable Color swatches.
- Variant image swatches are missing: Confirm that the product variants have images assigned.
- The bundle cannot be added to the cart: Check product availability and the selected variants.
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.
بانٹیں:
How to Set Up the Custom Section in Concept
How to Set Up the Reveal Image with Text Overlay Section in Concept