Step Navigation isn't Aligned Properly

Alexa

Published: May 13, 2015 15:03

Last Updated: August 26, 2021 17:39

Sometimes your theme's styling will overwrite Product Builder's styling.

This issue can be corrected by adding custom CSS into the Product Builder app admin, for both an individual Product Builder product as well as globally to all Product Builder products.

Example

misaligned steps example

Please select one of the options below for more information.

Fix for Individual Builder Products

From the Shopify admin, select Apps.
Select Product Builder.
Select Edit Product next to the Product Builder you want to adjust.
Select Customize Selected Theme.

Copy and paste the following code into the bottom of the Customize Theme CSS field:

.shappify_product_builder .step_header {
height: 40px !important;
margin-bottom:10px !important;
}

Customize Theme CSS

Select Save.

Fix for All Builder Products

From the Shopify admin, select Apps.
Select Product Builder.
Select Display Settings.

Copy and paste the following code into the Page Header HTML field:

<style>
.shappify_product_builder .step_header {
height: 40px !important;
margin-bottom:10px !important;
}
</style>

Page Header HTML Code

Select Save.