Skip to content
Sign in
Home
  • There are no suggestions because the search field is empty.

Innon Product Page Builder Guide

This Guide Covers How To Create A Product In Shopify And Build Its Product Page Using The Innon Product Page Builder. It Explains How To Set Up The Product In Shopify, Add Key Details Such As The SKU, Images, Pricing, And Inventory, And Then Create The Product Page Content Either Manually Or From A Supplier PDF.

How To Guide

Note: Any steps that are directly on your computer may be slightly different, as this guide was created on Windows. This will be updated with any changes when they are found. Please also remember to save you go to avoid losing any work. There is an autosave function, but it does not save continuously as you type.

Important:

  • Due to the current set-up this process needs to done in both UK and EU stores 
  • Any steps not mentioned in this guide should be skipped and ignored.
  • If any steps have been missed or should be included, please raise them.
  • If you run into any issues or need help with this process, please ask for assistance.

Initial steps:

Gather all the relevant material for the product you’re creating (e.g. images, data sheets, prices). It’s recommended to keep everything needed for uploading or reference in your Downloads folder, as these files are temporary and can be deleted once the process is complete.

 

Shopify Steps:

This is where you create the product page and add all the required information.

Open the Create New Product page on Shopify

(Title) - In Shopify, enter the product title. This should be the SKU, for example, "WT304-868M". Make sure this matches the supplier’s SKU from the price list so we can link the products correctly.

(Description) - Skip the description for now, this will be added in a later step.

(Media) - Add any images you have for the product. Please upload them in the correct order to keep things consistent. See the steps below for how to upload images correctly in Shopify.

  • Rename each image using the product SKU in the correct order, for example, WT304-868M-1, WT304-868M-2, etc.
  • Once this is done, go back to the Shopify page and click Upload New in the Media section. Select all the relevant images and click Open.
  • The images will appear on the page. If they’re in the wrong order, you can drag them to rearrange. Please double-check the final order.

(Category) - This step is still a work in progress, so please skip it for now.

  • When it’s ready, you’ll need to select the most relevant category for the product from the drop-down list.

(Price) - Add the standard selling price. You can find this here for UK: UK Price List V19_2026 and here for the EU: EU Price List V19_2026

(Inventory) - Change “Inventory will be stocked at” to “Multiple Locations”, then add the current quantity in Exigo. This should be 0 if the stock has not been booked on yet. Next, click the SKU button to expand the field and enter the SKU number. This should match the product title, without any extra help text such as " - Smart Radiator Thermostat".

Finally, tick “Continue selling when out of stock”.

(Shipping) - This step is still a work in progress, so please skip it for now.

  • When completing this section, open the Package drop-down and choose the correct packaging size. If it’s not listed, see the steps below for creating a new package. The weight should auto-fill when you select a package, but please double-check it.
  • Add the Country of Origin by clicking the field and selecting the correct option from the drop-down list. You’ll also need to enter the Harmonised System (HS) code.
  • Click Add new package, choose the package type, then enter the dimensions in cm. Add the weight in kg — if it’s under 1kg, use 0.xxx.
  • Finally, add the package name using the SKU only, for example, WT304-868M.

(Variants) - Only add variants if they’re needed. If a product has different licence options, this is where you add them. For example: SUP-0 with SUP-0-SMA-INIT, SUP-0 with SUP-0-SMA-3YR, and SUP-0 with SUP-0-SMA-5YR. The option name should reflect the type of option, for example, Point Count (WT401-868M – Point Count), followed by the relevant values such as 50, 100, 250, and so on.

(Search engine listing) - Leave this as it is; it will be auto-populated when the product is created.

Note: Scroll back to the top of the page and move to the right-hand column.

(Status) - Set this to Draft. It should only be changed to Active once all the other steps are complete.

(Publishing) - This step is still a work in progress, so please skip it for now.

(Product organisation) - Add the Type, Vendor, Collections, and Tags using the drop-downs.

(Theme template) - This step is still a work in progress, so please skip it for now.

Note: Save the product using the Save button in the top banner, then switch over to the New Product Builder (Placeholder).

 

Product Page Builder Steps:

Open the Create New Product page on Innon Product Page Builder

This is where you take the information from the supplier document and turn it into HTML for the product page.

(Description) - This field is required. You won’t be able to run the export unless it’s filled in.

  • Add or edit the product description here, separating paragraphs with a blank line. For any subheadings, select the Insert Heading button, then add your text after the inserted (Header) label, leaving a space before the text.

(Features) - This field is required. You won’t be able to run the export unless it’s filled in.

  • Add or edit the product features here, with each feature on its own line. For any subheadings, select the Insert Heading button, then add your text after the inserted (Header) label, leaving a space before the text. Subheadings in this section will not be converted into bullet points.

(Benefits) - This field is optional and is not required to run the export. However, if you have this information, it should be included.

  • Add or edit the product benefits here, with each benefit on its own line. For any subheadings, select the Insert Heading button, then add your text after the inserted (Header) label, leaving a space before the text. Subheadings in this section will not be converted into bullet points.

(Typical Applications) - This field is optional and is not required to run the export. However, if you have this information, it should be included.

  • Add or edit the product's typical applications here, with each typical application on its own line. For any subheadings, select the Insert Heading button, then add your text after the inserted (Header) label, leaving a space before the text. Subheadings in this section will not be converted into bullet points.

(Technical Specifications) - This field is optional and is not required to run the export. However, if you have this information, it should be included.

(Text Builder) - Make sure Text mode is turned on.

  • Add or edit the product's technical specifications here, with each technical specification on its own line. For any subheadings, select the Insert Heading button, then add your text after the inserted (Header) label, leaving a space before the text. Subheadings in this section will not be converted into bullet points.

(Table Builder) - Make sure Table mode is turned on.

  • To add an existing table, paste it into the text box. Make sure any subheadings in the table are on their own row and include the (Header) label.
  • To build a table using the table builder, open it using the Create Table button. You can add or remove columns, rows, and sections using the controls along the top-left and down the right-hand side of the table. If you need to start again, you can clear the table using the Clear Table button. Subheadings can be added using the Add Subheader button. A preview will appear below the table builder so you can see how the table will look as you build it. Once the table is complete, click Confirm Table to add it to the form.

(Downloads URL) - This field is required. You won’t be able to run the export unless it’s filled in.

  • Add the support website URL for the product you’re creating, for example, https://downloads.innon.com/milesight-wt-series-download. If one doesn’t exist yet, leave the default URL https://downloads.innon.com/.

(Description)

Once you’ve added all the information, you can generate the HTML code to add to the product page. To do this, click Generate Shopify HTML. Once it’s finished, click Copy HTML to copy the code. Next, go back to the product page and scroll to the Description section. Open the HTML editor by clicking the (</>) button in the top-right corner, then paste in your code. Click the (</>) button again to return to the normal view, and visually confirm the page looks correct. Finally, save the product using the Save button at the top of the screen.

This completes the setup for the product in Shopify. However, the product still needs to be set up in HubSpot and have its VIP pricing added. As both of these systems are currently being worked on, please pass this over for completion. Once the new process is finalised, an update will be shared, and this guide will be updated accordingly.