# Support To request assistance from Live Chat, you can simply find the **chatbox icon bubble** at the **bottom right corner** of the Fontify dashboard.

Click on the chatbox to live chat with Fontify support team

Or you can contact us via email. # Introduce Changing the font for your store has never been easier. Have you ever wondered how to add a custom font to your Shopify store? If so, this app is for you. ## **Use Any Font For Your Shopify Store** Do you use a Shopify theme that only supports Google fonts or a theme that doesn’t support any custom fonts at all?... With Fontify, you can use any font - both Google and custom fonts! If you want to use customized fonts, just upload the font file and our app will do everything else. Our app will import any font you upload and process it to make it work in your store. You only need to choose your font, select the elements that you want to use for it...and you’re done! ## **Why do I need this app?** If you don't know coding, HTML, CSS, and liquid...but want to have the simple function of using other fonts that your theme does not support, then Fontify is the best solution for you! ## **How does it work?** You can choose an existing Google font or upload your custom font. After that, just assign to your element (h1, h2, h3, h4, h5, p, custom class...) ## **What will Fontify do for me?** Fontify will help you use any font without editing any code! ## **Features** * Easy to install * Easy to configure * Use with any font * Supports all Google fonts * Compatible with all Shopify themes (also custom themes: Gecko, Basel, Elessi, Molla, and Boutique from The4) * Well documented * Live support nearly 24/7 * Use Google Fonts for free There are 3 features in the App: **Upload font, Store Google Fonts outside Google servers** ($3/month or $29/year), and **Google font** (Free) Therefore, from now on, whenever you want to modify the Typography, just go to App. You don’t need to do anything in Customize view. # Get started After installing the app from Shopify, please follow the below steps to integrate the app into your theme. **Step 1**: Enable the app to apply your fonts. Open the app and click the **Enable** button to enable the app.

**Step 2: Select the theme** that you want to apply the fonts from the app to and then click on the **Apply Now** button. The app will show all themes that you installed in your store, you can select the published or draft theme.

By clicking on the **Apply Now** button, you will be directed to the Theme editor to enable the app embed. Simply click on the **Save** button.

{% hint style="info" %} Note: Please make sure you have done both the above two steps to make the fonts work on your site. {% endhint %} # How to change the fonts? With Fontify you can upload font files or use the fonts from Google Font library. # Upload font This feature will allow you to upload the custom fonts to the app and apply them to your site. Please follow the below steps: **Step 1**: Prepare your custom font file with the format are **ttf / woff / otf.** You can find it at , , ... **Step 2**: From the **App dashboard**, open the **Fonts** tab and click on the **Create new** button to upload your fonts.

**Step 3**: Click on **Add file** to select your font file and fill in the **Font name** option.

**Step 4**: Tick the options that you want to assign the font to. For example, I want to change the font for the **headlines**, so I can tick the **Headline 1 to Headline 6** options. {% hint style="info" %} You can tick **“All”** if you want to make changes to all elements of your store. {% endhint %}

{% hint style="info" %} You can use ***Element Picker*** if you want to make changes to specific parts of your store. Simply click on the **Polaris icon** to select the elements that you want. {% endhint %}

You will see your store preview. Hover over the text element and click on the **select** text to select whatever elements you want to apply to the new font. After done for the selection, you can see the class name of the elements that you select in the **Custom Elements** box.

**Step 5**: Tick **Overwrite other fonts** option to overwrite the new font to the font in the Shopify theme. Then click on the **Save** button to upload the new font and apply it to the elements that you selected.

All done, please wait about 1-2 mins and then reload your site to see the result.\ \ Please check the video below for an easier understand. {% embed url="" %} # Google fonts With Fontify, you can use **Google fonts** for **free**. You can apply the font to all elements or specific elements :) **Step 1**: From the **App dashboard**, open the **Fonts** tab and click on the **Create a new font** button.

**Step 2**: Open the **Google fonts** tab and click on **Choose font** to select a font.

Then find the font that you like and click on the **Sign icon** to select it.

