This article guides you through setting up the LIVEVUE component with options like Frames, Mat Color, and Mat Size. It also explains how to integrate LIVEVUE with Shopify products to showcase visual displays on product pages.
LIVEVUE option:
Select the component under LIVEVUE in the left side navigation panel.We have to create a LIVEVUE component. Here the component includes all the features that have to be added to the product. So the configuration starts here.
There are 2 types of components and their related options are explained below.
- Custom Framing – This is used to frame an artwork product
Related Options – Options include frame, mat-style, mat-size, printing-paper, glass
- Canvas Prints – Used for framing canvas art work
Related Options – Options include wrap, frame
STEP 1:
Select the component of your choice from the dropdown like, Custom Framing, Canvas Prints. Enter a name for the component with a description. To add a custom framing component in LIVEArf, go to Apps > LIVEArf – LIVEly Art Framing > LIVEVUE > Component, select Custom Framing as the type, enter a Name and Description, and click select selection to configure options.
STEP 2:
To configure an option in LIVEArf, go to Apps > LIVEArf – LIVEly Art Framing > LIVEVUE > Component, select the Section, set an Option Display Name, check My Store Configuration if needed, choose an Option Type and Option Values, then select relevant Collections.Choose the option of your choice from the “Select Section” dropdown. Enter the desired Option name that has to be displayed for the buyer in your website.We have two choices for creating the options.
- My Store Configuration – This includes choosing the option type (Swatch, rectangle, dropdown, radiobutton) of your choice. The option values can be selected from the collection.
Note – If you are new to creating collections, please select LIVEARf Configuration to see the virtual framing.
- LIVEARf Configuration – Selecting this choice will automatically create a collection at the backend with some predefined products as shown in the image below. Turning on this checkbox helps to auto create the collections for evaluating the LIVEARf features.
You can edit or delete any of the option types.
STEP 3:
Save the selected options.
Select Component Link under LIVEVUE in the left side navigation panel.
STEP 4:
We have to link the newly created LIVEVUE component with an existing Collection. To configure a Component link, go to LIVE VUE > Component link, choose your collection products from the dropdown in select collection, and save.
STEP 5 :
The selected frames are displayed in the product preview, allowing users to view their chosen options in real time.
STEP 6 :
Return to the component pages and click the Add Option button to include more options.
STEP 7:
Select the mat size in the Section, set an Option Display Name, check “My Store Configuration” if needed, choose Option Type as a rectangle, enter the mat size as Option Values in normal text, and click “Add item” for more options then save.
STEP 8:
Configure the mat style by clicking “Add Option”, enter a Display name and choose “My Store Configuration”. Choose option type as “Swatch”, select the collection that has “Mat colors” and save
You can see the mat style section is added in the admin page
The mat style section is added in the product page in the right hand side as options
STEP 9 :
The final preview of the product displays the selected Frame Style, Mat size, and Mat color as below
NOTE :
- If you don’t have a collection of frames and mats, selecting the “LIVEARf Configuration” option will automatically create a collection of the selected items, such as frames and mats etc..
- Verify that the online store checkboxes are selected in the collection-level publishing > manage settings to test the working.
Frame Generator:
STEP 1:
To configure an option in LIVEArf, navigate to Apps > LIVEArf – LIVEly Art Framing > LIVEVUE > Frame generator, and select the choose file option.
STEP 2 :
Upload the file, adjust the strip size, and click the generate button.
STEP 3 :
Frames are displayed in full size, both small and large based on thickness, with small icons in the user interface. Select any of the first three, followed by clicking the Upload to Shopify button.
STEP 4:
Then the uploaded files are displayed in the content > files section.
STEP 5 :
To use uploaded frames, click select existing to create a frame product and then utilize a collection.
STEP 6 :
Click the browse button to find and add the updated frame product.
STEP 7 :
Finally, the created frame will be displayed in the products.
Create LIVEARf Theme Template
STEP 1 :
Select “Themes” under “Online Store” from the left side navigation bar and click “customize” button
STEP 2 :
Click ‘Home Page’ dropdown at the top and click “Products” and click “Create Template”
STEP 3 :
Enter a name for the livevue_template and click the create template button. A new template with basic sections will be created.
STEP 4 :
Hover over “Product Information” in the left hand navigation panel and click on the eye icon to hide it.
STEP 5 :
Select Add section below the “related products” in the left hand navigation panel. Click Apps and select “LIVEARf-LIVEVUE-SPA”
STEP 6 :
“LIVEARf-LIVEVUE-TEMP” will be added to the section. Select it and turn the toggle on for all the options and select the measurement in dropdown option.
You can see all the icons and features enabled below the product.
STEP 7 :
In the left hand panel, drag the “Apps with LIVEARf-LIVEVUE-SPA” above the ‘Related Products’ and save the template.
Create a Product and link it with the collection and new theme template:
STEP 1 :
Create a Product, upload the image and add the size variants available for the product.
STEP 2 :
Enter the price and inventory for each variant size.
STEP 3 :
In the right hand panel, connect the product to the Collection that was linked to the LIVEVUE component that you created under LIVEVUE option.
STEP 4 :
Select the newly created LIVEARf theme template as theme template.
STEP 5 :
Save it and click the “Preview” button. Now you can see all the variants, options and the dynamic virtual framing in the product page.
Pricing configuration and calculation:
STEP 1:
At the product level, prices are entered in the pricing options. Below that, in the product metafields, we can choose the pricing calculation type, with three options available: surface area, perimeter, and fixed price. If we select a fixed price, the configured pricing options will be directly displayed on the product when the specific element is clicked.
STEP 2:
Select a frame, for eg: set the pricing option $4, and the pricing calculation type to a fixed price and save.
STEP 3 :
Then selected the black frame from the collection and set the price to $10, and chose the price calculation type as perimeter.
The calculation of perimeter is
Size = (width + height) / 100
Perimeter = (2 * Size) * original price(entered price of product)
Width and height of the product is 20×30, and the price is $200.
Size = (20 + 30) / 100
Perimeter = (2 *0.5) *10 , the perimeter of frame price is 10, totally $210 is displayed above the image.
STEP 4 :
Select another frame from the collection and set the price to $24, and choose the price calculation type as surface area.
The calculation of Surface area is
Surface Area = ((width * height)/10000 ) * price of the frame
Width and height of the product is 20×30, and the price is $200.
Surface Area = ((20 *30)/10000 ) * price of the frame
Surface area = 0.06*24 , the Surface area of frame price is $1.44, totally $201.44 is displayed above the image.
NOTE : Follow the same steps to configure the mat, paper and glass.