Shopify Business Card Design

business card design for shopify


Thank you for purchasing our amazing “Shopify Business Card Design” Apps. 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 to get everything you need. Thank you so much!

“Shopify Custom Business Card Design” app is a shopify module which is used to easily design or customized business card.

Customers are instantly able to design their own card and this is easy way to design from online. Just click a button and select or upload icon then add text to any position of the card.

By this powerful app customer can design the business card as per their need such as add name, designation, address, contact details etc. by different types of Color, Font, Size and Formats.

User can upload Logo or Images in the card and also change the front and back Background of Business Card. User can upload multiple images and drag the image and text on different positions.

Customer can “Add to Cart” the card with custom price. Shop owner can pre design the business card from admin panel and set it to the frontend.

“Shopify Custom Business Card Design” app has some excellent features and easy to setup. This app is more flexible and compatible with many existing apps in the Shopify repository. This app is fully customizable. Users can easily configure the app into the new or existing shopify store.

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.

 

1. Login your Shopify Store in Admin panel.

2. Now hit our App URL and click on 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.

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 Business Card Design Application “Code” on the following files. (Update this template files: product.liquid and cart.liquid)

Step 1: Add the following code just after “Add to Cart” button code in product.liquid file. 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 Custom Business Card Designer -->
<div id="dv-customized-product" style="display:none;" data-url="{{ product.variants.first.id }}" ></div>
    <script type="text/javascript" src="/apps/business-card-design/scripts/cp_product.min.js"></script>
<div id="sc-cp-app-info-150812" data-cp-design-it-btn="{{ shop.metafields.BusinessCardDesign.cp_design_it_btn }}" ></div>
<!--End: SC Custom Business Card Designer -->

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

 

Step 2 (a): Add the following CSS and JavaScript code in the beginning of cart.liquid file. These codes are for showing Popup in the Cart page’s “View Custom Design” link.

<!--Start: SC Custom Business Card Designer -->
<style type="text/css">
 
  .sc-view-biz-custom-design
  {
    font-size:1em;
    color:#5F8D3E;
    text-decoration:underline;
    cursor:pointer;
    margin-top:10px;
    font-style: italic;
  }
  .wncd-biz-preview-popup-cart
  {
    background: #F3F5F5;
    width:600px;
    height:300px;
    position:fixed;
    top: 50%;
    left:50%;
    margin-left:-300px;
    margin-top: -150px;
    z-index:99999;
    display:none;
  }
  .wncd-biz-preview-popup-close
  {
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
  }
  .wncd-biz-preview-top
{
    background:#333332;
    padding:10px;
    color:#FFFFFF;
}
  .wncd-biz-preview-popup-content
{
    padding: 10px;
    text-align: center;
}
  .wncd-biz-preview-popup-cart img
  {
    height:140px;
    padding:10px;
  }
  .wncd-biz-preview-popup-content .img-div
  {
    display:inline-block;
    border:1px solid #e1e1e1;
    margin-right:15px;
    margin-top:10px;
  }
 
  .wncd-biz-overlay
  {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    position: fixed;
    right: 0;
    top: 0;
    z-index:9999;
    display: none;
  }
</style>
<script type="text/javascript">
$(document).ready(function()
{
  if($('.sc-view-biz-custom-design').length>0)
    {
        $('.sc-view-biz-custom-design').on('click', function(){
          
          
          $.ajax({
              type: 'POST',
            url: '/apps/business-card-design/app-front/custom_design/get_custom_design_by_uid',
            data: {custom_id: $(this).data('img_url')},
            success: function(data)
            {
              if(data)
              {
                $('.wncd-biz-preview-popup-content').append(data);
                  $('.wncd-biz-preview-popup-cart').show();
                  $('.wncd-biz-preview-popup-cart').css({'top':'50%'});
                  $('.wncd-biz-overlay').show();
              }
            }
          
          });
          
        });
      
      
        $('.wncd-biz-preview-popup-close').on('click', function()
        {
              $('.wncd-biz-preview-popup-content').html('');
              $('.wncd-biz-preview-popup-cart').hide();
              $('.wncd-biz-overlay').hide();    
        });

    }
});

</script>

<!--End: SC Custom Business Card Designer -->

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

 

Step 2 (b): Add the following code before the cart remove button code. These codes are for showing “View Custom Design” link in the cart page.

<!--Start: SC Custom Business Card Designer -->
                {% assign propertySize = item.properties | size %}
                {% if propertySize > 0 %}
                  {% for p in item.properties %}
                    {% if p.first == 'cp_id' %}
                     <div class="sc-view-biz-custom-design" data-img_url="{{ p.last }}"><i>View Custom Design</i></div>                         
                    {% else %}    
                      {% assign first_character_in_key = p.first | truncate: 1, '' %}
                      {% unless p.last == blank or first_character_in_key == '_' %}
                        <br>
                        {{ p.first }}:

                        {% comment %}
                          Check if there was an uploaded file associated
                        {% endcomment %}
                        {% if p.last contains '/uploads/' %}
                          <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                        {% else %}
                          {{ p.last }}
                        {% endif %}

                    {% endunless %}
                    {% endif %}
                  {% endfor %}
                {% endif %}
<!--End: SC Custom Business Card Designer -->

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

 

Step 2 (c): Add the following code just bottom of the cart.liquid file.

<!--Start: SC Custom Business Card Designer -->
<div class="wncd-biz-preview-popup-cart">
  <div class="wncd-biz-preview-popup-close">X</div>
      <div class="wncd-biz-preview-top">Preview Design Image</div>
      <div class="wncd-biz-preview-popup-content">
      </div>
</div>
<div class="wncd-biz-overlay"></div>
<!--End: SC Custom Business Card Designer -->

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

 

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

6. Now go to “Manage Products” tab. Here you will see all the products. In the right side you will find “Add Customization” options. Upload Front and Back Image of Business Card and click on “Add Customization” button. After click on the button you will see “Design It” button. You can pre design the business card from here.

7. Click on next tab “Appearance Settings” in the right top corner to customize your “Design It” button.

8. For more Information or Documentation go to “Installation Instructions” menu.