Custom Product Design Studio

This app requires few theme liquid file changes. The changes depend on theme liquid codes. If you understand liquid logic / codes then follow the steps given below and let us know if you face any problems. Otherwise add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here) and email us at install@solvercircle.com, then we will install the codes for you.

 

You can directly download the "Custom Product Design Studio" apps integrated Minimal Theme from here. Just install the integrated theme and no need to add any code installation.

1. Login your Shopify Store in Admin panel.

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

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

3. Go to “Themes” menu of Admin Dashboard and Edit Minimal themes to install the app.

4. Click on “Template Editor” and follow the below steps to put the Custom Product Design Studio App “Code” on the following files.

 

Step 1: Go to "theme.liquid" file under the "Layout" folder, Add the following code in the end of this file (before the body tag) like as below screenshot.

	<!--SC Custom Product Design -->
	  <style type="text/css">
	  .sc-cart-img
	  {
		width:100px !important;
	  }
	  </style>

Please see the following screenshot for clean overview:

 

Step 2: Go to "product.liquid" file under the "Templates" folder, Add the following code in a very begining of this file and complete the code with "{% endif %}" like as below screenshot

	<!--Start: SC Custom Product Design -->
		{% if product.metafields.CustomProductDesign.IsHidden == 1 %}
		Product not available
		{% else %}
	<!--End: SC Custom Product Design -->
	<!--Start: SC Custom Product Design -->
	{% endif %}
	<!--End: SC Custom Product Design -->

Please see the following screenshot for clean overview:

 

Step 3: Go to "product-template.liquid" file under the "Sections" folder, Add the following code just after "Add to Cart" button code like as below screenshot.

	<!-- Start: SC Custom Product Design -->
		{% include 'sc-cp-btn-loader-150812' %}
	<!-- End: SC Custom Product Design -->

Please see the following screenshot for clean overview:

 

Step 4: Go to "cart-template.liquid" file under the "Sections" folder, Add the following code after this code.

            <div class="grid__item post-large--one-half">
              <div class="grid">
	<!--SC Custom Product Design -->
	{% if item.variant.metafields.CustomProductDesign.CPID %}
	<div class="grid__item one-third">
					  <a href="{{ item.url | within: collections.all }}">
						{% unless item.image == blank %}
						  {% capture img_id %}ProductImage-{{ item.id }}{% endcapture %}
						  {% capture wrapper_id %}ProductImageWrapper-{{ item.id }}{% endcapture %}
						  {%- assign img_url = item.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
						  {% include 'image-style' with image: item.image, width: 210, height: 245, wrapper_id: wrapper_id, img_id: img_id %}
						  <div id="{{ wrapper_id }}" class="cart__image-wrapper supports-js">
							<div style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%;">
								{% if item.variant.metafields.CustomProductDesign.FrontImage %}
								<a href="{{ item.variant.metafields.CustomProductDesign.FrontImage}}">
								  <img class="sc-cart-img" src="{{ item.variant.metafields.CustomProductDesign.FrontImage}}"
			  style="width:100px;"  alt="{{ item.title | escape }}" />
								</a>   
								{% endif %}
								{% if item.variant.metafields.CustomProductDesign.BackImage %}
								<a href="{{ item.variant.metafields.CustomProductDesign.BackImage}}">
								  <img class="sc-cart-img" src="{{ item.variant.metafields.CustomProductDesign.BackImage}}"
			  style="width:100px;"  alt="{{ item.title | escape }}" />
								</a>   
								{% endif %}              
							</div>
						  </div>
						{% else %}
						  <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
						{% endunless %}
						<noscript>
						  <p><img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"></p>
						</noscript>
					  </a>
					</div>
					<div class="grid__item two-thirds">
					  <a href="{{ item.variant.metafields.CustomProductDesign.Product_URL }}&ex_cp_id={{ item.variant.metafields.CustomProductDesign.CPID }}&ex_v_id={{ item.variant.id }}" class="h5">
						{{ item.title }}
					  </a>
					  <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove">
						<small>{{ 'cart.general.remove' | t }}</small>
					  </a>
					</div>
				  {% else %}
	<!-- ALL existing line item rows will go here CODES GOES HERE. -->

Please see the following screenshot for clean overview:

 

Step 5: Go to "collection-template.liquid" file under the "Sections" folder, Add the following code just after this code {% for product in collection.products %} like as below screenshot.

        <!--SC Custom Product Design -->
          {% if product.metafields.CustomProductDesign.IsHidden == 1 %}
          {% else %}

Please see the following screenshot for clean overview:

 

Step 6: Go to "customers/order.liquid" file under the "Templates" folder, Add the following code just before this code {{ line_item.title | link_to: line_item.product.url }} like as below screenshot.

                  <!--SC Custom Product Design -->
                  {% if line_item.variant.metafields.CustomProductDesign.CPID %}
                  {{ line_item.title | link_to: line_item.variant.metafields.CustomProductDesign.Product_URL }}
                  {% else %}

Please see the following screenshot for clean overview:

 

Step 7: Go to "theme.js" file under the "Assets" folder, Add the following code before this code this.optionSelector = new Shopify.OptionSelectors( like as below screenshot.

	//Start: SC Custom Product Design
		if (typeof CP_Update_Data_URL == 'function')
		CP_Update_Data_URL(variant);
	//End: SC Custom Product Design

Please see the following screenshot for clean overview:

 

5. So your application has installed. Now go to “Apps” menu of Admin Dashboard and click on the “Custom Product Design” Apps link.

6. Now click on “Appearance Settings” menu in the right top corner to customize your Design Toolbox.

7. Go to the next tab “Manage Product.” Here you will see all the product. In the right side you will find “Customization Settings” options. Just set the “Customization Price” and Upload Front and Back Image or only front image to show on the Frontend Design view.

8. Now go to “Manage Logos” menu. Click on “Add Files” link and select Image/Icon/Clip-Art files. You can select single or multiple items. After select files, click on the “Start Upload” button and all items will be upload simultaneously. You can “Cancel Upload” and Delete single/selected/all items at a time from this panel.

9. For more Information or Documentation go to “Help” menu.