Please do similar steps with [**Upload font**](https://docs.nitroapps.co/fontify/how-to-change-the-fonts/upload-font). But instead of uploading a font, you can select a font from Google.\ \ You can check out the video below for an easier understanding {% embed url="" %} # FAQs All questions everyone usually ask us # How to Make Google Fonts GDPR Compliant with Fontify? To make google fonts GDPR compliant, you can store the fonts on Fontify. There are two ways to store the fonts outside the Google server. To use this feature, you must upgrade to a **Premium** plan. It is $3/month or $29/year. ### 1. Upload the fonts to Fontify You can open the **Upload** tab and follow [this document](https://docs.nitroapps.co/fontify/how-to-change-the-fonts/upload-font) But in this way, you must prepare the **font file**. For example, you want to use the Roboto font, which is a Google font but you still need to get the font file and then upload it to Fontify to store it on Fontify's server. ### 2. Use Google fonts but store them outside Google servers Please refer to [this document](https://docs.nitroapps.co/fontify/how-to-change-the-fonts/google-fonts) to add Google fonts. With this feature, you do not need to have the font file or no need to upload the font. Simply select font from Google and then tick the **Store Google Fonts outside Google servers** option. # How to apply a font to all headings on your store? Usually, we should use two or three fonts on a site. One is for all headings and another one for the body text. To make a font work for all headings, please follow the steps below: **Step 1**: Click on **Create new** button.

**Step 2**: Please **upload** your font to Fontify or **select** a Google font. Then enter the **font name.**

**Step 3:** On the **Assign font to Elements** tab, tick all **Headline** options.

**Step 4**: Tick the **Overwrite other fonts** checkbox and click the **Save** button.

All done, please wait for about 30 seconds and then reload your live site to check the font. You can check out the video below for an easier understanding {% embed url="" %} # How to apply a font to all body text on your store? Usually, we should use two or three fonts on a site. One is for all headings and another one for the body text. To make a font work for all mall body text, please follow the steps below: **Step 1**: Click on the **Create new** button.

**Step 2**: Please **upload** your font to Fontify or **select** a Google font. Then enter the **font name.**

**Step 3:** On the **Assign font to Elements** tab, tick on the **Paragraph, Anchor link, and List** options. Also, please fill some tags in the **Custom Elements** box like the below image.

You can copy this block code: ``` div span input option button ``` **Step 4**: Tick the **Overwrite other fonts** checkbox and click the **Save** button.

All done, please wait for about 30 seconds and then reload your live site to check the font. Please check the video below to get an easier understanding. {% embed url="" %} # How to apply a font to some specific parts on your store? For example, your store is using a Poppins font. You want to keep that font for the whole of the site, just want to change the font for the navigation bar. Fontify can help you do that :) **Step 1**: Click on the **Create new** button.

**Step 2**: Please **upload** your font to Fontify or **select** a Google font. Then enter the **font name.**

**Step 3:** Use the **Picker Element** to select the part that you want in your store.

When clicking on that icon, you will be **redirected** to a new tab with the **Picker element**. You can hover over the text and click on **Select** to pick them.

After selecting an element, you can see there is a code added to the **Custom Element** box like this:

**Step 4**: Tick the **Overwrite other fonts** checkbox and click the **Save** button.

All done, please wait for about 30 seconds and then reload your live site to check the font. Please check the video below to get an easier understanding {% embed url="" %} # How can I revert my font back to the original? In case you do not want to use the fonts in Fontify and you want to revert back to the original font of Shopify theme, you can **Disable** the app. On the **App dashboard**, click on **Disable** button.

# Why I can't find the fonts in Theme Customize? The fonts after being uploaded to Fontify only show in Fontify app, it will not show on Theme customize. Please manage the fonts in Fontify app instead go to Theme customize. # What should I do when uninstalling the app? If you uninstall the app, your subscription will be **canceled** and you will have to **charge again** if you reinstall it. So if there are any issues, please contact us via **** email or via the live chat to ask for assistance first. Please consider carefully before deciding to uninstall. If you still want to uninstall it, please follow the below steps: **Step 1:** Delete all fonts in the app. Go to the **App dashboard -> Fonts -> Delete** font.

**Step 2:** Go to **Shopify settings -> Apps and sales channels** to **delete** the app from the app list.

**Step 3:** To delete the code of our app completely, you can go to Theme -> Edit code -> find out the file **theme.liquid** –> remove only the below code snippet: > {{ shop.metafields.fontify.stylesheets }} You can press CTRL+F on your keyboard to find the "**fontify**" ket word to see the sipper code.

# \*\*Important Notices before using\*\* **1.** Don’t let the Design be too big. It’s too slow for loading and rendering in the App. You should choose the size is about 20 cm for the edges of the design area. Or convert it to pixel unit.

**2.** Don’t upload heavy product image to Product Base. Shopify only allows a maximum of 31MB.

That 39 MB is the maximum size of an order set by Shopify; we can’t change that. So you need to reduce the size of the uploaded images and reduce the size of the printing area here:

**3.** When you use Lumise, there is no way to get a percentage discount (although a certain amount of discount is still allowed). It is also impossible to use a coupon code. This is a technical limitation problem. We’re so sorry for that.

**4.** You have to prepare your own product images ( mask images) yourself to upload them to the App. You can use Photoshop to lean how to create these product images. Lumise is just a supportive tool. **5.** To make the other products customizable, you have to go to Lumise Admin > Ad New Products Base. Our app does not use the **existing Shopify products** in your store. You need to create them once again in the app here.

# Demo Click [**here**](https://demo.lumise.com/) to view Demo store

# Installations ### 1. Embed customize button Just some easy steps to make it works! If it’s too difficult for you to do, **feel free to contact us via Live chat support we will help you install the App for free and as soon as possible.** **Step 1.** Go to **Theme –> Actions -> Edit code** **Step 2.** Open – `templates/Product.liquid` or `sections/product-template.liquid` **Step 3.** Find **Add to cart button**. You can use Ctrl+F to find it (keyword “**cart**“)

**Step 4.** Copy this Snippet code: ```liquid {%- capture cart_button -%} {%- endcapture -%} {%- if product.tags contains 'lumise'-%} {%- if product.tags contains 'lumise-product-base' and product.metafields.lumise and product.metafields.lumise.product_base %} Customize {%- elsif product.tags contains 'lumise-customize' and product.metafields.lumise and product.metafields.lumise.product_base and product.metafields.lumise.product and product.metafields.lumise.product.value contains 'id:'-%} {%- assign lumise_options = product.metafields.lumise.product.value | split: '|' -%} {%- for opt in lumise_options -%} {%- assign field = opt | split: ':'-%} {%- if field[0] == 'lumise_disable_add_cart' and field[1] != 'yes'-%} {{-cart_button-}} {%- endif-%} {%- if field[0] == 'lumise_customize' and field[1] == 'yes' -%} Customize {% endif%} {%- endfor-%} {%- else -%} {{-cart_button-}} {%- endif-%} {%- else %} {{-cart_button-}} {%- endif -%} ``` **Step 5.** Then **paste it below** the block code of the button “Add to cart”

### 2. Modify the Order status page \*Display a thumbnail of the design when the order completed **Step 1.** Go to **Admin store -> Settings -> Checkout** **Step 2.** Copy the snippet code below ```liquid {% if order.tags contains 'lumise'%}

List your customized products

{% for line in order.line_items %} {% if line.product_id != blank %}{% continue%} {% endif%} {% endfor %}

{%- if line.image -%}

{%- elsif line.properties != empty -%} {% for property in line.properties %} {%- if property.first == "_Preview" -%}

{%- break-%} {%- endif -%} {%- endfor-%} {%- endif -%}

{% if line.product.title %} {% assign line_title = line.product.title %} {% else %} {% assign line_title = line.title %} {% endif %} {% if line.quantity < line.quantity %} {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %} {% else %} {% assign line_display=line.quantity %} {% endif %} {{ line_title }} × {{ line_display }} {% if line.variant.title != 'Default Title' %}
{{ line.variant.title }} {% endif %} {% if line.refunded_quantity > 0 %}
Refunded {% endif %} {% if line.discount_allocations %} {% for discount_allocation in line.discount_allocations %} {% if discount_allocation.discount_application.target_selection != 'all' %}

{{ discount_allocation.discount_application.title | upcase }} (-{{ discount_allocation.amount | money }}) {% endif %} {% endfor %} {% endif %}

{% if line.original_line_price != line.final_line_price %} ~~{{ line.original_line_price | money }}~~ {% endif %}

{% if line.final_line_price > 0 %} {{ line.final_line_price | money }} {% else %} Free {% endif %}

{% endif%} ``` **Step 3.** Paste it to `Additional scripts` like this:

### 3. Customize order email confirm \ When an order is created, an email will be sent to your customer, so you need to modify it to display the thumbnail design **Step 1.** Go to **Admin -> Settings -> Notifications -> Order Confirmation** **Step 2.** Copy this block code: ```liquid {%- if line.image -%}

{%- elsif line.properties != empty -%} {% for property in line.properties %} {%- if property.first == "_Preview" -%}

{%- break-%} {%- endif -%} {%- endfor-%} {%- endif -%} ``` **Step 3.** Replace the below code blocks with the snippet you have just copied. * With **Shopify OS 1.0** themes, you can use Ctrl+F to find it (the keyword is “image”)

* With the **Shopify OS 2.0** themes, please find the keyword “**shop.email\_logo\_url**“

After installation is done, Lumise will create 2 ends for you. One is for customers to design a product Another one is for the store owner to configure settings on the customer’s end. Similar steps with **| Order refund | Order canceled | Abandoned checkout | Draft order invoice | Shipping confirmation | New order** **\*Note:** for New order Replace \

by the code above. ### 4. Add the CSS code to Lumise settings **Step 1.** Go to **Lumise app -> Settings -> Editor -> Custom CSS box**. **Step 2.** Copy the below code and paste it to the Custom CSS box. ```css #lumise-stage-nav [data-tip="true"] span { opacity: 1; bottom: 80%; z-index: 10; transition: all 300ms ease 150ms; visibility: visible; display: block !important; } ul.lumise-list-items li { background-size: contain !important; background-repeat: no-repeat; } ``` Like this:

### 5. Create a new Product base to see how the app work. **Step 1.** Go to **Lumise app -> Product Base -> Add new product base.**

**Step 2.** Enter your product information. **Step 3.** After creating a product base, it will appear in your Shopify as a new product with the tag **Lumise base**. Please don’t remove that tag, your product must have that tag to work with Lumise. Go to **Shopify -> Products -> find that product to preview it.**

{% hint style="info" %} It is likely that the app **may not work** on **third-party themes**, if this is the case please **contact** us for free **support**. {% endhint %}

Let us know if there’s anything else we can do for you. We’re happy to help you :relaxed: # Product Base ### How to start by moving a Product into the Design Editor You can follow this tutorial video below: {% embed url="" %} #### Or these screenshots guide Step 1: Go to **Lumise Control Panel** [http://app.lumise.com](https://app.lumise.com/) Then create a **Product Base**

**Step 2:** Fill in **detail** of Product Base

**Step 3:** In **Design tab ->** Create **stages** for product

Customize **Design area**

Select product base images in **Lumise samples**. Lumise Sample are mask images\ Read more about [**Mask image**](https://app.lumise.com/docs/1.0/mask-image)

{% hint style="info" %} **Note:** By selecting a **Lumise Sample**, you can change the orginal color of product base image to **any colors** which you want. But with an Upload image you **can not** do it. {% endhint %}

**Step 4:** Skip **Variant tab** and go to **Attribute tab**

* Attribute type 1: **Product color**

* Attribute type 2: **Dropdown**

* Attribute type 3: **Textarea**

**Step 5:** Go back to **Variant Tab ->** Add **new variant** based on Atttributes: **Product color and Dropdown**

Fill in Variant information such as: **price, min+max quantity, description**

\===> Click to “Save Product”\ **Please go here to check what you have set for this “Product base 1”** **Step 6.** Go to **Shopify Admin> All Products.** The product base you’ve created is showing up as a **Shopify product** in your store

**Step 7.** Go to View this Shopify product in its **product page**. Find **Customize** button. If you can not find out the Customize button, please do embded code again. Or contact us to get help

{% hint style="info" %} Note: The **Customize button** is automatically created, so it may not in suitable style. If this is a case, please contact us for a support. We’ll help you change the style of this button for free {% endhint %} Here is how it looked on the **Customer end.**

### 2. On Customer end Let’s check the **settings** you have done for this product base in Lumise Control Panel before

{% hint style="info" %} **Note:** When customer added designed products to cart .Then exit Design page, go back to shop because they don’t want to Checkout thereafter. They can review their products anytime by clicking on the **fixed cart** icon, This cart icon appear on HOME page of your store {% endhint %}

**Checkout**

Designed product information

The customer’s order with a product designed by themselves is **completed**!

### **Download Customer’s Design** After your customer had completed checkout process, You can go to **Orders** –> Select an order–> Click to Download design

# FAQs # Shopify Products **Shopify Product** help you:\ -Create a product on your Shopify store\ -Directly adding a template on it at **Control Panel** **Step 1:** Go to **Control Panel> Shopify Product > Add new product** **Step 2:** In **Detail tab**, fill in the product details, these details is also showed up on **Shopify side**

**Step 3:** In **Design tab.** Select a **Product Base**

You can **Edit or Add new** this product base as well

You can select the Product base you’ve created or create a new one

**Step 4:** Select a **template** to design for this Shopify product

**Align the template**

And **hit Save**\ You also can **download** your design then replace the image in Detail tab by this image

After creating this Product Base, when your customer click to customize this product, they will see this design with template **at first**.\ If they like your design, they can add it to cart then\ If they don’t like it, they can still make their own design like normal. # Design Template **Design templates** are a list of the template which you prepare for users to select on their end They can add them to a product with one click. To manage Templates, just go to **Admin panel > Templates**. In this page, you can see the **thumbnail of templates, name, categories and some filter options** on the top as well.

By default, it will show all items here. You can refine the list to show only specific templates by using the drop-down menus above the items list. The list auto refresh after you make a selection. * **Bulk Actions:** You can also act on multiple items at once. Select the items you want to act on using the checkboxes> select an action> click **Apply** * **Number of item per page** * **Sort by** * **Categories**

**Set price for a Template**

When you set a price for Template, It will show up on **Customer end.**

It’s also **counted** to price of the product

**Adding New Template**

# Sample File Download You can download our demo Templates and Cliparts here:\ Then you unzip it –> go to Lumise Admin -> Upload the files. For more high-quality graphics, please contact us via Live chat or email: Thanks. # Printing Type ## Adding New Printing Type You have so many products or templates or cliparts and it’s hard for you to find one of them. Categories will help you sort out them. **Step 1**. Go to **Templates> Categories> Add new categories**

**Step 2**. Fill in its detail

**Step 3**. Go to Add/Edit a template

**Step 4** Find it on **Customer end**

## How to caculate printing price Each printing method has its own way to calculate the price. The Lumise provide some options to enable that. **Allow setup price for each stage** In Design tab of a product base, you can create more stages for that product base. When Allow setup price for each stage is enabled, the printing price is applied for **all stages**, not only one stage. 1. **Calculate price with Text, Clipart, Images, Upload ( is uploaded image)**\ For example, * **Stage 1:** I set the prices are

I suppose the original price of my product is **$200**, the quantity is 1 (in scope of 10)\ I use **3 Text** on Stage 1, It cost $1×3= $3 for printing\ I use **2 Clipart** on Stage 1, It costs $1×2=$2\ I use **1 Image** on Stage 1, It costs $1×1=$1\ –> Printing price are $6\ So the new price of my product is $100+$3+$2+$1= **$206**\ *Result:*

If the quantity is increased from **11** to **15**, the price is **different**\ Printing price is: **$4×3 + $4×2 + $4×1 = $24.**

**Stage 2:** I set the prices are

I use **3 Text** on Stage 2, It cost $2×3=$6 for printing\ I use **2 Clipart** on Stage 2, It costs $2×2=$4\ I use **1 Image** on Stage 2, It costs $2×1=$2\ So the new price of my product is **$212**\ *Result:*

The quantity range is the similar to stage 1 {% hint style="info" %} **2. Color Option is temporarily stopped working. We’re so sorry about this inconvenience.**\ \ **Hope you guys can try the other types.** {% endhint %} **3. Base on the size of print range : A1, A2,…A6** I set the prices as:

Go to **Product Base** to config, you also have to select one of these sizes here

After add some objects to design, we can see the price of printing

**4. Fixed price for each quantity**\ The price is fixed for all stages and all design objects.

# Cliparts To manage **Clip art**, just go to **Admin panel > All Cliparts** **Clipart** are a list of the Clipart which you prepare for users to select on their end. They can add them to product design with one click.\ To manage Clipart, just go to **Admin panel > Clipart**. In this page, you can see the **thumbnail of Clipart, name, categories and some filter options** on the top as well.

By default, it will show all items here. You can refine the list to show only specific Clipart by using the drop-down menus above the items list. The list auto refresh after you make a selection. **Bulk Actions:** You can also act on multiple items at once. Select the items you want to act on using the checkboxes> select an action> click **Apply** **Number of item per page**\ **Sort by**\ **Categories**

Set price for a Clipart

When you set a price for Clipart, It will show up on **Customer end.**

It’s also **counted** to price of the product. But to make the Clipart can be counted, you must create Printing Type first

Adding New Clipart

Add multi cliparts If you want to upload a big number of clipart items, let’s use **ulti upload features** Just click on Add Multiple Cliparts button on the top of list page.
# Shapes To manage **Clip art**, just go to **Admin panel > All Shapes** **Cliparts** are a list of the Clipart which you prepare for users to select on their end. They can add them to product design with one click.\ To manage Shapes, just go to **Admin panel > Clipart**. In this page, you can see the **thumbnail of Clipart, name, categories and some filter options** on the top as well.

By default, it will show all items here. You can refine the list to show only specific Clipart by using the drop-down menus above the items list. The list auto refresh after you make a selection.\ **-Bulk Actions:** You can also act on multiple items at once. Select the items you want to act on using the checkboxes> select an action> click **Apply**\ **-Number of item per page**\ **-Sort by**\ **-Categories**

{% hint style="info" %} *Note: Shapes are FREE to use, you can not set price for this type of object* {% endhint %}
# Settings **In General Tab** You can change the logo,URL, site title, Favicon, theme color

*Result:*

**In Editor tab** You can change some settings on **Customer end**

**In Shop tab**\ You can do setting to comply with the currency rule in your country

\ **In Google font tab**\ You can set a number of font to show on Customer end

**In Shopify tab**

### **Language** To set up Language for both **Customer end** and **Store Owner end**, firstly, please click on **Language** on the **left sidebar**

Click on **Add new language**

Select a **flag icon according to your language**

Create **translations**

**Search** text function

Go back to **Settings-> Language**

After saving you will see a **option** for new languages appear here

# Support Don’t hesitate to contact us if you have any questions or concern via the live chat box here. We’re online from 8am to 5pm (GMT +7), from Monday to Friday. Please describe your issues clearly by **screenshots** and fill in your information to the chatbox, so we can also reply you **by email when you go offline!**

Our goal is to give you a high quality product and an exemplary level of customer service. So please let us know about your thought and your issues. We’re happy to solve them and assist you as much as possible\ *Best Regards!* # How to create Product Image/ Mask image You can follow this video: {% embed url="" %} If you need help with product image? Pricing: 1-10: $3/image 10-50: $2/image 50\~1000: $1.5/image Please contact to start this work and send us your original images. We will help you generate them to suit your needs.