Go through the following steps in order to ensure correct and procedural installation of PrintXpand’ Product Designer and integrate it with your Shopify ecommerce store.
- Add ‘PrintXpand’ app in your store
To add PrintXpand app in your store follow the below steps:
Step-1: Go to the Shopify app store page and search the “Tshirt & Product Designer” app.
Step-2: Select the PrintXpand’ app and complete the process by clicking the Add app.
- Theme Changes
To customize theme files, follow the below steps:
Step-1: From “Shopify Admin”, select Online Store.
Step-2: Duplicate themes to create a backup copy.
Step-3: Select Actions > Edit code.
- Add Snippet Files
Once the app is successfully added to the store, all the required snippets are automatically added to the active theme. Under “Snippets”, find these files:
➔ PrintXpand-cart.liquid
➔ PrintXpand-product.liquid
➔ PrintXpand-custom-login.liquid
For any that don’t exist:
Step-1: Select Add a new snippet.
Step-2: Enter the correct snippet name in the “Create a new snippet called” field.
Step-3: Select Create snippet.
Step-4: Copy and paste the code found in each of these links into their respective files:
➔ PrintXpand-cart.liquid
➔ PrintXpand-product.liquid
➔ PrintXpand-custom-login.liquid
Step-5: Select Save.
- Add Assets Files
All the required Assets are automatically added to the active theme, after the app is successfully added to the store. Under “Assets”, find these files:
➔ PrintXpand-standalone.css
➔ jquery-1.10.2.min.js
For any that don’t exist:
Step-1: Select Add a new asset.
Step-2: Either upload an asset file or enter the correct Asset name and its extension(CSS/js) in the “Create a blank” field.
Step-3: Select Upload Asset/Add Asset.
Step-4: Copy and paste the code found in each of these links into their respective files:
➔ PrintXpand-standalone.css
➔ jquery-1.10.2.min.js
- Edit theme.liquid
Under “Layout”, select theme.liquid.
Add following code in theme file inside <head> tag:
{{ ‘PrintXpand-standalone.css’ | asset_url | stylesheet_tag }}
{{ ‘jquery-1.10.2.min.js’ | asset_url | script_tag }}
Note: Ignore above last if jquery is already included.
- Edit product-template.liquid file
Under “Sections”, select product-template.liquid.
Add following code in starting of file:
{% include ‘PrintXpand-product’ %}
Find
{% capture “form_classes” -%}
and add following code before: “{%- endcapture %}”
{{ PrintXpand_product }}
Add this code where you want to show designer tool button:
{%if current_variant.available%}
{{ PrintXpand_designer_button }}
{%endif%}
- Edit product-card-grid.liquid
Under “Snippets”, select product-card-grid.liquid.
Add the following code at the start of the file:
{% include ‘PrintXpand-product’ with product %}
Add the following variable as a class where image tag placed:
{{ PrintXpand_product_img_class }}
Add this variable as an attribute where image tag placed:
{{ PrintXpand_product_img_attr }}
Add this code where you want to show designer tool button
{%if product.available %}
{{ PrintXpand_designer_button }}
{%endif%}
- Edit cart-template.liquid
- Under “Section”, select cart-template.liquid.
- Find the section that with:
{% for item in cart.items %}
- Add below code after this:
{% include ‘PrintXpand-cart’ with item %}
- Find any reference of this code:
<img class=”cart__image{% if item.image == null %} hide{% endif %}” src=”{{ item | img_url: ‘x190’ }}” alt=”{{ item.image.alt | escape }}” data-cart-item-image>
- Replace them with the following code:
<a class=”{{ PrintXpand_item_url_class }}” {{ PrintXpand_url_attr }} href=”{{ item.url | within: collections.all }}”>
{% if PrintXpand_item_img_src != blank %}
<img class=”cart__image PrintXpand-item-img-{{ item.product_id }}” src=”{{ PrintXpand_item_img_src }}” alt=”{{ item.title | escape }}”>
{% else %}
<img class=”cart__image” src=”{{ item | img_url: ’95×95′, scale: 2 }}” alt=”{{ item.title | escape }}”>
{% endif %}</a>
- Find any reference of this code:
<a href=”{{ item.url }}” class=”cart__product-title” data-cart-item-title>{{ item.product.title }}</a>
- Replace them with the following code:
<a class=”{{ PrintXpand_item_url_class }}” {{ PrintXpand_url_attr }} href=”{{ item.url }}”>{{ item.product.title }}</a>
- Find any reference of this code:
{%- for p in properties -%}
{%- unless p.last == blank -%}
{{ p.first }}:
{%- comment -%} Check if there was an uploaded file associated {%- endcomment -%}
{%- if p.last contains ‘/uploads/’ -%}
{{ p.last | split: ‘/’ | last }}
{%- else -%}
{{ p.last }}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
- Replace them with the following code:
{% for p in item.properties %}
{% assign PrintXpand_product_property_first_character_in_key = p.first | truncate: 1, ” %}
{% unless p.last == blank or PrintXpand_product_property_first_character_in_key ==’_’%}
{%if p.first contains ‘Name Number’ %}
{{ p.first }}:
{% else %}
{{ p.first }}
{% endif %}
{% comment %}Check if there was an uploaded file associated{% endcomment%}
{% if p.last contains ‘/uploads/’ %}
{{ p.last | split: ‘/’ | last }}
{% elsif p.first contains ‘Name Number’ %}
{{ p.last | replace: “,”, “,” }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
- Find any reference of this code
<a href=”/cart/change?line={{ forloop.index }}&quantity=0″ class=”text-link text-link–accent” aria-label=”{{ ‘cart.general.remove’ | t }} {{ item.product.title }}”>{{ ‘cart.general.remove’ | t }}</a>
- Replace them with the following code:
<a href=”/cart/change?line={{ forloop.index }}&quantity=0″ class=”text-link text-link–accent {{ PrintXpand_remove_class }}” aria-label=”{{ ‘cart.general.remove’ | t }} {{ item.product.title }}”>{{ ‘cart.general.remove’ | t }}</a>
- Find any reference of this code
<input class=”cart__qty-input ” type=”number” name=”updates[]” id=”updates_large_{{ item.key }}” value=”{{ item.quantity }}” min=”0″ pattern=”[0-9]*” data-quantity-item=”{{ forloop.index }}”>
- Replace with
<input class=”cart__qty-input {{ PrintXpand_qty_class }}” {{ PrintXpand_qty_attr }} type=”number” name=”updates[]” id=”updates_large_{{ item.key }}” value=”{{ item.quantity }}” min=”0″ pattern=”[0-9]*” data-quantity-item=”{{ forloop.index }}”>
- Edit customers/login.liquid
Under “Template”, select customers/login.liquid.
Add below code at the top of file:
{% include ‘PrintXpand-custom-login’ %}
Add this line before login form complete:
<input type=”hidden” name=”checkout_url” class=”custom_login_url” />
Note: It’s mandatory to set Customer accounts with Accounts are optional from following path Setting->Checkout
- Email template changes
We must customize the email template to display designer images to the customer when they place a designer order. We recommended taking backup of all templates before customization.
Find Email template from path: Admin->Settings->Notifications
et these changes in line_items loop:
Find section with:
{% for line in subtotal_line_items %}
Add below code after this:
{% assign PrintXpand_img_url = ” %}
{% unless line.properties == empty %}
{% for property in line.properties %}
{% if property.first == ‘_Designer Image’ %}
{% assign PrintXpand_img_url = property.last %}
{% endif %}
{% endfor %}
{% endunless %}
Find below code as a reference:
{% if line.image %}<img src=”{{ line | img_url: ‘compact_cropped’ }}” align=”left” width=”60″ height=”60″ class=”order-list__product-image”/>{% endif %}
and replace with below code:
{% if PrintXpand_img_url != ” %}<img src=”{{ PrintXpand_img_url }}” align=”left” width=”60″ height=”60″ class=”order-list__product-image”/>
{% elsif line.image %}
<img src=”{{ line | img_url: ‘compact_cropped’ }}” align=”left” width=”60″ height=”60″ class=”order-list__product-image”/>
{% endif %}
Designer tool Backend Configuration for Shopify.
- After Installing the “PrintXpand” designer tool under the Shopify App, click on the Apps, you will get PrintXpand Designer Tool under the “Installed Apps”.
- By clicking on “PrintXpand Designer Tool” you will find 4-modules with their total available records count. Under these records, Configurations & User Manual options can be seen.
- By clicking on Configurations, the “Main Configuration” will appear. Here you need to insert the URL of “product designer tool” and API related details as per integration and configuration of the API from the Designer tool.
- Click on “Save configurations”. Hence, Your Shopify Ecommerce store is correctly configured with PrintXpand’ Product Designer tool
Designer Tool Front End Configuration for Shopify
Once the modules and their relevant data have been synchronized into the designer tool, you can manage the following configurations from the designer tool backend.
Go to: Stores → Configuration → Product Designer API Configuration
- General
You must insert the following details:
Source System Base URL: Insert your Source System Base URL.
i.e. https://domain.com/
Customer Login URL: Insert URL Source System Login.
i.e. https://domain.com/account/login/
Customer Logout URL: Insert URL Source System Logout.
i.e. https://domain.com/account/logout/
Customer Authenticate URL: Insert source system URL for “customer authenticate” to check customer login sessions.
i.e.https://domain.com/account/checklogin
Add To Cart URL: Insert source system URL for “Add To Cart”.
i.e. https://domain.com/save/cart/
Save Design URL: Insert Source system URL for Save/Update Design/Image.
i.e. https://domain.com/account/saveDesignerUrl/
Locale: Select your language for your store view.
Base Currency: Select default currency to display on your website for the designer tool.
- Third-Party System Information
Insert the following details of the Third-Party System Information.
App URL: Insert URL for your App.
API Key: Insert the API key of the source system.
Access Token key: Insert Token key of the source system.
- Header Configurations
You can manage the following header details of the Shopify user page.
Favicon Image: To specify the favicon image of the product designer page.
Logo Image: To specify the logo image for the product designer page.Logo Image Alt: To specify the text for the logo image.
