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.
Overview
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.
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 Steps > Edit > Step Details.
Note: The image must be 85 pixels wide and 85 pixels high.
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 Steps > Edit > Options > Edit.
Note: The image must be 80 pixels wide and 90 pixels high.
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.
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.
- From the Shopify admin, select Apps.
- Select Product Builder.
- Select Edit Product next to the Product Builder you want to adjust.
- Select Customize Selected Theme.
- Enter your custom CSS into the Customize Theme CSS field.
- 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.
- From the Shopify admin, select Apps.
- Select Product Builder.
- Select Display Settings.
- 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.
- Select Save.