---
title: How to install CartPops on the Shoptimizer theme
description: Replace the Shoptimizer cart drawer and header cart with CartPops by changing a few theme settings and adding a launcher to the header.
sidebar:
  label: Shoptimizer theme
  icon: store
---

CartPops can replace the default Shoptimizer cart. You switch off Shoptimizer's own cart features, then put the CartPops launcher in the header.

## 1. Before you start

1. Install and activate CartPops, either Free or Pro. See [Installing CartPops](/getting-started/installing).
2. Install and activate the **Shoptimizer child theme**. You will add code to it. If you don't have it, read how to get it in [Shoptimizer's child theme guide](https://www.commercegurus.com/docs/shoptimizer-theme/should-i-use-a-child-theme/).

## 2. Change the Shoptimizer settings

Turn off the Shoptimizer features that CartPops replaces. In wp-admin, go to **Appearance** > **Customize**. Under **Layout** > **WooCommerce**, switch off:

- **Enable sidebar cart drawer**
- **Enable single product ajax**

![Shoptimizer layout settings with the sidebar cart drawer and single product ajax turned off](/blume-assets/content/content/03-guides/img/shoptimizer-disable-sidecart-drawer-and-ajax.png)

Then go to **Header and Navigation** > **Cart** and switch off:

- **Display cart**

![Shoptimizer cart settings with Display cart turned off](/blume-assets/content/content/03-guides/img/shoptimizer-disable-display-cart.png)

:::note
With **Enable single product ajax** off, CartPops adds from single product pages without reloading, as long as **Add to cart on product pages without reloading** is on under **WooCommerce** > **CartPops** > **Advanced** > **General**. Test with a real product to check the drawer opens.
:::

## 3. Add the launcher to the header

You add the [CartPops launcher shortcode](/guides/shortcodes) to the Shoptimizer header with a few lines of code in the child theme.

In wp-admin, go to **Appearance** > **Theme File Editor**, choose the **Shoptimizer Child Theme** and open `functions.php`.

![The Shoptimizer child theme functions.php file in the WordPress theme editor](/blume-assets/content/content/03-guides/img/shoptimizer-child-theme.png)

Add this code at the end of the file:

```php functions.php
remove_action( 'shoptimizer_header', 'shoptimizer_header_cart', 50 );
add_action( 'shoptimizer_header', 'cartpops_shoptimizer_header_cart', 50 );

remove_action( 'shoptimizer_navigation', 'shoptimizer_header_cart', 60 );
add_action( 'shoptimizer_navigation', 'cartpops_shoptimizer_header_cart', 60 );

function cartpops_shoptimizer_header_cart() {
	echo '<div class="site-header-cart menu">'; // This Shoptimizer wrapper is required for proper alignment of the cart icon.
		echo do_shortcode( '[cartpops_launcher indicator="none"]' );
	echo '</div>';
}
```

Change the shortcode in the code above to suit your store. For example, remove `indicator="none"` to show the item count. See [Shortcodes](/guides/shortcodes) for every option.

:::tip
Editing theme files in the browser can take your site down if there is a typo. Keep a backup, or use a code snippets plugin or SFTP instead.
:::

## 4. Add CSS

In wp-admin, go to **WooCommerce** > **CartPops** > **Advanced**. On the **General** tab, add this to the **Additional CSS** field, then click **Save Changes**:

```css
.main-header .cartpops-cart__container.cpops-toggle-drawer {
	color: black;
	padding: 0;
}

.shoptimizer-primary-navigation .cartpops-cart__container.cpops-toggle-drawer {
	color: white;
	padding: 0;
}
```

This CSS suits the default Shoptimizer demo. You may need to change the colors to match your site.

You can also set the launcher colors in CartPops, under **WooCommerce** > **CartPops** > **Launcher** > **Inline launcher appearance**. See [Cart launcher](/guides/launcher).

## 5. Check your store

Reload your store and add a product to the cart. Click the cart icon in the header. The CartPops drawer should open.

Shoppers also see the floating launcher. If you only want the header icon, turn off **Show floating cart launcher** on the **Launcher** page.