HOW TO TEST

Customer Facing

‍​We have added a new theme to your Shopify store with "-ninemags" suffix in its name. This is a copy of your live theme with a custom product layout.

Please navigate to your Shopify admin dashboard, go to the Themes section, and locate the new theme with the "-ninemags" ending. Click on the Actions dropdown and select Preview to open a preview of this theme.While in the preview mode, navigate to your product with the custom product where NINEMAGS is integrated.

After the page loaded, in your browser's address bar, append ?view=ninemags to the end of the product page URL and press Enter. This step will load the product page with the new template and allow you to view the product using the specific layout of the new theme.

➡️ The URL will look like this: https://demo.ninemags.com
/products/custom-photo-magnet?view=ninemags
‍When the window reloads, test the functionality of the file uploader.
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 Ninemags Ship. If you use both, you will get $0 order and will not need to pay for the order.

Note: skip steps 1-4 if the integration was done directly in your published theme (we will mention that in the email notificaton).​

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:​

Dropbox

​1. NINEMAGS application pulls order data from your store every 5-10 minutes and looking for orders with status Open.
2. Print sheet and ZIP files are uploaded to your Dropbox folder.
3. Configure your Dropbox folder to sync locally.
‍We recommend to exclude source folder from syncing as you rarely need it.
4. Every print sheet will be synced to your local computer.

Additional settings you can adjust

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'.

​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.
2. Configuring NINEMAGS for Product Variants
If your products have variants
1. Scroll down and find the “App blocks” section.
2. Click on it and select ninemags-admin.
3. In the opened menu, configure the settings for each variant.
4. Once everything is set up, click “Save”.

Finalizing the Setup and Testing

1.Go to Online Store > Preview to verify that the product displays correctly.
2. Create a test order.
3. Check if the uploaded files are correctly transferred to Dropbox.