Shopify Tailored Shirt Online

dressmaking and tailoring app for shopify


Thank you for purchasing our "Shopify Tailored Shirt Online" App. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form. Thank you so much !

“Shopify Tailored Shirt Online” is a Shopify App which is used to make or customize garments through online. You can create your own dress and have it tailored to your accurate measurements for a perfect fitting.

Design the garment yourself – Select your favorite fabrics then choose sleeves, fit, collar, collar button, cuffs style, chest pocket, placket, and bottom style.

“Shopify Tailored Shirt Online” App has a user-friendly interface that helps the user a potential tailoring experience.

“Shopify Tailored Shirt Online” offers online customized tailoring for all types of user. This App is the complete tailoring solution that helps you to engage customers, boost your sales and revenues.

“Shopify Tailored Shirt Online” App has excellent features and very easy to install or setup. “Shopify Tailored Shirt Online” is more flexible and compatible with many existing App in the Shopify repository.

This App is customizable. Users can easily configure the App into the new or existing Shopify Store.

1. Login your Shopify Store in Admin panel.

2. Now hit our App URL and click to "Get App" button.

For show this application in your theme, you should add some code in your template. So total process are given below…

If you are not familiar with liquid code changes or need any sort of help then just add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here), email us to explain the problems and we will fix the issues for you.

3. Go to “Themes” menu of Admin Dashboard and Edit your published themes to install the application.

4. Click on “Template Editor” and put the "Shopify Tailor Shop Shirt" Application “Code” on the following files. (Update this template files: theme.liquid, product.liquid, cart.liquid, collection.liquid and index.liquid)

Step 1: Add the following code just before end of the “function (variant, selector)” function of product.liquid file (If the function does not exist in product.liquid file then find it in the theme.liquid file and put the code in same position as mentioned above). If you can't find it in either of those 2 files, then check in Snippets folder, because some theme placed this function in liquid file (like Apps.js.liquid, App.liquid etc) under snippets folder.

//Start: SC Tailor shirt
if (typeof TS_Update_Data_URL == 'function')
TS_Update_Data_URL(variant);
//End: SC Tailor Shirt

Screenshots of theme file for the Step 1 code is given below:

Step 2(a): Update product.liquid file: Add the following code at very begining of the product.liquid file.

{% if product.metafields.ScTailorShirt.IsHidden == 1 %}
Product not available
{% else %}

Now add the following code at bottom of the product.liquid file.

{% endif %}

Step 2(b): Add the following code just after “Add to Cart” button code. Please check the screenshot below. If you can't find 'Add to Cart' button code in product.liquid then check under Snippets folder. Some themes add product page content under liquid file (like product-form.liquid etc.) in Snippets folder.

	<!--Start: SC Tailor shirt -->
	{% include 'sc-tshirt-btn-loader-150812' %}
	<!--End: SC Tailor shirt -->

Screenshots of theme file for the Step 2 code is given below:

Step 3: cart.liquid Changes: This change is a bit critical. Some themes use table format to show the items in the cart, some use div, here we are giving example for a theme which is using table format. The logic is: For each item in the cart we need to check if the item is a customized product, if yes then we need to use different image url and different product page url. So, we need a if else block under the for loop, in else block we need to use the existing theme codes and in if block we need to use different image url and product page url using existing theme code for the cart item. Sample code for table format is given below:

<tbody>
            {% for item in cart.items %}
<!--SC Tailor shirt -->
            {% if item.variant.metafields.ScTailorShirt.CPID %}
            <tr>
              <td class="image">
                <div class="product_image">
                  {% if item.variant.metafields.ScTailorShirt.FrontImage %}
                  <a href="{{ item.variant.metafields.ScTailorShirt.FrontImage}}" target="_blank">
                    <img class="sc-cart-img" src="{{ item.variant.metafields.ScTailorShirt.FrontImage}}"

style="width:100px;"  alt="{{ item.title | escape }}" />
                  </a>   
                  {% endif %}
                  {% if item.variant.metafields.ScTailorShirt.BackImage %}
                  <a href="{{ item.variant.metafields.ScTailorShirt.BackImage}}" target="_blank">
                    <img class="sc-cart-img" src="{{ item.variant.metafields.ScTailorShirt.BackImage}}"

style="width:100px;"  alt="{{ item.title | escape }}" />
                  </a>   
                  {% endif %}                  
                </div>
              </td>
              <td class="item">
                <a href="{{ item.variant.metafields.ScTailorShirt.Product_URL }}&ex_cp_id={{ item.variant.metafields.ScTailorShirt.CPID }}&ex_v_id={{ item.variant.id }}">
                  <strong>{{ item.title }}</strong>
                </a>                
              </td>
              <td class="qty">
                <input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{

item.quantity }}" onfocus="this.select();" class="tc item-quantity" />
              </td>
              <td class="price">{{ item.line_price | money }}</td>
              <td class="remove"><a href="/cart/change?line={{ forloop.index }}&quantity=0"

class="cart">Remove</a></td>
            </tr>
              {% else %}
    <!-- ALL existing line item rows will go here CODES GOES HERE. -->
{% endif %}    
                  
            {% endfor %}

Step 4: collection.liquid, index.liquid, search.liquid changes: Please check for a for-loop which is used to show a product details. If you can't find the for-loop for product details, then look for include statement and check the file (mentioned in include statement) under Snippets / Assets folder which should contain the for-loop for the product list. Place all the codes inside the for-loop under a if else statement. if block will be empty, you need to copy all the for-loop content under else block:

<!--Start: SC Tailor shirt -->
{% if product.metafields.ScTailorShirt.IsHidden == 1 %}
{% else %}
{% include 'product-grid-item' %}
{% endif %}
<!--End: SC Tailor shirt -->

Screenshots of theme file for the Step 4 code is given below:

Step 5: customers/order.liquid changes: Insert the following code into the "line_item" for loop condition of customers/order.liquid files.

<!--Start: SC Tailor shirt -->
{% if line_item.variant.metafields.ScTailorShirt.CPID %}
	{{ line_item.title | link_to: line_item.variant.metafields.ScTailorShirt.Product_URL }}
{% else %}
	{{ line_item.title | link_to: line_item.product.url }}
{% endif %}

Screenshots of theme file for the Step 5 code is given below:

5. So your application has installed. Now go to “Apps” menu of Admin Dashboard and click on the “Tailor Shop Shirt” Apps link.

6. Now customize Design It Button, Add to Cart Button, Price Info and Measurement Unit from “Settings” option.

7. In “Manage Products” option, you will get a list of all products/fabrics in your store. Each fabric/product will have activate/deactivate button and custom price setting option. Just put the custom price and activate any fabric that you want to have the support of tailored shirt.

8. Insert customization price from “Manage Products” option.

9. Now go to front end and check it at products page.