​

Types of Customizable Products

In MockSpark, there are two main types of products: Third-Party Fulfilled Products and Seller-Fulfilled Products. Importing a Third-Party Fulfilled Product into MockSpark is simple and straightforward. The fulfillment provider supplies all the necessary product information, so all you need to do is create your mockups. Once they’re ready, you can start selling the customizable product in your store right away. If you want to sell a unique customizable product that you produce yourself, or if you’re using a print-on-demand and dropshipping platform that isn’t currently supported by our list of third-party fulfillment providers, you can manually create a Seller-Fulfilled Product.

​

Create a Seller-Fulfilled Product

In this tutorial, we’ll walk you through the step-by-step process of creating a POLO SHIRT that comes in six colors (White, Grey, Black, Red, Stone, and Navy) and three sizes (S, M, and L). Using this product as an example, you’ll learn helpful tips and best practices for creating Seller-Fulfilled Products.

​

Step 1: Edit Basic Details

1. Go to the Products section from the top navigation bar.
2. Click the Create Seller-Fulfilled Product button.

​

Basic Information

1. Please enter your product title.
2. Please enter a detailed description of your product in the rich text editor.

Click New Image to upload a picture for your product. Choose how you’d like to upload your product image. Upload a front view of a White polo shirt, then click Using this image.

​

Brand

Enter the vendor name for this product.

​

Print-Areas

Select Add Print-Area. Name this Print-Area Front Side. A Diagram is a sample image shown in the Print-Areas panel of the Product Personalizer. It’s designed to help customers easily identify and differentiate between various Print-Areas on a product. Uploading a Diagram is optional. If you don’t provide one, the system will automatically generate a default image based on the size of each Print-Area. Upload an image to use as the Diagram for this Print-Area. A Mask is an optional overlay image that appears above the Print-Area canvas in the Product Personalizer. It serves as a visual guide to help customers better understand the boundaries of the designable area when creating their designs. While useful, uploading a Mask is not required and won’t impact the core design functionality of the Product Personalizer. Upload an image to use as the Mask for this Print-Area. MockSpark automatically transforms the designs your customers create in the Product Personalizer into print-ready image files optimized for factory production. These files are referred to as Placeholders within the MockSpark platform. Setting the output format for a Print Area determines the file format of the Placeholder. Currently, MockSpark supports five formats, including：

• PNG
• TIFF
• TIFF_CMYK
• JPEG
• JPEG_CMYK

In this tutorial, we’ll set the Print Area’s output format to TIFF_CMYK. A single Print-Area can have multiple values assigned to it, typically to represent different print sizes. For example, if your polo shirt is available in three sizes (S, M, and L), you can provide the appropriate print dimensions for each one based on their actual measurements, like this:

Width (px)	Height (px)	DPI
3623	4276	300
3713	4382	300
3893	4595	300

What Is DPI and How It Helps You Determine Print Size

1. Click Add another value to create 3 value rows.
2. For each value row, enter the appropriate settings for Width, Height, and DPI.
3. Click OK to complete the creation of this Print-Area.

We’ve just created our first Print-Area, named Front side. Next, we’ll set up another Print-Area for the back of the product. Select Add Print Area. Following the same steps as the previous Print-Area, let’s create a new one for the back of the polo shirt and name it Back Side. Select the appropriate images to use as the Diagram and Mask for this Print-Area. Enter the values for this Print-Area based on the list below.

Width (px)	Height (px)	DPI
3650	4432	300
3737	4538	300
3913	4751	300

1. Create a Print-Area named Back side.
2. Click OK to complete the creation of this Print-Area.

Once you’ve created these Print-Areas, you can still edit, delete, or reorder them as needed.

​

Variant Options

Now that we’ve finished setting up the Print-Areas for this product, let’s move on to creating its Variant options. Each product can have up to three variant options. Combinations of these options define all the possible variations of the product. In this tutorial, we will create two options for variants: one for Color and one for Size. Click Add Another Option Name this variant option Color.

1. Click Add another value to create 6 value rows.
2. Enter a different color for each value row: White, Grey, Black, Red, Stone, and Navy.
3. Click OK to complete the creation of this variant option.

After setting up the Color variant option, let’s move on to creating the Size variant option. Click Add Another Option

1. Create a variant option named Size, and add 3 value rows to it: S, M, and L.
2. Click OK to complete the creation of this variant option.

Once you’ve created these variant option, you can still edit, delete, or reorder them as needed.

​

Variants

Once you’ve created the two variant options, such as Color and Size, the system will automatically generate a variant table that combines these options for your product. In the Variants table, you can view all the different versions of your product.

1. In the Variants table, we’ve selected all product variants in size S.
2. Click on Bulk Edit.

Select Bulk Edit Print Areas for Variants.

1. For the Print Area (Front side) field, select 3623 × 4276 px.
2. For the Print Area (Back side) field, select 3650 × 4432 px.
3. Click Apply to Selected Variants.

In the table, you’ll see that the Print Area values for the size S variant have been applied in bulk. In the same way:

1. In the Variants table, check all the variants that are size M.
2. Click Bulk Edit and select Bulk Edit Print Areas for Variants.

