Skip to main content

Using the Visual Product Builder


The Visual Product Builder is a tool used to visually build a new product for the oomph store. This tool can be used in place of the CSV import process or can be used to generate a CSV file you can modify and import at a later time.

Accessing the Visual Product Builder​


To access the Visual Product Builder:

  1. Login to your Shopify store
  2. Click Products in the left-hand menu
  3. Click More Actions in the top-right corner of the Products page
  4. Choose the Visual Product Builder option in the menu

Visual Product Builder Interface​


The Visual Product Builder allows you to create new products using a simple interface. You can create new products, save them for later modification, and import them into your Shopify products when you are ready to do so.

  1. Draft Products List - this will list all the products that have been created in the Visual Product Builder. Clicking an item will load it into the visual editor so you may edit the product, import it into Shopify, or delete it.
  2. Product Title - the title of the product you are working with.
  3. Fulfillment Vendor - the vendor this product is fulfilled through. This list is populated from your Shopify store.
  4. Primary Option - the primary variant option for your product. Typically, this option is whatever option is used to determine the cost of different Shopify variants.
  5. Product Options - the options associated with this product. You can add options, remove options, and change the allowed values for each option from this area. To add an option, click the “Add Option” button. To remove an option, click the “x” that appears next to the option name. To update the allowed values, click the option to open the Option Editor window.
  6. Internal Variants tab - the internal system variants for this product are displayed when this tab is active. These variants are not stored in Shopify, but instead are stored within the oomph Product Engine application. These variants are used to store unique SKUs and images.
  7. Shopify Variants tab - the Shopify variants that will be created for this product when it is imported. This is where you will be able to edit Shopify variant options such as the price and manufacturer SKU.
  8. Variants List - a list of the variants associated with the product. This list is paginated and will show 100 variants at a time.
  9. Download CSV - downloads a CSV file of the configured product for manual editing and/or importing.
  10. Run Import - directly imports the configured product into Shopify and the oomph Product Engine application
  11. Save - saves the changes you’ve made to this product so you can return to the product and edit again at a later time. Note: when you click on Download CSV or Run Import the product is also saved
  12. New Product - creates a new product

Creating a New Product​


When you open the Visual Product Builder, a new product is created automatically- it will not be stored until you click the Save button.

To create a new product, you can also use the New Product button below the Draft Products List

Adding Options to a Product​


To add options to a product:

  1. Click the Add Option button in the Product Options section of the page
  2. Check the box next to each option you would like to add; after checking the box, the available values for that option will appear. Select each value you would like to use with this product
  3. Click Add at the bottom of the dialog. The option will be added to your product and the variants will be updated to reflect this change

Editing Product Options​


To edit the options assigned to your product:

  1. Click the name of the option you would like to edit in the Product Options section of the page
  2. Check/Uncheck values you do not want to use with the product.
  3. Click the Save button. The option and variants will be updated to reflect your changes. Note: do not deselect all values from an option- if you wish to remove an option, see the Remove Options from a Product section

Removing Options from a Product​


To remove options assigned to your product:

  1. Click the “x” icon next to the name of the option you wish to remove
  2. Confirm the change in the dialog box that appears in your browser
  3. The option will be removed from your product. The variants will be reflected on your product. Note: if you remove an option unintentionally, you can re-add that option and its values to your product and the previous variant information will be restored.

Deleting a Product

If you want to remove a product from the Visual Product Builder, you will need to delete it. To do so:

  1. Open the product in the Visual Product Builder by clicking its name in the Draft Products list
  2. Click the Delete This Product link at the bottom of the page
  3. Confirm that you would like to remove the product

Note: deleting a product from the Visual Product Builder is permanent and cannot be undone. Removing a product from the Visual Product Builder will not delete the product from the oomph Product Engine or Shopify if it has already been imported to those services.

Editing Internal Variant Information​


Internal Variant information can be edited in two different spots: the Variants List will allow you to edit the SKU for an internal variant or you may use the Variant Editor to edit the SKU and images associated with a variant.

Editing SKU Using the Variants List​


To edit a variant SKU in the Variants List, change the value in the SKU text field for that variant. When you have made all the changes you would like on the current page of the Variants List, click the Save button before moving onto the next page.

Editing Variant Information Using the Variant Editor​


To open a variant in the Variant Editor:

  1. Click the Edit button along the right side of the variant entry in the Variants List.
  2. Update the text in the SKU field if necessary
  3. Add, rearrange, or remove photos from the Product Photos section. Note: the application will allow you to upload as many photos as you would like, but the current oomph website will only display the first 3 images on the front-end.
  4. Click Save when you have made the necessary changes
  5. Click the Save button at the bottom of the Variants List before moving to another page

Editing Shopify Variant Information​


To edit the Shopify Variant Information:

  1. Click the Shopify Variants tab
  2. Enter the manufacturer SKU in the SKU field if applicable
  3. Enter a price for that variant
  4. Click Save

Note: Shopify variants are created automatically and the setup of the variants cannot be changed manually. If you add/remove options or values from the product, these variants may be regenerated and you may need to complete the SKU and Price fields again- remember to check these before running a product import

CSV Files​


The Visual Product Builder allows you to export the products created as a CSV file which can be used with the oomph Product Engine upload process. The CSV file will contain all the same information found within the Visual Product Builder.

Downloading a CSV File​


To download a CSV File:

  1. Open the product you want to download in the Visual Product Builder.
  2. Click the Download CSV File button at the bottom of the page.
  3. After a few moments, your browser will download the CSV file. If you have a complex product, this can take a while to generate.

Editing a CSV File​


You can edit the CSV file downloaded in any spreadsheet application. There are new fields you can use in any CSV file uploaded to the oomph Product Engine that support the new functionality provided by the Visual Product Builder:

  • image_# - you can have as many image columns as you would like, numbered beginning with 1. The images should be direct URLs to the Amazon S3 image file. The display order will be controlled by which number is used in the column name. For example, the image uploaded to position 1 in the oomph Product Engine application would be the URL stored in column image_1
  • shopify_variant_sku - this column will map to the Manufacturer’s SKU in Shopify. This should be the same for each Shopify variant created- it is highly recommended to only use the Visual Product Editor to manage this field.

Importing a Product to Shopify/oomph Product Engine​


To import a product, you may export the CSV file as detailed above and upload it using the oomph Product Engine, or use the Run Import button. Both will use the same overall process to generate your product and create/update the product on Shopify.

Video Demonstration​


The following video demonstrates creating a simple product with several options, Shopify variant SKUs, and different price points from start to final import:

Video: screen-capture.webm