Salepify User Guide
  • ✨INTRODUCTION
    • What we do
    • Our Features
  • 📖User Guides
    • Enabling Salepify app
    • Gift offers
      • Embedded Gift
      • Popup Gift type
      • Progress Bar type
      • BOGO type
    • Bundle offers
      • Volume Discount
      • Product Bundle
    • Styling
      • Embedded Gift type
      • Popup Gift type
      • Progress Bar type
      • BOGO type
      • Volume Discount type
      • Product Bundle type
    • Translation
  • 💳PRICING
    • Pricing plan
  • ⚪OTHERS
    • Popup old version Migration Notice & Shut down plan
  • Privacy Policy
Powered by GitBook
On this page
  • Block
  • Bundle header
  • Product background
  • Product details
  • Footer
  • Button
  • Highlighted tag
  • Custom CSS
  • Widget placement

Was this helpful?

  1. User Guides
  2. Styling

Product Bundle type

Last updated 1 month ago

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:

You can hover an element in the preview to locate the edit option.

Block

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.

Bundle header

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.

Product background

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.

Product details

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.

Footer

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.

Button

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.

Highlighted tag

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.

Custom CSS

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.

Widget placement

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:

  1. Using the Theme Editor – Move the widget to your preferred location directly within the Shopify theme editor.

  2. 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!

📖
Product bundle
Only display
Interactive