Artwork Component

What is the Artwork Component?

The Artwork Component gives customers a live framing experience on your product page. They pick size, frame, and mat — the preview updates instantly. No redirects, no separate tool.

Best for	Customer experience	You configure
Artists & photographers with pre-made artwork	Live size, frame & mat preview before buying	Options, pricing rules & smart visibility logic

The Artwork Component uses your existing artwork images. Customers cannot upload their own photos here. If you need customer uploads, use the Upload Component instead.

Here is what it looks like on your live store:

Customer-facing product page — size, frame, and mat selectors shown with live artwork preview

Accessing the Component

LIVEARf dashboard — navigate to Components in the left sidebar

Open the LIVEARf app from your Shopify admin
In the left sidebar, click Components
Select an existing Artwork Component or click Create My Own
Open the Basic Configuration tab

You will see two panels side by side — the configuration panel on the left and a live Preview Product on the right that updates as you make changes.

Watch the Preview Product panel as you configure. Every change reflects in real time so you can catch mistakes before saving.

Component Header Settings

Component header — Component Name field, Image Upload toggle, Quick Setup Guide button, and Component Status toggle

Setting	What it does	Shown to customers?
Component Name	Internal label to identify this component	No
Image Upload	Enables customer image upload. Keep OFF for Artwork Components — artwork is pre-defined	No
Component Status	ON = active and linkable to products. OFF = paused without deleting	No

Always click Save after making changes. Navigating away without saving will lose all unsaved work.

Options Panel

Shopify Options
Custom Options

The first three options are automatically inherited from your Shopify product variants — for example, Size.

Use the eye icon to show or hide each option on the storefront
Hidden options do not appear in the Preview Product panel
These cannot be deleted — they come directly from your Shopify product

If your Shopify product has no variants, these slots appear empty. Set up product variants in Shopify first.

LIVEARf creates three custom options by default:

Option	Purpose
Frames	Frame style selection shown as visual swatches
Mat Size	Spacing between the artwork and the frame
Mat Colour	Colour of the mat border

Each can be edited, duplicated, or deleted using the icons on the right of each row.

Configuring an Option

Click any option name in the list on the left to open its settings. Every option follows the same five steps.

Step 1 — Name and Label

Option Name field (red, internal) and Option Label field (green, customer-facing)

Field	Purpose	Shown to customers?
Option Name	Internal reference used in rules and config	No
Option Label	Text customers see above the option	Yes
Hide toggle	Hides the option from the storefront entirely	—

Step 2 — Option Type

Option Type dropdown — showing Swatch, Rectangle, Radio Button, Number, Colour, Dropdown

Type	Best used for
Swatch	Frame images or mat colour thumbnails
Rectangle	Size options shown as pill buttons
Radio Button	Single-choice text selections
Dropdown	Long lists of choices
Number	Custom numeric input (width, height)
Colour	Colour picker for mat colours

Step 3 — Section

The Section tells LIVEVUE what this option represents and controls how it renders visually.

Section dropdown — showing Frame, Mat, Canvas, Acrylic, Metal, Wood, Pricing, Additional, None

Section	Purpose
Frame	Frame border visualisation and styles
Mat	Mat appearance around the artwork
Canvas	Canvas wrap rendering styles
Acrylic	Acrylic mounting styles
Metal	Metal print styles
Wood	Wood-based finish styles
Custom Size	Custom width and height inputs
Custom Mat Size	Custom mat spacing input
Pricing	Adds a pricing adjustment
Additional	Optional add-ons
None	No special visual behaviour

Section set to Frame — frame border wraps around artwork in the preview

Section set to Mat — mat spacing applied around artwork in the preview

Step 4 — Actions

Some sections unlock an Action dropdown that defines how each value renders visually.

Action dropdown — showing Standard Frame, Infinity Frame, Floater Frame for the Frame section

Section	Available Actions
Frame	Standard Frame, Infinity Frame, Floater Frame
Canvas	Classic Wrap, Mirror, Colour, Blur
Acrylic	Spacers, Mount, Sandwich
Metal	Print, Float Mount
Wood	Wooden Pallet, Box Board
Pricing	Discount, Margin, Markup

Sections like Mat do not support Actions — the dropdown is greyed out automatically.

Step 5 — Option Values

Option values are the individual choices customers see — for example Gold, White, Wood, Black for Frames. For each value you can:

