Step Navigation isn't Aligned Properly

Sometimes a theme's styling will overwrite Product Builder's styling, this is an example of what this may look like:

misaligned steps

It can be corrected by adding custom CSS in Product Builder's display settings, or in the theme's CSS file:

  1. From "Shopify Admin", select Apps.

    Select Apps

  2. Select Product Builder.

    select product builder

  3. Select Display Settings.

    select display settings

  4. Under Page Header HTML, copy and paste this code:
    .shappify_product_builder .step_header {
    height: 40px !important;
    margin-bottom:10px !important;

    add the CSS

  5. Select Save.

    Select Save

That's it!