Product Bundle type
Last updated
Was this helpful?
Last updated
Was this helpful?
At the top of the page, there are viewing modes to help you review your Product Bundle layout:
Device View: See how the Product Bundle block will appear to your customers on both PC and mobile devices.
Layout View: The Display Only and Interactive modes contain some different elements in their blocks. Please note that certain sections can only be modified and applied to a specific layout type.
Here is an example of what the Product Bundle block looks like on your storefront:
Customize the appearance of the Product bundle block:
Block background: Determine the main color that fills the block in the background.
Block border color: Define the color of the outer edge surrounding the whole Volume discount block
Block border radius: Adjust the slider to change the roundness of the whole block's corner.
Block border width: Adjust the slider to set the thickness of the whole block’s border.
Seperator (“+” sign): Click on the color picker to set a custom color for the seperator.
Seperator (“+” sign) background: Click on the color picker to set a background color for the seperator.
Seperator size: Adjust the slider to change size of the seperator.
Default text: BUNDLE & SAVE
Decide how the bundler header would look:
Text size: Enter a value in pixels (px) to set the font size of the header text.
Text weight: Choose the font weight from the dropdown menu (e.g., Bold).
Text color: Click on the color picker to set a custom color for the header text.
Customize the background of the products' sections included in the bundle
Product background: Determine the main color that fills the product section in the background.
Product color: Click on the color picker to set a custom color for product section.
Border width: Adjust the slider to set the thickness of the product section border.
Border radius: Adjust the slider to change the roundness of the product section border.
Change the appearance of the product details included in the product sections, including:
Product title
Product price
Product regular price
Product quantity
You are able to change the:
Text size: Enter a value in pixels (px) to set the font size.
Text weight: Choose the font weight from the dropdown menu.
Text color: Click on the color picker to set a custom color.
The Total value line
Change the appearance of the footer, including those elements below:
Footer
Footer regular price
Footer price
You are able to change the:
Text size: Enter a value in pixels (px) to set the font size.
Text weight: Choose the font weight from the dropdown menu.
Text color: Click on the color picker to set a custom color.
Used for the Grab this deal button in the Interactive layout.
Text size: Enter a value in pixels (px) to set the font size of the Grab this deal button.
Text weight: Choose the font weight from the dropdown menu (e.g., Bold).
Text color: Click on the color picker to set a custom color for the text.
Button background: Click on the color picker to set a custom color for the background of the button.
Customize the appearance of the tag that displays the best discount value to match your store’s design.
Text size: Enter a value in pixels (px) to set the font size of the highlighted tag.
Text weight: Choose the font weight from the dropdown menu (e.g., Bold).
Tag text: Click on the color picker to set a custom color for the text.
Tag background: Click on the color picker to set a custom color for the background of the tag.
This section allows you to customize the Product bundle block with CSS code, giving you full control over its appearance and layout, thereby ensuring the block outlook aligns perfectly with your store’s style.
If you’re unable to do it, don’t worry! Just click the Contact Us button, and our team will assist you right away.
By default, the Product Bundle block is displayed below the Buy It Now button on the product page.
If you wish to change its position, you can do so in two ways:
Using the Theme Editor – Move the widget to your preferred location directly within the Shopify theme editor.
Using a Snippet Code – Manually insert a code snippet into your theme files to position the block exactly where you want it.
If you have any questions or requests, such as customization request of trademark removal, just send us a message via Live Chat or email us at support@tek-labs.app. Good luck with your promotion campaign!