1. Go to the product page on PageFly 

2. On the left side, click "+" icon and find HTML/Liquid block 

3. Drag and drop it above the "add to cart" button 

4. Click on the block you dropped, then click on "open code editor" on the right 

5. Copy and paste the code below, then click "Save & Close"

<script>

    window.imageUploader = window.imageUploader || {};

    window.imageUploader.domain = {{ shop.permanent_domain | json }}

    window.imageUploader.settings = {% if shop.metafields.imageUploader.settings == blank %}{}{% else %}{{ shop.metafields.imageUploader.settings }}{% endif %};

  </script>

  {% if template contains 'product' %}

    <script>

      window.imageUploader.meta = {};

      window.imageUploader.meta.product = {{ product | json }};

      window.imageUploader.meta.collections = {{ product.collections | json }}

    </script> 

  {% endif %}

<div id='ImageUploaderContainer'></div>

{% if shop.metafields.imageUploader %}

  {% if shop.metafields.imageUploader.settingScript %} 

<script type="text/javascript" async src={{shop.metafields.imageUploader.settingScript}}></script>

{% endif %}

  {% if shop.metafields.imageUploader.longSettings != blank %}

<script>

      window.imageUploader.longSettings = {{shop.metafields.imageUploader.longSettings}}

</script>

  {% endif %}

{% if shop.metafields.imageUploader.css %} 

<link rel="stylesheet" href={{shop.metafields.imageUploader.css}}>

{% endif %}

{% if shop.metafields.imageUploader.script1 %} 

<script type="text/javascript" async src={{shop.metafields.imageUploader.script1}}></script>

{% endif %}

{% if shop.metafields.imageUploader.script2 %} 

<script type="text/javascript" async src={{shop.metafields.imageUploader.script2}}></script>

{% endif %}

{% endif %} 

6. Click "Save" on top right 

7. After saved, click "Publish" 

8. Make sure the Mighty Image Uploader app settings are saved and target the product page 

1. Go to the GemPages app

2. Go to a product page that you want to edit on GemPages

3. Drag and drop the < / > Liquid block to a section above the "add to cart" button 

4. Hover over that liquid block and click edit (pencil icon) 

5. Copy and paste this section of code in there 

<script>

    window.imageUploader = window.imageUploader || {};

    window.imageUploader.domain = {{ shop.permanent_domain | json }};

    window.imageUploader.settings = {% if shop.metafields.imageUploader.settings == blank %}{}{% else %}{{ shop.metafields.imageUploader.settings }}{% endif %};

  </script>

  {% if template contains 'product' %}

    <script>

      window.imageUploader.meta = {};

      window.imageUploader.meta.product = {{product | json }};

      window.imageUploader.meta.collections = {{ product.collections | json }}

    </script> 

  {% endif %}

<div id="ImageUploaderContainer"></div>

{% if shop.metafields.imageUploader %}

  {% if shop.metafields.imageUploader.settingScript %} 

<script type="text/javascript" async="" src="{{shop.metafields.imageUploader.settingScript}}"></script>

{% endif %}

  {% if shop.metafields.imageUploader.longSettings != blank %}

<script>

      window.imageUploader.longSettings = {{shop.metafields.imageUploader.longSettings}}

</script>

  {% endif %}

{% if shop.metafields.imageUploader.css %} 

<link rel="stylesheet" href="{{shop.metafields.imageUploader.css}}">

{% endif %}

{% if shop.metafields.imageUploader.script1 %} 

<script type="text/javascript" async="" src="{{shop.metafields.imageUploader.script1}}"></script>

{% endif %}

{% if shop.metafields.imageUploader.script2 %} 

<script type="text/javascript" async="" src="{{shop.metafields.imageUploader.script2}}"></script>

{% endif %}

{% endif %} 

6. Click "Save" on code editor 

7. Click "Save" and "Publish" at the top of this setting page 

