Introduction

The Gangsheet Builder is an interactive design solution that allows users to arrange, upload, and customize multiple print-ready images onto a single gang sheet. It helps users configure the sheet size, pricing, and layout settings, upload and arrange images or designs on the canvas, and preview the final gang sheet output in real time.

Admin

Store Configuration

To set up the Product Designer Settings navigate to Store > Configuration > Product Designer Settings.[1]

Gangsheet

To set up the gangsheet, configure the following fields:

 

Artboard Margin: Enter the margin value from the canvas where the object will be placed. The value uses the default gangsheet unit.

 

Object Margin: Enter the distance between two objects. This also uses the default gangsheet unit.

 

Default Gangsheet Unit: Select the unit of measurement for the gangsheet.

 

Maximum Roll Height: Specify the maximum roll height for a single gangsheet. If an object exceeds this height, a new PDF will be generated for the extra content. The allowed range is 1 to 610 cm or 1 to 240 in, depending on the selected unit.

 

Image Size Exceeded Message: Enter the warning message that will appear when the image exceeds the selected gang sheet size.

 

Image Removal Confirmation Message: Enter the warning message that will appear when changing the gang sheet size may remove uploaded images that exceed the new size. Admin can add placeholders: {width}, {height} and {unit}.

 

Design Update – No Size Available Alert: Displayed when a loaded design gangsheet size does not match the current gangsheet size.

 

No Object Space Available Alert: Displayed when there is no available space on the canvas to add new objects.

 

Design Load Confirmation Alert: Displayed when loading a new design will overwrite the current sheet data.

 

Outside Print Area Message: Enter the message that will appear when an object is placed outside the canvas area.

 

Object Overlapping Message: Enter the warning message that will display when objects overlap on the canvas.

 

Add to Cart Consent Message: Provide the message that asks for user consent before adding the customized product to the cart.[1]

Designer Setting for Product

Once the product is added, navigate to the Designer Settings of that product to configure the design settings specific to it.

 

First, enable the Product Designer for the product. Then, select Gangsheet as the Designer Type and the layout is by default selected as a Gangsheet layout.[1]

Gangsheet Configurations

Configure the gangsheet settings based on the selected Pricing method and Tier pricing. First, choose the Pricing Mode by selecting either Is Linear or Is Sheet.

 

Note: By default Is Linear is selected.

 

If Is Linear is selected, the price will be calculated based on the linear height and width of the gangsheet.

 

If Is Sheet is selected, the price will be calculated based on the sheet height and width.[1]

 

Enter the height and width of the sheet. The allowed width range is 1cm to 157.48cm and height depends on configuration max roll height settings.

 

To display the Size in Dropdown on the storefront, enable the Is Used In Sheet toggle for the respective tier pricing. After completing all configurations, click the Save button.

 

Enter the Linear Price and Sheet Price for the gangsheet based on the selected pricing mode.

 

Admin also can set one price as default.

 

Click the Add More button to add additional pricing entries.

Front Store

When a user lands on the Gangsheet Builder from the PDP page, a welcome pop-up appears. In this pop-up, the user can select the Gangsheet Builder type: Auto Build or Build Live.[1]

Auto Builder

GangSheet Size and Pricing

The user can select the gangsheet size from the Size dropdown.[1]

 

If the Price Mode is set to Is Sheet, the sheet-based pricing will be applied based on the selected gang sheet size. The user can view the pricing in the Advance Pricing list.[2]

 

If the Price Mode is set to Is Linear, the pricing will be calculated based on the selected width, while the height will be auto-calculated using the height, width, and quantity of the uploaded images.[3]

 

Example:

 

If the auto-calculated height is 30.91 cm and the selected size is 60 cm x 30 cm, the price will be determined based on the calculated size range.

 

The final price will then be calculated by multiplying the auto-calculated height with the price corresponding to the applicable size range.[4]

 

In liner price mode the Total Calculated Height will be visible in the information section.

 

If the end user change the gangsheet size, a warning pop-up will appear with the following message:

 

“Changing the size will remove one or more uploaded images that exceed 60 cm x 30 cm. Are you sure you want to proceed?”

 

If the user clicks Yes, any image exceeding the 60 cm x 30 cm limit will be removed from the gangsheet and moved to the Album.[5]

 

If the end user selects a smaller gangsheet size and then attempts to upload an image with larger height or width, a warning pop-up will appear with the following message:

 

Image dimensions exceed the selected sheet size. Please select a smaller image.[6]

Upload Image

To upload an image, select the Upload Image field and choose your preferred file. The system accepts only those file formats that have been authorized by the admin in the backend.[1]

 

Uploaded images appear in the Album section and builder.[2]

