Design Templates Bundle page customizations

Adding custom CSS

To add custom CSS rules within the Kitenzo app:

Step 1: Go to Kitenzo's Settings, scroll down to Custom CSS

Step 2: Enter the CSS as displayed below.

Step 4: Save your changes.

Hiding prices

You can easily hide prices on your bundle page by adding single lines of CSS. This can come in handy if you wish to have greater control over the content visible to customers on the bundle page.

The prices you can hide through CSS are:

• Individual product prices
• Prices for individual bundle contents
• The bundle contents comparison price
• The entire bundle price
• Prices for a particular bundle

Hiding individual product prices

Individual product prices are usually visible on the bundle page alongside each product (depending on your theme)

To hide individual product prices, add the following snippet to your Custom CSS field:

.ProductPrice-module__kitenzo-product-price { display: none;
}

Note: This CSS affects all bundles.

Hiding product prices within the bundle contents

Prices of selected bundle products are visible when a customer clicks View bundle contents. This opens a modal popup that displays the individual prices of each item within the bundle.

To hide the prices for bundle contents within the modal, add the following snippet to your Custom CSS field:

.GridProductCard-module__kitenzo-variant-price { display: none;
}

Note: This CSS affects all bundles.

Hiding the bundle contents comparison price

The bundle contents comparison price appears above the total bundle price. It shows the customer how much they would have paid if purchasing the same products outside of a bundle.

To hide the bundle contents comparison price, add the following snippet to your Custom CSS field:

.KitPrice-module__kitenzo-compare-at-kitprice { display: none;
}

Note: This CSS affects all bundles.

Hiding the total bundle price

The total bundle price is the accumulative price of all chosen products in a bundle. This is normally displayed above the option to View bundle contents.

To hide the bundle price, add the following snippet to your Custom CSS field under Design:

.KitPrice-module__kitenzo-kitprice { display: none;
}

Note: This CSS affects all bundles.

Display two product per row on mobile.

To display two products per row on mobile, add the following snippet to your Custom CSS field under Design:

@media (max-width: 768px) {
  .ProductGridContainer-module__kitenzo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Note: This CSS affects all bundles.

Add padding to the Add To Cart Button.

To add padding around the Add To Cart, add the following snippet to your Custom CSS field under Design, the px value can be changed to add more padding:

.KitAddToCart-module__button { padding: 0px 15px;
}

Note: This CSS affects all bundles.