If custom properties are displayed in cart

Shopify 2.0 Theme: Turn on "display photo in cart option" 

1. On the dashboard, if you have OS2.0 theme, you can go to very bottom of the settings 

Here's the button for you to click on 

When hover over the button, you will see a .gif file displaying how to add the app block 

Once you clicked on it, it will take you to "customize shopify theme" screen and automatically turn on "display photo in cart" 

2. If you don't see that, you can also go to the bottom of the settings, hover over "customize app block in your theme" 

Once you click on that, make sure "display photo in cart app" is on 

Manually edit theme to display photo

* Remember that you need a little technical coding skills to find the file * 

1. Go to "edit code" section in Shopify theme

• online store => theme => live theme => action => edit theme

2. Search for "cart" in the theme file section 

Usually you are looking for:

• cart-template.liquid

• cart-item or any names related to that

3. Search for "properties" inside liquid file

You are search for a "for loop" where cart-item is displaying the properties 

4. Find this code block

{%- else -%}

    {{ property.last }}

{%- endif -%}

5. Replace with that

{% elsif property.last contains 'digitaloceanspaces'%}

     <a href="{{ property.last }}" target="_blank" style="border-bottom: none">

          <img src="{{property.last}}" style="max-width: 50px;"/>

     </a>

{% else %}

     {{ property.last }}

{%- endif -%}

* special note that if the original code is {{ property.last }}, you need to make sure it's all {{ property.last }} instead of {{ p.last }}. * 

Check the spelling of property variable here:

If custom properties are not displayed in cart 

1. Go to the cart page

2. Right click -> inspect 

3. Click on the arrow on rectangle icon next to console tab 

4. Hover over the product info box + click on it 

5. After clicked on #4, you should see highlighted section, in this case it's div with class="pro-title name" 

Remember the class name in class="pro-title name", you will need this to find the section of code next 

Copy the item properties code to display in cart 

6. Go to "edit code" in Shopify theme 

7. Search "cart" on top left to see possible files with "cart" in its name 