Image Dimensions, Quantity, and Quality

The end user can adjust the Height, Width, and Quantity by selecting the appropriate options using the available radio buttons.[1]

 

The image quality indicated in DPI is displayed at the bottom of the image. A detailed explanation of the quality levels is provided in the Image Resolution Quality section.[2]

 

The user can view the image in zoom mode by clicking the Magnifier icon, which opens the image preview pop-up. The user can also delete the image using the Delete button. Deleted images will remain available in the Album section.[3]

 

The user can add the product to the cart or click Continue with Live Builder to design the product in the Live Builder. If the user clicks Continue with Live Builder, they will be redirected to the Live Builder with the uploaded images and configurations.[4]

Live Builder

The User can select the Live builder from the welcome pop-up or continue with the live builder from the auto builder.

Settings

In the Settings tab of the Gangsheet Builder, the user can configure multiple settings, as outlined below:

 

Margin with Artboard: This setting defines the object placement within the artboard and determines where the object will be positioned. The user can increase or decrease the value using the radio buttons or by manually entering a value. The user can also disable Margin with Artboard using the toggle.

 

Margin: This setting defines the spacing between two objects. The user can increase or decrease the value as needed. If the margin is disabled, the objects will be placed directly next to each other on the canvas, with no spacing between them.

 

Snap When Moving: This setting allows objects to snap into position while being moved on the canvas.

 

Show Overlapping Lines: The user can disable the overlapping lines if they do not want them to appear.

 

Show Resolution Line: The user can disable the low-resolution line displayed on the object.

 

DPI Resolution[1]

Upload

The User can upload the image to upload image navigate to image tab and click on Upload image the user also can add Clipart work.[1]

Edit

Click Edit Image to open the Operation tab. In this tab, the user can edit the image using multiple available following options:

 

Tools

 

Blend Effect & Blend Mode

 

Opacity

 

Informations

 

Size

 

Auto Duplicate[1]

Blend Effect Blend Mode

To change the image blend, click the Blend Effect button and select the preferred blend color. The user can also apply blend modes using the available options: Tint and Overlay.[1]

 

The end user can also edit the Blend Effect and Blend Mode from the Operation tab.[2]

Information

The User can view the details of the uploaded image, including its position from the left and top, as well as its width and height, in the Information section under the Operation sub-tab.[1]

Size

In the Size section, end users can configure the Image Size and Aspect Ratio.[1]

Auto Duplicate

In the Duplicate section, the end user can duplicate an image by configuring the Quantity and the Margin between the images.

 

The end user can also auto-fill the sheet by clicking the Auto Fill Sheet button. This will fill the sheet using the configured margin settings.[1]

Tools

The user can change the image alignment, crop the image, or delete the image using the available tools.

 

The user can also rotate objects 90 degrees counterclockwise (CCW) or 90 degrees clockwise (CW) by clicking the respective rotation button.[1]

Plain Text

To add text to the sheet, click the Plain Text tab. A text placeholder will be added to the sheet. The User can add text by clicking the placeholder and entering the desired content.

 

From the Operation tab, users can edit the text by changing its color, formatting, stroke, opacity, size and auto-duplicate. The User also can view the information of text information.[1]

My Design

The user can use a saved design to create a Gangsheet. Navigate to the My Design tab and click on the preferred design. The selected design will then be loaded onto the sheet.

 

If the user is not logged in then a Get your Saved Design button will appear in My Design tab. Clicking on Get your Saved Design open log-in pop-up to allow the user to login to access the Saved Design.[1]

Quick Edit

Click on Quick Edit to open Quick Edit. Here the user can use Auto Builder to create their design.[1]

 

The user can upload multiple Images, Clipart and Add Text, configure the Margins, and adjust the image Width, Height, and Quantity. Click the Apply button to save and apply the changes.[2]

Auto Build

End users can automatically arrange the sheet by using the Auto Build option. When Auto Build is clicked, all objects on the sheet are rearranged into optimal positions while maintaining the configured margins.

 

If there are objects across multiple sheets and they can fit onto a single sheet, Auto Build will automatically arrange them together on one sheet.[1]

Add Sheet

The User can add a new sheet, start the design over, or configure the quantity, duplicate settings, and sheet name for existing sheets using the Sheet Slider.[1]

 

The User can navigate between sheets by clicking the respective sheet. The default sheet cannot be deleted; the user can only delete sheets they have added by using the Delete button.

Preview

On the preview page, users can configure the quantity, click Edit to modify the sheet, change the sheet name, and click the Delete button to remove the sheet. Users can also view the complete warning checklist displayed below the sheet.

 

Note: In the Live Builder, the admin can delete only the additional sheets that have been added.[1]