Customize the Product Builder

Product Builder is a highly customizable solution to offering a unique purchase experience to your customers. You can customize the look and feel of Product Builder with CSS, as well as with the built-in Display Settings.

 Caution

As of February 19th, 2021, Product Builder is unavailable for new installations. If you are currently using Product Builder, you will be able to continue using the app as your account will now be grandfathered.

Please select an option below for more information.

 


 

Product Builder allows you to upload a variety of images for a variety of elements.

See below for the requirements of each upload.

 


 

Step Name Thumbnail

The Step Name Thumbnail is an 85x85px image that displays next to the name of each Builder step.

This can be edited within the Builder app admin under Edit StepsEditStep Details.

Note: The image must be 85 pixels wide and 85 pixels high.

Step Name Thumbnail Step_Name Thumbnail Example

 


 

Option Image

The Option Image is an 80x90px image that represents each product within your Builder steps.

This can be edited within the Builder app admin under Edit StepsEditOptions > Edit.

Note: The image must be 80 pixels wide and 90 pixels high.

Option Image Option Image Example

 


 

Image Scenarios

The photos you upload to each Image Scenario are 325x325px images that display within the Preview column of your Builder product whenever a product, or combination of products, is selected.

This can be edited within the Builder app admin under Assign Images in the left sidebar.

You must generate your image scenarios before you're able to upload. Please visit Assign Images to Your Product Builder for more information.

Note: The image must be 325 pixels wide and 325 pixels high.

Image Scenarios Image Scenarios Example

 


 

Product Builder offers you the ability to add your own custom CSS to an individual Builder product without affecting other Builder products.

Please follow the steps below to apply custom CSS to an individual Builder product.

  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. Enter your custom CSS into the Customize Theme CSS field.

    Customize Theme CSS

  6. Select Save.

 


 

Product Builder offers you the ability to easily apply your own custom CSS to all of your Builder products at once.

Please follow the steps below to apply custom CSS to all Builder products.

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

    Select_Display Settings

  4. Enter your custom code into the Page Header HTML field.

    Note: CSS must be wrapped in <style></style> tags when entered into the Page Header HTML field. HTML can be entered without style tags.

    Pager Header HTML

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