1. For the Print Area (Front side) field, select 3713 * 4382 px.
2. For the Print Area (Back side) field, select 3737 * 4538 px.
3. Click Apply to Selected Variants.

In the same way:

1. In the Variants table, check all the variants that are size L.
2. Click Bulk Edit and select Bulk Edit Print Areas for Variants.

1. For the Print Area (Front side) field, select 3893 * 4595 px.
2. For the Print Area (Back side) field, select 3913 * 4751 px.
3. Click Apply to Selected Variants.

At this point, all data in the Print Areas column of the Variants table has been fully set up.

1. In the Variants table, select all variants with the color set to White.
2. Click Bulk Edit.

select Bulk Set Image for Variants. Choose a method to upload images for the White variants. Since these variants are White, we’ll use an image that shows the front view of the product in White. Once the upload is complete, click Using this image. In the Variants table, you can see that the images for all variants with the color White have been successfully set. Using the same process, upload images for the remaining variants in Grey, Black, Red, Stone, and Navy. In addition to bulk editing multiple variants, you can also edit individual variants directly within the table.

1. For example, you can update information like the SKU or Fulfillment SKU for a specific variant
2. Click OK to save your changes.

Click Next to save all changes made to the product’s basic information in Step 1. If you don’t, any edits made on this page will not be saved.

​

Step 2: Create Mockups

On the Step 2 screen, you’ll see a Mockup Group that includes all product variants. This is a system-generated group named default.

​

New Mockup: Front Side

Click New Mockup to open the Mockup Creator and build a mockup for your product.

​

Product Image

To create a mockup, begin by clicking the button shown in the image below to upload a product photo. Select or upload a front-facing image of the White product to create your first Mockup. Click the Using this image button. You can zoom in or out of the workspace by using the slider in the bottom bar of the Mockup Creator or by scrolling with your mouse wheel.

​

Print-Areas

Click on the Print Areas section in the right-hand panel. Click the Add Print-Area.

1. Select the appropriate front-facing Print Area based on its name, and make note of its aspect ratio.
   In Step 1, we created two Print-Areas: Front side and Back side. Here, we’ll be using the Front side.
2. Click OK to add this Print Area to your mockup

Drag each of the 4 corners of the Print Area to the appropriate position on the product image. In the Print Areas section of the right-hand panel, change Mesh Warp from 2D to 3D. In 3D Mesh Warp mode, the Print Area’s 4 corner points will be replaced with a 4x4 grid, giving you 16 adjustable control points. Using the Print Area’s aspect ratio as a guide, adjust the control points to reshape the Print Area. This helps create a more realistic and natural-looking product mockup. If your product is White, we recommend changing the Blending Mode from Normal to Multiply in the Print Areas section on the right-hand panel. This will help enhance the mockup’s visual appearance for a more realistic effect.

​

Overlay

Click on the Overlay section in the right-hand panel. Click Add Image The Overlay image in a mockup is an image layered over the product photo. It is typically used in the following scenarios:

1. If your mockup shows a person holding a mug and part of the mug’s Print Area is covered by the hand, you can upload an Overlay image to create that realistic overlapping effect.
2. If your mockup features a canvas tote bag with natural shadows or texture details, you can use an Overlay image to recreate those lighting or fabric effects as a filter.

In this tutorial, since we’re creating a mockup for a polo shirt, we’ll upload an Overlay image that includes the shirt’s collar and sleeves. Click Using this image. Once the Overlay image has been added, you’ll see it appear above the Print-Areas in the mockup.

​

Brush

Click on the Brush section in the right-hand panel. In the Brush panel:

1. Set the Brush Type to Erase
2. Adjust the Brush Size as needed
3. Move your mouse over to the canvas on the left and use the brush to erase any parts of the print area that you don’t want shown in the mockup.
   The brush tool is limited to the Print-Area.

While creating your mockup, you can use the Undo and Redo options in the top toolbar of the Mockup Creator to easily reverse or repeat any actions. To zoom in or out of the workspace for more precise editing, use the slider in the bottom toolbar or scroll with your mouse wheel. With these tools and adjustments, you’ll be able to create a polished mockup that perfectly showcases the front of your product. Click the Preview button to open the Personalizer and preview the current mockup. Test your product in the Product Personalizer:

1. In the Print Areas panel on the right, select the print area labeled Front side to start designing.
2. Use the Elements panel on the left to add a design element (such as an image or text) to the canvas.
3. Adjust your design on the canvas and review the product preview in the bottom-left corner to see if it looks the way you want.
4. Click Back to return to the Mockup Creator.

If you’re happy with how your mockup looks, click the Save button to save your mockup.

​

New Mockup: Back Side

We’ve already created a Print Area for the front of the product, now let’s set one up for the back. Select or upload a back-facing image of the product. Click the Using this image button. Click on the Print Areas section in the right-hand panel. Click the Add Print-Area.

1. Select the appropriate back-facing Print Area based on its name, and make note of its aspect ratio.
   In Step 1, we created two Print-Areas: Front side and Back side. Here, we’ll be using the Back side.
2. Click OK to add this Print Area to your mockup

