Common Template Issues in NINEMAGS and How to Fix Them

This guide covers the most common issues that may occur when working with NINEMAGS templates, along with clear steps on how to resolve them.

Issue 1. Template is created, but the Upload Pictures button is missing

Possible reasons

• The NINEMAGS app block was not added to the Shopify product template
• The Shopify product template was not assigned to the product in NINEMAGS

How to fix

Step 1. Check the Shopify product template

1. Go to Online Store → Themes → Customize
2. Open the required product template

3. In the Product information section, make sure the block

   Apps → NINEMAGS button is added

Step 2. Check product assignment in NINEMAGS

1. Open Shopify Admin → Apps → NINEMAGS
2. Go to Products
3. Select the product using Select Product
4. Make sure the correct Product Template is selected
5. The value must not be Default product  

Issue 2. Images are uploaded, but they are not visible in the cart

Possible reasons

• Cart Preview or Drawer Preview is disabled
• Incorrect CSS Path for the product image
• The cart type (page or drawer) does not match the selected preview type

How to fix

Step 1. Check cart type in your theme

• If your cart opens as a separate page → enable Cart Preview
• If your cart opens as a side drawer → enable Drawer Preview

Step 2. Set the correct CSS Path for the cart image

1. Open the cart on your storefront
2. Right-click the product image → Inspect
3. Copy the CSS class of the image container

4. Paste it into the field

   CSS Path to the cart image of product

Example CSS paths (theme-dependent):

• Cart page:

  .cart-item__image-container  

• Cart drawer:

  .cart-item__media  

Result

After correct setup:

• Uploaded image previews appear in the cart
• Customers can see which files they uploaded
• Custom products display correctly in the cart

Issue 3. The Edit button is missing in the cart

Possible reasons

• The Enable cart edit button option is disabled
• Incorrect CSS Path for the Edit button
• The button is inserted into the wrong cart container

How to fix

Step 1. Enable the Edit button

1. Go to Theme settings → App embeds
2. Make sure Enable cart edit button is turned on

Step 2. Set the correct CSS Path for the Edit button

1. Open the cart on the storefront
2. Find where the Edit button should appear
3. Right-click → Inspect
4. Copy the container’s CSS class

5. Paste it into

   Edit button location (CSS Path)

Example:

.cart-item div.product-option

Common mistakes

• ❌ CSS path is too generic

  → Button appears in the wrong place or not at all

• ❌ CSS path points to a non-existent element

  → Button does not appear

Result

After correct setup:

• The Edit button appears in the cart
• Customers can modify uploaded images
• The product does not need to be removed and re-added

Issue 4. A new product variant was added and NINEMAGS works incorrectly

Possible reasons

• The new variant was not selected in NINEMAGS
• The template was configured before the variant was added

How to fix

Step 1. Check variants in NINEMAGS

1. Go to Shopify Admin → Apps → NINEMAGS
2. Open Products
3. Select the required product
4. Make sure the new variant is checked and saved

Step 2. Review template logic

If the new variant has:

• a different size
• a different number of images
• a different production logic

You may need a separate template or adjusted settings.

Typical error scenario

1. A new variant is added in Shopify
2. NINEMAGS settings are not updated

As a result:

• uploads work incorrectly
• print files are generated wrong
• product logic does not match production

Result

After proper configuration:

• All variants work correctly
• Customization logic matches the product
• Orders are processed without errors