All Collections
Using the Mutiny Experience Editor
How to Configure Larger Scale Changes
How to Configure Larger Scale Changes

For advanced use cases that extend beyond changing text/images, or removing items on the page, use CSS to apply a class to containers.

Updated over a week ago

Note: This method requires engineering support to create code on your site.

When to consider

You want to make larger scale changes to your site (like introducing new templates, or adding net new elements), and you have engineering resources to support you.

How to implement in your site code

We recommend using a CSS class on containers within the <body>, to change the behavior in the browser. You can define a separate version of your CSS styles based on the presence of a class on your container tag to switch between your default and experiment behaviors. You will need to involve your engineering team to render both versions of your page, and use CSS to switch between the two.

As an example, let's imagine that this is what the default page code looks like:

.my-container { 
background-color: black;
display: block;
}

<html>
<head><title>My Awesome Site</title></head>
<body>
<div class="my-container">
<h2>This is normal</h2>
</div>
</body>
</html>


To instrument the changes on the page, create new CSS styles on the page set to display: none; and override your default styles when the class mutiny is appended to the container. In your HTML, include both the default page HTML content, and the modified page content referencing the new CSS styles.

Note: Personalizations can only be applied successfully to elements with less than 40MB of HTML, and less than 250 HTML nodes. We recommend structuring larger <body> pages into containers that do not exceed these maximums before creating personalization containers.

<html>
<head>
<style>
.header,
.header-2,
.logo-bar,
.logo-bar-2 {
display: none;
}

body:not(.mutiny) .header,
.logo-bar {
display: block;
}
body.mutiny .header-2,
.logo-bar-2 {
display: block;
}
.header-container {
/* Shared styles for positioning header */
}
.logo-bar-container {
/* Shared styles for positioning logo bar */
}

</style>
</head>

<body>
<div class="header-container">
<div class="header">
<h1>
This is my normal header
</h1>
</div>
<div class="header-2">
<!-- Content to be personalized by Mutiny -->
</div>
</div>
<div class="logo-bar-container">
<div class="logo-bar">
<!-- Here is my normal logo bar -->
</div>
<div class="logo-bar-2">
<!-- Render my new custom logo bar here personalized in Mutiny -->
</div>
</div>
</body>
</html>

How to implement in Mutiny

After the page code updates are in place, use Mutiny to add the new class (in the above example, mutiny ) to the <div> container that sits just below <body>.

Step 1 - Define the audience that should see these changes

Step 2 - Create a new on-page experience
Enter the URL for the page you want to modify and open the Mutiny editor.

Step 3 - Select the correct <div> element
When your page loads in the Mutiny experience editor, use the Find tag button to select the correct tag.


Step 4 - Add the class (ie, mutiny ) in the HTML Attributes menu

Expand the HTML Attributes menu and add the class name in the Class field.


Don't be a stranger

If you have any questions, we’re here to help! Please feel free to contact us at any time, either through intercom chat or via mutinylovesyou@mutinyhq.com.

Did this answer your question?