Step Navigation isn't Aligned Properly

• Product Builder
• All Versions
• Basic CSS knowledge required
• 10 Minutes

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

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.

   

4. Under Page Header HTML, copy and paste this code:

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

   

5. Select Save.

That's it!