Using the same steps as before, create a mockup that showcases the back of the product. Click on the Overlay section in the right-hand panel. Click Add Image In this tutorial, we’re creating a model for a polo shirt. We’ll upload an Overlay image that includes the shirt’s collar and sleeves, and is also suitable for the back of the product. Click Using this image. Click on the Brush section in the right-hand panel. In the Brush panel:

1. Set the Brush Type to Erase
2. Adjust the Brush Size as needed
3. Move your mouse over to the canvas on the left and use the brush to erase any parts of the print area that you don’t want shown in the mockup.
   The brush tool is limited to the Print-Area.

Click the Preview button to open the Personalizer and preview the current mockup. Test your product in the Personalizer. If you’re happy with how your mockup looks, click the Save button to save your mockup.

​

New Mockup Group

So far, we’ve created two mockups within the default Mockup Group: one showing the front of the product in white, and another showing the back. However, our product comes in more than just White. Next, we’ll create separate Mockup Groups for each available color variant. Select New Mockup Group to create a group for organizing the mockups of the Grey color variant. In the form dialog titled Create Mockup Group, follow these steps:

1. In the Mockup Group Title field, enter Grey as the group name.
2. Under Matching Variants field, select all variants that are in the Grey color.
3. Click the > button in the center of the dialog to move the selected variants from the Source Box to the Target Box. This assigns them to the new Grey Mockup Group.
4. Click OK to save your changes.

After successfully saving, you’ll see the new Mockup Group appear in the interface, containing all variants in the Grey color. While you can click New Mockup to create a new mockup from scratch for the Grey Mockup Group, there’s a faster way. Since we’ve already created a front-facing mockup for the White product earlier, you can simply reuse that one to save time. Click Duplicate on the front mockup of the White product within the default Mockup Group.

1. In the dialog that appears, select Grey as the target Mockup Group.
2. Click OK to complete the duplication.

You’ll see in the interface that the Grey Mockup Group now includes a duplicate front mockup displaying the White product. Click the Edit button on the duplicated mockup. We’ll update it to display the front view of the Grey product instead of the White one. In the right-hand panel of the Mockup Creator, select Product Image and click Edit. Click Select another image. Replace the original front image of the White product with the front image of the Grey product. Click Using this image. In the right-hand panel of the Mockup Creator, select Print Areas. Since the product is now Grey and not part of the light color range, using the Multiply blend mode is not appropriate in this case.

1. Change the Blending Mode from Multiply back to Normal.
2. Click the Preview button to open the Product Personalizer and preview the current mockup.

Once you’ve confirmed that the preview in the Product Personalizer has been updated to show the Grey product, click Back to return to the Mockup Creator. If you’re happy with how your mockup looks, click the Save button to save your mockup. After finishing the front mockup for the Grey product, use the same method to create a back mockup. Click Duplicate on the back mockup of the White product within the default Mockup Group. Click the Edit button on the duplicated mockup. We’ll update it to display the back view of the Grey product instead of the White one. Also, change the Blending Mode from Multiply back to Normal, then click the Save button to save your mockup. At this point, we’ve successfully created a Mockup Group for all Grey variants that includes both front and back product mockups. Using the same approach, you can create a Mockup Group that includes all Black variants. Using the same approach, you can create a Mockup Group that includes all Red variants. Using the same approach, you can create a Mockup Group that includes all Stone variants. Using the same approach, you can create a Mockup Group that includes all Navy variants. In the end, only the White variants remain under the Matching Variants section of the Mockup Group named default. Aside from the default Mockup Group, you can modify the variants included in any other Mockup Group or delete the group entirely. Click Next to save all the mockups you created in Step 2. Otherwise, any changes made on this page will not be saved.

​

Step 3: Publish Your Product

​

URL / Currency / Weight

You can edit settings such as the product URL handle, Store currency, and Weight unit:

1. URL Handle: A unique, user-friendly text based on your product title. It’s used to create the product’s web address in your online store.
   Shopify automatically formats your URL handle into a clean, SEO-friendly string containing only letters, hyphens (-), and numbers, but no spaces or special characters.
2. Store currency: It’s pulled directly from your Shopify store settings. To change the currency, simply update it in your Shopify Admin panel. For more details, visit: Shopify Help Center | Changing your store currency
3. Weight unit: The unit of weight used for this product.

​

Variants

1. In the Variants table, check the boxes next to the variants you want to work with.
2. Click on Bulk edit, then choose from the available options to update properties like Price, Weight, and Availability for the selected variants.

After completing the bulk actions, you’ll see the updated values reflected in the Variants table. In addition to bulk editing multiple variants, you can also edit individual variants directly within the table.

1. On the right side of the row for the variant you want to edit, click Edit.
2. Update the information for that variant as needed.
3. Click OK to save your changes.

You’ll see that the variant has been updated in the Variants table. After confirming that all product information in Step 3 meet your requirements, click Done & Publish to list the product on your Shopify store. Click the Check on Shopify to view the published product in your Shopify store.

​

Preview Your Product in the Store

Click the Customize button on the product page of your Shopify store. If everything is working properly, you should see the Product Personalizer interface as shown below.