Create a Neon Letter Configuration
Build a complete Custom LED Neon Sign configuration from scratch, including sizing, pricing, fonts, colors, materials, jackets, backboards, mountings and optional customer inputs.
Build your Custom LED Neon Sign
This guide walks through a complete Neon Letter configuration from the first setup screen to storefront testing. You will configure the choices that affect the design, calculated dimensions, price and physical construction of the finished sign.
Create the Shopify product you want to customize. In this example, we use Custom LED Neon Sign. We build the configuration from scratch, so demo data is not required.
1. Create the Neon Letter configuration
From List of configurations, create a new configuration and choose Letter Signs. When ASO asks for the lettering product type, select Neon Letter Signs.
Continue through the setup, give the configuration a clear internal name, and associate it with the Shopify product that customers will purchase. The product association is important: the configuration defines the customization experience, while the connected Shopify product remains the product used on your storefront and at checkout.
Leave demo data disabled. This makes it easier to understand which options you are adding and how the final Neon configuration is structured.
2. Add the available sizes
Open Core Setup → Sizes. This section defines the size choices customers can select before or while designing their Neon sign. Add the sizes you actually manufacture and give each one a clear customer-facing label.
Keep the list practical. If your workshop sells a small set of standard sizes, create those standard choices instead of exposing unnecessary values. The size selected here becomes part of the design context used by the preview and by the pricing configuration you build next.
For a Neon Letter product, size settings also influence how the entered text is displayed. When Auto resize is enabled, define the minimum, default and maximum font sizes for desktop and mobile. ASO can then adapt the text preview to the selected sign size instead of displaying every size with the same visual scale.
After saving the sizes, switch between them in the preview and confirm that the text remains readable and that the visual change matches the size progression you intend to sell.
3. Set up the Neon pricing
Open Core Setup → Pricing. Pricing profiles define how ASO calculates the cost of the customer’s lettering. A configuration can contain multiple pricing profiles, which is useful when different fonts or production rules require different calculations.
Create the pricing profile before configuring your fonts. This order matters because each font can later be connected to the pricing profile that should be used when that font is selected.
Choose the pricing method
When you add or edit a pricing profile, choose the method that matches how your workshop prices Neon lettering. In this guide we use Fixed cost per letter. With this method, the pricing screen exposes the values and size ranges required for a letter-based calculation.
Use Add Size Range to create the ranges needed by your pricing model. The range cards can contain values such as maximum size, letter price, start price and shipping-related values, depending on the selected pricing method.
ASO also supports Letter material cost and Letter pricing method And letter material cost. Selecting another method changes the pricing fields shown in the editor. For example, the combined method can expose material-area cost in addition to the letter-pricing values. Configure only the method that reflects your real production calculation.
Shipping values
The pricing editor also provides shipping methods based on Surface (W×H) or Weight (kg). If shipping is part of the profile you are building, enter the values required by the method you use. If it is not part of this pricing workflow, do not add arbitrary values simply to fill the fields.
Create the pricing profile → configure its ranges and values → save it → assign that profile to the relevant fonts. This makes it easier to test which pricing logic is active when the customer changes fonts.
4. Add fonts and connect them to pricing
Open Core Setup → Fonts. Add the typefaces customers can use for their Neon text, choose the default font and arrange the list in the order you want customers to see it. Fonts added or updated here are synchronized with Manage Fonts.
Do not add every font in your library automatically. Offer the fonts you can actually manufacture as Neon and make the most representative option the default.
When adding a font, you can select an existing font from the font library or create/upload one. This lets you use a font already managed by ASO, a Google font, or upload your own .ttf font. You can also provide a preview image so customers can recognize the font visually.
Connect the font to its pricing profile
Assign the pricing profile that applies to the font. This connection tells ASO which pricing rules should be used when the customer designs text with that typeface.
Enter the minimum letter heights
With the pricing model used in this example, ASO asks for Minimum height for smallest letter and Minimum height for uppercase letter. These measurements help ASO calculate the physical dimensions of the entered text more accurately instead of assuming that every character has the same minimum height.
You can also control Line Height, using the normal/default behavior or a specific line height when your production setup requires it.
Two fonts can render the same word at different physical dimensions. Providing the font measurements required by the selected pricing method helps keep the calculated Neon size and price aligned with the typography the customer selected.
5. Configure Neon colors and glow
Open Core Setup → Colors. This is where you define the Neon color choices customers can apply to their lettering. Add only colors you can produce, choose the default option, and set the customer-facing title and description for the section.
Each color can carry more than a swatch. ASO lets you define its visual type, availability rules, customer-facing media and optional pricing, so a color can represent a real production option rather than a purely decorative choice.
Create a color option
For each option, choose a color type such as Simple Color, Mixed Color or Flow Color, then define the color values required by that type.
Use Minimum Width, Minimum Height, Maximum Width and Maximum Height when a color should only be available for certain sign dimensions. The One of two / Both rule controls how the minimum width and height conditions are evaluated.
You can also attach a Preview Image or Popup Image to explain the finish visually. If a color changes the selling price, use the available Base Price or Multiplier pricing option instead of creating a separate product.
Choose how the glow is displayed
The section-level Glow Effect setting controls how the illuminated effect is derived in the preview. The interface provides options such as Light Color, Same Color and Text color. Choose the behavior that best represents the Neon product you are selling, then verify it in the preview.
6. Add the physical Neon sign options
Expand Sign Extras. This area describes the physical choices around the Neon lettering itself. You do not need to populate every section: configure the extras that correspond to products your workshop actually manufactures.
Materials
Open Sign Extras → Materials to define the material choices offered with the sign. Materials are useful when the physical product can be manufactured with different supported materials or finishes.
Click Add Material, enter a clear label and description, and optionally add a Preview Image and Popup Image. These images are especially useful when two material names would otherwise be difficult for a customer to distinguish.
A material can contain Backboard Exclusions and Mounting Exclusions. Use these rules to prevent customers from selecting combinations your workshop cannot manufacture. If the material changes the selling price, choose Base Price or Multiplier; otherwise leave additional pricing at None.
Do not expose every backboard and mounting for every material by default. Configure exclusions so the storefront only presents combinations you are prepared to produce.
Jackets
Open Jackets to define the appearance of the Neon tube when your product offers different jacket types. For example, you can create a White tube option or a colored jacket.
Each jacket can have a label, description, preview/popup images and a type such as White or Colored. Use Color Exclusions when a particular Neon color should not be offered with that jacket. If the jacket affects the product price, configure a Base Price or Multiplier.
Choose the default jacket carefully because it determines the initial tube appearance customers see when the configurator opens.
Use the Jacket section title and description to explain the choice in simple terms. For example, you can tell customers that this option controls the tube color when the sign is turned off.
Backboards
Open Backboards to define the physical support behind the Neon lettering. Click Add Backboard, enter the label customers should see, and choose the backboard type.
In this example, we use Cut To Shape. After choosing the backboard type, configure the properties exposed for that type. The editor shown here includes Activate layers and Backboard length.
Add a preview or popup image when customers need a visual reference. If one backboard costs more than another, use the optional Base Price or Multiplier instead of hiding the price difference elsewhere in the configuration.
Backboard colors
Backboard colors are managed separately from the backboard itself. This allows one backboard type to support several finishes without creating a duplicate backboard for every color.
When adding a backboard color, enter the label customers should see and decide whether the option uses a flat Color or a texture. Enable backboard color visualization when the selected finish should be represented in the builder.
Use the backboard assignment/availability controls to make the color available only with the backboards for which it is valid. This lets one configuration contain several backboard styles without showing every color on every backboard.
You can also control availability using Minimum Width, Minimum Height, Maximum Width and Maximum Height. The One of two / Both behavior determines how the minimum width and height conditions are combined. Preview/popup media and optional pricing are available as well.
Mountings
Open Mountings to define how the finished Neon sign can be installed. Add a mounting option, enter its label, then choose the visualization used in the configurator.
The available visual representations shown by the editor include None, Screw, Screw Cap, Flag, Hanging and Key Ring. Select the representation that corresponds to the mounting method you are defining.
Then configure Excluded Colors and Excluded Backboards when the mounting is not compatible with every option. Add preview/popup images if customers need help identifying the hardware, choose the default mounting, and apply Base Price or Multiplier only when the mounting changes the price.
7. Optional: add SVG Icons
If customers can add graphic symbols alongside their text, open Sign Extras → Icons. Icons are uploaded as SVG files. ASO processes the source SVG and shows the processed preview used by the sign builder.
Click Add Icon, choose the SVG source and review both the source and processed previews before saving. Then define the icon name, optional base price and Minimum height supported by your production process.
The Icons section can use its own pricing profile. This keeps icon pricing separate from the text pricing profile, which is useful when a graphic element has a different production cost from a letter.
Icons are an optional extension of the product. You do not need them to complete the basic Neon Letter configuration.
8. Optional: add additional customer inputs
Open Sign Extras → Additional Input Options when your product requires information or choices that are not covered by the standard Neon controls.
Click Add new option and choose the input type first. ASO provides Yes/No, Image Input, Dropdown, Note and Include Type. The editor then displays the settings required by the selected type.
Give the option a customer-facing label and description, configure its values or behavior, and add a popup image if the choice needs explanation. Where pricing is available, leave it at None for informational inputs or use Base Price/Multiplier when the choice represents a chargeable option.
9. Review the main customizer settings
Before testing the product, open Settings → Generals. These settings control how the Neon configurator behaves on the storefront; they do not define the Neon product itself, so there is no need to change every field.
Review the Measurement Unit, whether measurements are shown, the decimal format, desktop column order, shadow and default glow switches, the day/night button, text alignment controls, option display and whether the price is shown before the Finish button. Save the Customizer when the storefront behavior matches the experience you want.
ASO also provides settings for language and images, information, theme and colors, option ordering, product behavior, output, mobile, request quotes and mode. You can fine-tune those areas after the core Neon product is working.
10. Preview and test the complete Neon product
Use the configuration preview first, then open the connected Shopify product and test the builder as a customer would. Do not stop after confirming that the page loads: exercise the combinations that can change dimensions, price or production feasibility.
Enter both short and long text, change fonts, switch Neon colors, select each size and test Materials, Jackets, Backboards and Mountings. If you enabled Icons or Additional Input Options, test those as well.
Pay particular attention to the relationship between text → calculated dimensions → pricing. Then verify that material/backboard/mounting exclusions behave correctly and that optional price adjustments are reflected when their options are selected.
Check that the default font and color are correct, text remains usable across your supported sizes, calculated dimensions are reasonable, the expected pricing profile is being used, incompatible combinations are hidden, and the customer can continue through your normal storefront purchase flow.
You now have the core structure for a customizable LED Neon product: sizes, dynamic lettering pricing, font measurements, Neon colors, physical sign extras and the storefront behavior needed to test the complete experience.
Next step
Once the Neon product works correctly, continue with Manage Configuration Display to choose where and how customers access the configurator on your Shopify storefront.
Get product news by email
New features, release notes and setup tips — a few emails a year.