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 Builder's display settings, or in the theme's CSS file:

  1. From Shopify's 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.

That's it!

Was this article helpful?
0 out of 0 found this helpful