guide

NINEMAGS uses a product template that you can assign to specific products.

2. Select the product you want to enable NINEMAGS for.
3. In the right-hand column, find the Theme template field and choose ninemags.

4. Click Save.
5. Open your store and view the product page — the photo upload interface will now appear for your customers.

‍We recommend testing File Uploader at least in one browser on Desktop and mobile.

☝️ What to look for: how image Uploader is positioned on the page, text is not cut off, images can be uploaded, viewed and added to the shopping cart. Place a test order using uploaded pictures and your information: proceed to checkout, enter shipping and billing infomraiton and hit Place Order.

💡 Tip: we added test promo codes to your store that you can use to place a free order. Codes are NINEMAGS and NINEMAGSSHIP. If you use both, you will get $0 order and will not need to pay for the order.

Shopify Admin: When you placed the test order, navigate to Shopify Admin and find your order. Order information should have the following attributes under the product name:
__image_group
__image_group_id
__image_previews

What you should see under the product information in Shopify:

File Management

1. The NINEMAGS app automatically pulls order data from your store every 5–10 minutes and checks for new, not yet archived orders.
2. Ready print sheets and ZIP files are neatly organized in your personal workspace.
3. You can easily access or download your files anytime.
4. All files are securely stored and kept available for your local backup if needed.

1.Button Style Settings Instructions

1. Go to Online Store > Themes.

2. Click Customize on your published theme.

3. Go to the 'Template' section and select 'NINEMAGS button'.

1. First, switch to the product template ninemags.

2. Find the NINEMAGS button, click on it — a settings window will open on the left side of the editor.

3. You can also find the NINEMAGS button under Product information, along with other page elements (Title, Price, Variant picker, etc.).

4. After clicking, a settings window will open.

1. Button container width

‍Defines the width of the button:- “Wrap button” — the button adjusts to the text length.- “Full width” — the button takes up the full container width.

2. Button background color
‍
Sets the background color of the button in its normal state.

3. Hovered Button background color
‍
Sets the background color of the button when hovered.

4. Button text color
‍
Sets the color of the text displayed on the button.

5. Accent color
‍
Defines the accent color of the button (e.g., for border or icon).

6. Dialog button border radius
‍
Sets the corner roundness for buttons in dialog windows.

7. App buttons border radius
‍
Sets the corner roundness for buttons in the application interface.

8. Button CSS
‍
Field for entering custom CSS styles for the button manually.

HOW TO TEST

Customer Facing

Additional settings you can adjust

Finalizing the Setup and Testing