Set a Label (text customers see)
Upload a Main image (used in the live visualisation) and a Thumbnail (shown in the selector)
Set one value as the Default
Assign a Price
Duplicate or Delete the value

Mat, Pricing & Advanced Configuration

Mat Size & Colour
Pricing
Advanced Config — Rules

Mat Size

Controls the spacing between the artwork edge and the frame. Supports single mat and double mat configurations.

Mat Size action dropdown — First Mat Size, First Mat Style, First Mat Colour, Second Mat Size, Second Mat Style, Second Mat Colour

Sub-setting	Purpose
First Mat Size	Width of the primary mat border
First Mat Style	Visual style of the primary mat
First Mat Colour	Colour of the primary mat
Second Mat Size	Width of the secondary mat border
Second Mat Style	Visual style of the secondary mat
Second Mat Colour	Colour of the secondary mat

For a single mat, configure First Mat only and set Second Mat values to zero — or hide them with a Conditional Rule.

Click the edit icon on any value to configure its price.

Mat Colour

Controls the visual colour of the mat in the live preview.

Uses the same six mat action sub-settings as Mat Size
Supports all pricing methods
Use the image icon on each value to upload a colour swatch
Changes reflect immediately in the Preview Product panel

Pricing Methods

Every option value can have a price attached. LIVEVUE supports eight methods across two categories.

Price Type dropdown highlighted — option values with prices configured

Standard Pricing dropdown — Fixed Price, Surface Area, Perimeter, Linear Unit

Standard Pricing — calculates automatically based on actual artwork dimensions:

Method	How it calculates	Best for
Fixed Price	Flat amount per selection	Frame styles, mat colours
Surface Area	Price × width × height	Canvas, metal, acrylic prints
Perimeter	Price × total edge length	Frame moulding per linear inch
Linear Unit	Price per unit of one dimension	Mat border width

Predefined Pricing — you manually set a price for each size variant:

Method	How it calculates	Best for
Fixed Price (Predefined)	Different flat price per size	Irregular pricing per size
Surface Area (Predefined)	Surface area per size	Custom price per size
Perimeter (Predefined)	Perimeter per size	Size-dependent frame pricing
Linear Unit (Predefined)	Linear unit per size	Size-dependent mat pricing

Use Standard when your pricing follows a formula. Use Predefined when each size has its own specific price that doesn’t follow a pattern.

All pricing methods support two optional customer-facing fields:

Field	Where it appears	Purpose
Tooltip	On hover over the option label	Short note, e.g. “Price varies by size”
Description	Below the option on the product page	Longer explanation of what is included

What are Conditional Rules?

Conditional Rules automatically show, hide, or disable options based on what a customer has already selected. They keep your product page clean and prevent invalid combinations.

Conditional Rules panel — WHEN / IS / THEN rule builder in the Advanced Configuration tab

How to access

Click the Advanced Configuration tab
Expand Conditional Rules
Click Add New Rule

Rule structure

WHEN  [Option]  [Condition]  [Value]
THEN  [Action]  [Target Option]  [Target Values]

Part	What you set	Options
WHEN Option	Which option triggers the rule	Frames, Mat Size, Mat Colour, any custom option
Condition	How to evaluate it	Equals to, Not equals to, Greater than, Less than
Value	What value triggers it	Any, or specific values
THEN Action	What happens	Show, Hide, StrikeOut
Target	Which option is affected	Any option in the component
Target Values	Which values are affected	All, or specific values

The 3 actions

Action	What it does	When to use
Show	Makes a hidden option or value visible	Reveal options only when relevant
Hide	Removes an option or value from the page entirely	Remove irrelevant combinations
StrikeOut	Keeps value visible but crossed out and unselectable	Show it exists but is unavailable

To use Show rules effectively: first hide the option using the Hide toggle in Basic Configuration, then use a Show rule to reveal it only when needed.

Examples

Example 1 — Hide Mat Colour when Black frame is selected

Scenario: Your Black frame looks best without a mat. Showing Mat Colour when Black is selected causes confusion.Rule:

WHEN  Frames  equals  Black
THEN  Hide  Mat Colour  (all values)

Result: The Mat Colour selector disappears as soon as a customer selects Black. It reappears if they switch to another frame.

Example 2 — StrikeOut unavailable frames for large sizes

Scenario: Your Floater Frame is only available up to 20×20. For larger sizes, you want to show it exists but prevent selection.Rule:

WHEN  Size  greater than  20×20
THEN  StrikeOut  Frames  (Floater Frame only)