8. On the .liquid file, (in this case cart-template.liquid), on the right INSIDE the file, do a search for pro-title name (from step #5) 

9. Towards the close div, paste in this section of code towards the end of div containing class="(name you searched for)" 

* Make sure other areas have item.(field) *

• In this case, you look for the item.url, item.product.title, etc

• If it doesn't have "item.", then you need to make sure item variable matches whatever cart is using

{%- for property in item.properties -%}

                          {%- assign property_first_char = property.first | slice: 0 -%}

                          {%- if property.last != blank and property_first_char != '_' -%}

                            <div class="product-option">

                              <dt>{{ property.first }}: </dt>

                              <dd>

                                {%- if property.last contains '/uploads/' -%}

                                  <a href="{{ property.last }}" class="link" target="_blank">

                                    {{ property.last | split: '/' | last }}

                                  </a>

                                {%- else -%}

                                  {{ property.last }}

                                {%- endif -%}

                              </dd>

                            </div>

                          {%- endif -%}

                        {%- endfor -%}

There's several themes that may not display images correctly on pop up box, we will manually add them in 

* Remember that you need a little technical coding skills to find the file * 

1. Go to "edit code" section in Shopify theme 

online store => theme => live theme => action => edit theme 

2. Search for "cart" in the theme file section 

Usually you are looking for: 

• cart-notification-product.liquid

3. Search for "properties" inside liquid file

You are search for a "for loop" where cart-item is displaying the properties 

4. Find this code block

{%- else -%}

    {{ property.last }}

{%- endif -%}

Replace with that: 

{% elsif property.last contains 'digitaloceanspaces'%}

     <a href="{{ property.last }}" target="_blank" style="border-bottom: none">

          <img src="{{property.last}}" style="max-width: 50px;"/>

     </a>

{% else %}

     {{ property.last }}

{%- endif -%}

* if the original code is {{ property.last }}, you need to make sure it's all {{ property.last }} instead of {{ p.last }}. *

Check the spelling of property variable here

Yes you are able to hide image links on checkout page. All you have to do is: 

Turn on "hide custom uploader fields" under Extras within settings and save

1. Go to your Shopify theme => edit code 

2. Search for cart

Usually you are looking for cart.liquid, cart-template.liquid, or cart-item.liquid

• • you need to find template that has "properties" inside the code

  • In dawn's theme, it's under cart-items.liquid

3. Inside that properties loop, find some name that has "first"

• Inside this theme, you will need to DELETE "and property_first_char != '_'"

4. Click save. So in the future, when uploading images, you will see "_" in front

• go to your product page and make an upload test to see if the changes are updated

• if they are updated, you should see something like this below

1. Maybe you forgot to make the picture upload required 

Check for the settings and see if you have "upload required" turned on

How to check product page setting:

• right click on your product page that was supposed to display, click inspect

• if setting is working, you should see 'cs' -> object on the console

• click on cs > object to get the setting details 

• check whether  you have upload required on

• Object -> uploadConfig -> uploadRequired: true or false ?

• if uploadRequired is false, you can set the settings to true under "upload configurations" in settings 

2. Check if the actual "add to cart" button adds image links 

Make sure that the setting that is displaying has Extras => "display on front page" turned on 

1. Go to online store => edit code on published theme 

2. Search "featured-product.liquid", and open up that file 

3. Find the first place that assigns product or has "product.(something after)" 

4. Copy this set of code after them 

{% if shop.metafields.imageUploader %}

<script>

window.imageUploader = window.imageUploader || {};

window.imageUploader.meta = {};

window.imageUploader.meta.product = {

id: {{product.id}},

title: "{{product.title}}",

handle: "{{product.handle}}",

vendor: "{{product.vendor}}",

type: "{{product.type}}",

tags: {{product.tags | json}},

      variants: {{product.variants | json}}

};

window.imageUploader.meta.collections = {{ product.collections | json }};

window.imageUploader.meta.featured = true</script> 

{% endif %}

5. Click Save

6. Go back to Admin Dashboard => Online Store => Customize 

7. Go to Home Page On Customize Shopify page 

8. Find "Featured product" Section on the left tab, If it doesn't have it, add one 

9. Add our app block above "buy buttons"

1. Go to Shopify theme -> Edit code -> Assets -> css file 

2. Add this set of code to the css file

If you want extra round corner, add: 

.upload-wrapper .upload-button {

  border-radius: 10px !important; 

}

1. Go to the settings in admin dashboard (bottom left of the screen) 

2. Go to notifications => order confirmation 

3. On the template code, scroll down to find this piece of code:

{% if line.variant_title != 'Default Title' %}

            <span class="order-list__item-variant">{{ line.variant_title }}</span><br/>

          {% endif %}

4. Add this code after it 

{% unless line.properties == empty %}

<ul style="padding: 0">

  {% for property in line.properties %}

  <li style="

    display: flex; align-items: center; margin-bottom: 10px; margin-left: 0px;

">{{ property.first }}: {% if property.first contains "Image" or property.last contains 'digitalocean'%}

  <a href="{{property.last}}" style="margin-left: 10px;" target="_blank">

   <img src="{{ property.last }}" width="60" height="60" class="order-list__product-image"/>

  </a>

{% else %}

   {{ property.last }}

{% endif %}</li>

  {% endfor %}

</ul>

{% endunless %}    

1. Select "hide upload", so select shape displays "hide upload button" 

2. Under product options, click "add new product option" 

3. Choose "Text - Short" as a product option and edit your custom text field 

1. Turn on auto-crop in settings 

2. Select Rectangle shape + No minimum dimension 

We currently do not offer feature to let buyers upload different shapes at once

However, if you want to select different shapes and upload 1 type of shape, you can try out the advanced setting