Step Navigation isn't Aligned Properly

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.

 


 

  1. From the Shopify admin, select Apps.
  2. Select Product Builder.
  3. Select Edit Product next to the Product Builder you want to adjust.

    Select Edit Product

  4. Select Customize Selected Theme.

    Customize Selected Theme

  5. 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

  6. Select Save.
  1. From the Shopify admin, select Apps.
  2. Select Product Builder.
  3. Select Display Settings.

    Select Display Settings

  4. 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

  5. Select Save.
Was this article helpful?
0 out of 0 found this helpful