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.
  2. 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!

Have more questions? Submit a request