Result: On sizes 30×30 and above, the Floater Frame swatch shows with a strikethrough. Customers understand it is unavailable without needing to contact support.

Example 3 — Show only matching frames for 2 inch mat

Scenario: Gold and White frames are the only ones that look right with a 2 inch mat. You want to hide all others when that mat size is chosen.Rule:

WHEN  Mat Size  equals  2 inch
THEN  Show  Frames  (Gold, White only)

Result: Selecting 2 inch mat shows only Gold and White frames. All others are hidden, simplifying the decision and avoiding mismatched orders.

Example 4 — Hide Second Mat options when No Mat is selected

Scenario: When a customer selects No Mat, Second Mat Size and Mat Colour are irrelevant and clutter the page.Rule 1:

WHEN  Mat Size  equals  No Mat
THEN  Hide  Mat Colour  (all values)

Rule 2:

WHEN  Mat Size  equals  No Mat
THEN  Hide  Second Mat Size  (all values)

Result: Selecting No Mat removes all mat-related options instantly, giving customers a much cleaner page.

Example 5 — Show canvas wrap options only when Canvas is selected

Scenario: Wrap Style options only apply to canvas prints. Showing them on framed products creates confusion.Rule:

WHEN  Frames  equals  Canvas
THEN  Show  Wrap Style  (all values)

Result: Wrap Style only appears when the customer selects Canvas, keeping all framed product pages clean.

Managing rules

Rules run top to bottom. If two rules conflict, the lower one wins. Drag to reorder.

Task	How
Reorder	Drag the rule row up or down
Duplicate	Click the duplicate icon to copy a rule
Delete	Click the delete icon
Multiple conditions	Use the Operator field (AND / OR)
Apply changes	Click Sync after every edit
Test	Use the Preview Product panel before saving

Always test rules in the Preview Product panel first. Rules only go live once the component is saved and linked to a product.

Preview & Saving

Preview Product panel — live size, frame, and mat selection updating in real time

Before clicking Save, check:

Option types display correctly — swatches, rectangles, dropdowns all render as expected
Prices calculate correctly for each combination
Conditional rules trigger — options show, hide, and strikeout correctly
The live artwork preview updates with each selection
Default values are set for each option

Click Save in the top-right corner when everything looks correct.

Saved successfully? Your component is ready to link to products.

Linking to Products

Enable the component

Turn Component Status ON and save. The Link button only appears after the component is enabled.

Open the Link panel

Click Link in the top-right corner of the configuration screen.

Choose how to apply it

Option	What it does
Selected Collections	All products in chosen Shopify collections
Selected Products	Only individually chosen products
All Products (LIVEVUE Template Enabled)	Every product already using a LIVEVUE template

Click Link to confirm.

Verify

Go to LIVEARf → Components. Your component shows the number of linked products with a status of Active.

What is the Artwork Component?

Accessing the Component

Component Header Settings

Options Panel

Configuring an Option

Step 1 — Name and Label

Step 2 — Option Type

Step 3 — Section

Step 4 — Actions

Step 5 — Option Values

Mat, Pricing & Advanced Configuration

Mat Size

Mat Colour

Pricing Methods

Tooltip and Description

What are Conditional Rules?

How to access

Rule structure

The 3 actions

Examples

Managing rules

Preview & Saving

Linking to Products

What’s Next?

Upload Component

Frame Generator

​What is the Artwork Component?

​Accessing the Component

​Component Header Settings

​Options Panel

​Configuring an Option

​Step 1 — Name and Label

​Step 2 — Option Type

​Step 3 — Section

​Step 4 — Actions

​Step 5 — Option Values

​Mat, Pricing & Advanced Configuration

​Mat Size

​Mat Colour

​Pricing Methods

​Tooltip and Description

​What are Conditional Rules?

​How to access

​Rule structure

​The 3 actions

​Examples

​Managing rules

​Preview & Saving

​Linking to Products

​What’s Next?

Upload Component

Frame Generator

What is the Artwork Component?

Accessing the Component

Component Header Settings

Options Panel

Configuring an Option

Step 1 — Name and Label

Step 2 — Option Type

Step 3 — Section

Step 4 — Actions

Step 5 — Option Values

Mat, Pricing & Advanced Configuration

Mat Size

Mat Colour

Pricing Methods

Tooltip and Description

What are Conditional Rules?

How to access

Rule structure

The 3 actions

Examples

Managing rules

Preview & Saving

Linking to Products

What’s Next?