[vc_row us_bg_video=”0″ height=”medium” color_scheme=”” us_bg_color=”” us_text_color=”” us_bg_image=””][vc_column][vc_row_inner disable_element=”yes”][vc_column_inner][us_cta title=”Visit Our New Support Center” color=”custom” bg_color=”#273b80″ text_color=”#ffffff” btn_link=”url:https%3A%2F%2Fbuildateam.zendesk.com%2Fhc%2Fen-us%2Fcategories%2F360001615812-Shopify-User-Guide-v2-|||” btn_label=”Visit New Support Center” btn_color=”custom” btn_bg_color=”#ffbb18″ btn_text_color=”#ffffff” btn_size=”22px”]We have updated our user guides. Please click this button to visit new support center –>[/us_cta][/vc_column_inner][/vc_row_inner][vc_column_text]
Revolutionize your online store! Offer an easy and engaging way to order custom made-to-order products.
Custom Product Builder is a unique tool that combines both the functionality for product customization ‘Build Your Own Product’ and product personalization (Add Monograms & Artwork) in one easy-to-use app with real-time product preview.
Our product configurator stacks transparent PNG layers on top of each other creating a complete product preview and allows changing components offering a photorealistic preview of the product in real-time.
Available Product Customizations:
Color Thumbnails: Product options listed as HEX color thumbnails. Recolor uploaded product images on the fly into any color using HEX. (i.e fabric, texture, material, mask layers)
Image Upload: Allow customers upload and preview an image in a pre-defined position. (i.e: Logos, Artwork)
Text Monogram Field: Allow customers to enter a short text w/ preview in a pre-defined position. Offer custom fonts or any of the pre-uploaded Google Fonts. Users can select fonts on the frontend.
Curved Text: Text with bridge & curved effects. Resizes space and letter height based on predefined width.
Text Engraving For Wholesale / Qty Based Unique Text Per Each Item With Templates: Allow wholesale customers add unique engraving per each item in the order. (i.e: Trophies, T-shirts, Gifts, Business Cards)
Wholesale Order / Size Breakdown: With the help of this category, you can split the total qty into multiple qty fields. Total qty will be calculated as a sum of several fields for entering the quantity. (i.e: Wholesale purchase order with different sizes, models, colors)
Quantity Breakdown: Offer price discounts based on the volume purchased. For example 10-100: $1, 101-200: $0.5 etc.
Price (Deposit) Percentage: You can set a deposit amount of the total product price as a percentage. In this case, the total_price parameter with the final price will be added to the product details in cart.
Text Thumbnails: Product options listed as text thumbnails. (i.e: Sizes)
Dropdown: Product options listed as a dropdown menu (i.e: Countries, Sizes) etc
Product Builder Features:
Unlimited variants.
Unlimited customizations.
Unlimited products.
Inventory tracking. SKU management.
Layer recoloring on the fly.
Over 12 translations available including Russian, Hebrew, Japanese, French, German..
Multi-currency Apps support.
Default Options.
Robust conditional logic rules offers an ability to show / hide options depending on previous user selection.
Product Image Gallery including videos and 3d objects
Ability to add custom CSS to match the theme
Ability to add custom JS to create new features
Mobile support
Create unlimited number of variants for your custom products bypassing the 100 variant limit.
Recolor uploaded images on the fly. No need to upload each color of the components.
This app is very flexible and can work with almost an unlimited number of product types: jewelry, apparel, cars, accessories, musical instruments, furniture, sports equipment, promotional products, print on demand suppliers.. We believe that the world would be a better place if more people could order custom products.
[/vc_column_text][us_cta title=”Visit Our New Support Center” color=”custom” bg_color=”#273b80″ text_color=”#ffffff” btn_link=”url:https%3A%2F%2Fbuildateam.zendesk.com%2Fhc%2Fen-us%2Fcategories%2F360001615812-Shopify-User-Guide-v2-|||” btn_label=”Visit New Support Center” btn_color=”custom” btn_bg_color=”#ffbb18″ btn_text_color=”#ffffff” btn_size=”22px”]We have updated our user guides. Please click this button to visit new support center –>[/us_cta][/vc_column][/vc_row][vc_row disable_element=”yes” height=”medium” color_scheme=”” us_bg_color=”” us_text_color=”” us_bg_image=”” us_bg_video=”0″][vc_column][vc_tta_tour][vc_tta_section active=”1″ title=”Overview” tab_id=”1499994016954-c2473f49-5a52″][vc_column_text]
The Custom Product Builder For Shopify User Guide.
Revolutionize your online store! Offer an easy and engaging way to order custom made-to-order products.
Our plugin works with png images of the same size with transparent backgrounds. Recommended size for the PNG images is 1500px X 1500px. Squares work best in general. Each png image represents a transparent layer with the product component on the product preview. The software stacks images automatically – showing different product parts on top of each other. You can create a full representation of the product and offer a true ‘Build Your Own Product’ experience.
Please note that if you upload big images (for example3500x3500px) each more than 1 MB the custom product page will LOAD VERY SLOW. So please use smaller images (up to 1500px).
In addition to product customization the plugin also has printable areas – buyers can add and preview art, text, monograms, logos on the product image.
This app is very flexible and can work with almost an unlimited number of product types: jewelry, apparel, cars, accessories, musical instruments, furniture, sports equipment, promotional products, print on demand suppliers.. We believe that the world would be a better place if more people could order custom products.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Preparing Product Photos” tab_id=”1546909248923-abdfd933-4cf4″][vc_column_text]Before creating a new product you should prepare photos to fit all the parameters. You can do it in Adobe Photoshop.
Please open it, and after that first of all you should:
1) create a new product ( File (1) –> New (2), or click Ctrl + N )
2) In “Options” window please select:
(1) Width: 1500 Pixels .
(2) Height: 1500 Pixels .
And then click on “OK” button (3).
3) Next step – you need to open the photo of your product
Click on “File” button (1), and “Open” button (2), or Ctrl + O
4) Then drag the product to a pre-created document 1500x1500px.
5) In “Layers” field click on the eye ( on the left of the “Background” button ) and disable Background layer.
6) In Сase if your Product photo larger than 1500×1500 px click “Ctrl+T” clamp “Shift” and pull around the corner.
7) After it we need to cut a Custom detail. You can make it in different ways. Please watch the video for better understanding.
Don’t forget that this detail should be on the same place as on the main product (Use New Layer).
8) Then we need to add another detail on the same place. Open New Photo and drag it on the main document.
9) Click on the “Layer 2” with the right mouse button (1) and select “Create Clipping Mask” (2) (you can use Ctrl + T to select the desired position for the new part).
Repeat these steps for each detail you want to customize.
10) Now you need to save every detail of your product.
Click on “File” button (1), then on “Save For Web…” (2), or Alt + Shift + Ctrl + S
After it select “PNG – 24” (3) and click on “OK” button.
Watch these videos or follow the steps below to learn how to create a simple custom product.
STEPS:
Go to Apps > The Custom Product Builder. Click ‘Create New Custom Product’ link
Fill in the basic product details (No worries, you can change them later):
Click ‘Next’. This is The Custom Product Builder Admin Interface.
Add a base image (It can be a background, an outline or the base layer of the custom product)
Create a New Panel:
Create a New Category:
Create Options:
Set Default Options
IMPORTANT: To ensure the custom product categories / options / custom layers are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Conditional Logic” tab_id=”1499994020112-39ecbff6-fdd0″][vc_column_text]
Conditional Logic:
Conditional logic allows showing and hiding panels, categories and individual options based on the selected option.
An example of conditional logic rules:
IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Printable Areas (beta)” tab_id=”1546907715007-73932ef8-30d9″][vc_column_text]Printable areas (for promotional products)
Printable Areas offer an ability to add images and logos to a predefined area and manipulate those images and text inside of that area. This is something that is used for Promotional Products or Tshirt design prints.
Please note that this feature is under active development and we are working on making it better.
To enable Printable Areas please click on the button that looks like a printer on the main product screen.
In the menu that appeared – click ‘Add New Printable Area’
Give it a title and enable ‘Text’ for offering text editor to your customers or ‘Upload’ to let them upload logos or artwork. Select which view this area is for.
Click ‘Save’.
Configure the green square on the product, that’s where the Printable Area will show up
Click Save again and close the Printable Area sidebar. (arrow button)
In order to make it work you would need to make one more step. Click – Add New Panel on the main screen. Give it a title. It can be sizes, qty or any other customization for the product. Without this step the tab for Printable doesn’t show up for now :/ You can hide the panel you don’t need via custom CSS.
Enjoy Printable Areas on your product!
IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Custom Layers” tab_id=”1499994463181-ca60fb82-d11f”][vc_column_text]
Custom Layers
Custom layers are one of the main parts of the system. With their help, you can create engraving on objects, upload a custom image to any part of the product, paint parts of the product without loading additional images. And much more …
Types of Custom Layers
Path – This type is used to create click areas and load custom photos on a product, bounded by the layer area.
Text – This type is used to add text to the product. For example, an inscription on a T-shirt or other object or engraving.
Image – This type is used to add image whose color can be changed later. Or adding textures to objects whose colors can also be changed.
Create Custom Layers
Steps to create “Path” Custom Layer
Click button. The form for creating a new layer has been opened.
Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Path
View: change view
Panel to select: The panel to which to go after clicking on the custom layer
Next, if you want to change the shape, the size of the layer and the position on the page, you must drag the layer or individual points with the mouse cursor. To delete unnecessary points, you need to press the Shift and click on it with the mouse.
Fill in the following fields in the Advanced tab
Use Color Hover – If you want to use color hover, turn on the switch. This functionality is only for painting the layer when it has hovered over the mouse
Image Upload – If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.
Fill in the following fields
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “File Upload” type only.
Click Save and collapse settings by pressing the button
Steps to create “Text” Custom Layer
Click button. The form for creating a new layer has been opened.
Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Text
View: change view
Panel to select: there is no need to fill
Text: add some text
Fill in the following fields in the Advanced tab
Font Size
Font Family
Font Color
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “Text Field” type only.
Click Save and collapse settings by pressing the button
If you want to add several fonts you must to create one Custom Layer for each font.
Steps to create “Image” Custom Layer
Click button. The form for creating a new layer has been opened.
Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Image
View: change view
Panel to select: there is no need to fill
Image: You need to upload PNG image with transparency and image positioning
Fill in the following fields in the Advanced tab
Colorize image layer – If you want to change colors of any texture, for example, aquaprinting pattern colors on any thing, you need turn on the switch.
Fill in the following fields
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located with “Color thumbnail” type only
Alpha Transparency: alpha transparency level.
<!–
Clickable Product Preview Image – Custom Layers:
Custom layers are clickable shapes overlaying customizable product parts on the image preview. When the user clicks on the customizable product part – the corresponding panel with available options will be activated.
–>
IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Upload Logos & Artwork” tab_id=”1508452969674-52a1abd2-218d”][vc_row_inner][vc_column_inner][vc_column_text]Predefined Image Upload Area.
If you want to allow your users upload some image, for example, print on a T-shirt, you need turn on the switch.
Inside one of the panels create a new category. You can call it ‘Upload Your Artwork’.
Create an option under the category i.e ‘Upload Image’.
Save. Click ‘x’.
Click on the ‘Custom Layers’ icon in the top left corner above the preview image.
In the panel that opened up on the right side create a new custom layer and select the fill in the fields:
In the general settings choose:
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “File Upload” type only.
In the advanced tab select the Panel > Category > Option (Image Upload) that was created in the first step.
Adjust the path on the image preview to the location where you want the uploaded artwork to show up.
Click Save and collapse settings by pressing the button
Layer colorization and on the fly
You can also recolor simple image components that you upload using layer colorization of HTML5 Canvas. You would need to create a
Create a new custom layer with “Image” type. How to do this, see the tab “Custom Layers”.
Create a new Panel with the “Color thumbnail” category and add some color options.
Enjoy the result
Now, the functionality is ready to use. Switch colors and your image will be painted in the right color without the need to upload new images.
Overlaying textures
Changing the colors of individual elements
IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.
With the help of this instruction you can not just add text, but give the buyer the opportunity to choose from the options for color, size and font. We present you a powerful tool for working with text layers.
One color, one font, one size.
For the most ideas, you do not need more than one type of font design. And you need to perform just a couple of simple actions.
If you want to allow your users add some text (monogram), for example, print on a T-shirt, you need to do the following:
Inside one of the panels create a new category. You can call it ‘Add Monogram’.
Create an option under the category i.e ‘Add Your Text’.
Save. Click ‘x’.
Click on the ‘Custom Layers’ icon in the top left corner above the preview image.
In the panel that opened up on the right side create a new custom layer and select the fill in the fields:
In the general settings choose:
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “Add Your Monogram” type only.
An example can be viewed from this link. The “Simple color” tab.
Multi color, multi font, multi size.
Sometimes it is necessary that there are a lot of fonts, colors and the possibility of resizing. In this situation, it takes a little longer, but the result is worth it.
Create a new custom layers with “Text” type. For each color a separate layer. For each font a separate layer. For each font size a separate layer. How to do this, see the tab “Custom Layers”.
Create a new Panel
For color switching create a new “Color thumbnail” category and add color thumbnail options.
For font switching create a new “Image Thumbnail” category and add image thumbnail options with uploaded samples of font images.
For size switching create a new “Text list” category and add text list options.
Create a new Panel with the “Text field” category and add text field option.
Set up the rulers in each Custom Layer
You need to make Custom layer shown if the user selects the desired color, size and font
An example can be viewed from this link. The “Multi color” tab.
This description is just an example. The way you set it up depends entirely on your imagination.
For better understanding the process of creating custom text please watch the following videos:
<!– First, create a new custom layer
After that, select the layer and fill in the information required
Now after typing the text, it will appear on top of the product image preview.
If you want to allow your customers upload text – you need to follow 2 more steps.
Create a new panel/category/option with type ‘text or image upload’.
And set up advanced settings for the custom layer that will connect it with the option created in the panel:
–>
IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”General Settings” tab_id=”1499994502993-abc5e064-a88a”][vc_column_text]
General Settings:
Select currency
Select layouts:
(columns tabs)
(columns list)
Preview Controls:
(buttons)
(arrows)
Change Themes:
IMPORTANT: To ensure the custom product categories / options / custom layers are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Private User Wishlist” tab_id=”1549889021508-b01ed7f1-01f1″][vc_column_text]A ‘Wishlist’ is a feature that helps customers to save their customized products and to get easy access to them even after closing the product. This feature can be private, so only the owner of the customized product can see his works, as well as public – so any other customer can see this ready customized product.
To add this feature to your website you should: 1) open any product in Custom Product Builder, and then push actions button where you should press ‘general settings’ button.
2) In settings window enable the ‘show “add configurations” button’ (1) and then press save (2)
3) – in left menu select ‘online store’, then press ‘themes’
In your current theme window select ‘actions’ button and in the menu press ‘edit code’ button.
4) – search for ‘customproductbuilder-initializer’ snippet (1), and make sure in highlighted div block (2) is this text:
6) search for ‘en.default.json’ file (1), add the following text (2) to this file, and then press the save button:
"private_gallery": {
"title": "My gallery",
"view_gallery": "View My Products",
"please_register": "Sorry, only registered users may have own gallery",
"register_account": "Login",
"product_thumbnail": "Product",
"product_title": "Title"
},
7) in left menu press ‘add a new template’ button (1), select ‘page’ in (2), call it ‘my-gallery’ (3), and then press ‘create template’ button (4)
8) replace all the content in ‘page.my-gallery.liquid’ (1) with the following text and press save button (2):
{% assign currentUserId = customer.id %}
<div class="section-title desktop-12 mobile-3">
<h1>{{ page.title }}</h1>
</div>
{% if currentUserId %}
<div class="{% if settings.pagelist == '' %}desktop-12 tablet-6 mobile-3{% else %}desktop-9 tablet-4 mobile-3{% endif %}">
<div class="rte"
data-cpb-my-gallery-customer-id="{{ customer.id }}"
data-cpb-my-gallery-shop-name="{{ shop.permanent_domain }}">
</div>
</div>
{% include 'my-gallery-view' %}
{% else %}
<div class="page-width">
<div class="empty-page-content text-center">
<h1>{{ 'customer.private_gallery.please_register' | t }}</h1>
<p>
<a href="/account/login" class="btn btn--has-icon-after">{{ 'customer.private_gallery.register_account' | t }}</a>
</p>
</div>
</div>
{% endif %}
{% if settings.pagelist != '' %}
<div id="page-sidebar" class="desktop-3 tablet-2 mobile-3">
<h2>{{ settings.page-sidebar-title }}</h2>
<ul>
{% for link in linklists[settings.pagelist].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
{% if settings.pagelist == '' %}
<p>You are seeing this message as you have yet to pick a linklist in the Pages and contact form section of the theme settings</p>
<p>In your admin click on Themes > Customize Theme > Pages and Contact form and choose a Linklist from the dropdown in the area marked Choose a linklist for page sidebar</p>
{% endif %}
</div>
{% endif %}
9) in folder ‘snippes’ press ‘create new snippet’ (1), and call it “my-gallery-view.liquid” (2), and then press create snippet button (3).
10) Open the created snippet, and then copy the text from this link:
Replace all the text in the snippet with the text copied from this link (1) and press save button (2)
11) Next step is to add a new page, so you should go to ‘online store’ in left menu (1), and there select ‘pages’ (2) and there click on ‘add page’ button (3).
12) In this new page write ‘My Gallery‘ in the title field (1), and choose ‘page.my-gallery’ in template suffix option on the right (2), and then press the save button (3).
13) Next step is to create a new collection, so you should go to ‘products’ on the left menu (1), and choose ‘collections’ (2) there. Then click on ‘create new collection’ button on the right (3).
14) In created collection write ‘All products’ in title field (1), in ‘conditions’ press ‘all conditions’ (2), also choose ‘product tag’ (3), ‘is equal to’ (4), ‘not gallery product’ (5), and then press the save button.
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Public Gallery” tab_id=”1549889956574-96f33a9a-0b56″][vc_column_text]A Public Gallery is a new feature that helps you create a special place in your online store, where customers will be able to share their own customized products and see a variety of of user-generated custom product designs.
If you want to add a public gallery collection you should:
1) Go to ‘products’ folder in the left menu (1), then click on ‘collections’ (2), and create a new collection (3).
2) Name it ‘public gallery’ (1), and in ‘conditions’ folder select ‘all conditions’ (2) and create two logic rules as it is shown in the photo (3). Then press save.
3) The next step is to create a navigation bar. So for this, you should go to ‘online store’ folder in the left menu (1), click on ‘navigation’ option (2) and in titles of the menu select ‘main menu’ (3).
4) on the bottom press ‘add menu item’ (1), name it ‘public gallery’ (2), in ‘link’ field select public gallery (3), and press ‘save changes’ button (4).
5) Next, in the left bottom corner go to ‘settings’ button (1), and there select ‘checkout’ (2)
6) In ‘customer account’ field select ‘accounts are optional’ option (1).
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Cloning a product” tab_id=”1508453639752-1e506fdb-471a”][vc_row_inner][vc_column_inner][vc_column_text]
If you would like to duplicate a product, here is how to do it:
1) Go to the list of created products
2) Choose the right product and click “Clone”
3) The cloned product is created and you can proceed to edit it
Configuring custom product image inside order confirmation emails and the shopping cart.
Configuring your shopping cart
In order to see the customized images inside the cart, please follow these steps:
1. Inside Shopify’s left menu, Go to ‘Online Store’
2. Click ‘Actions’ > ‘Edit HTML/CSS’
3. In the search field, look for a file called ‘cart-template.liquid’. If it does not exist, look for ‘cart.liquid’.
4. Look for the following code
{% if item.properties and item.properties._image %}
<img id="{{item.product.id}}" src="{{ item.properties._image }}" alt="{{ item.title | escape }}">
{% else %}
<img id="{{item.product.id}}" src="{{ item | img_url: '240x240' }}" alt="{{ item.title | escape }}">
{% endif %}
For further information or a more detailed step by step tutorial, please see the official documentation.
IMPORTANT:
Currently in order to have the custom images work in the cart you need to enable custom layers. Having custom layers enables canvas rendering and offers an engine for generating images for the cart.
In order to make a product show a customized product image inside the cart, create a custom layer and do nothing with it. Just set a name for it, and save the product.
Steps to create Custom Layer
Click button. The form for creating a new layer has been opened.
Click button “Add New Custom Layer”.The new layer added.
Click it in the Layer Selection Column.
Fill in the Title field and hit Save at the bottom of the custom layers window.
The next time you add to cart your product, it’s going to have the image inside the cart with the selected options.
In order to see the customized image that the user just selected inside the order confirmation email, please follow the following steps:
Configuring order confirmation email for customers
1. Inside Shopify’s left menu, Go to ‘Settings’
2. Click ‘Notifications’
3. Click ‘Order confirmation’
4. You will see two input fields. Please replace the field called ‘Email body (HTML)’ with the following snippet.
IMPORTANT: Replace means remove all the existent content of that field and replace with this one:
You have successfully updated the image in the emails sent to your customers.
Configuring order confirmation email for store owner
In order to see the customized image that the user just selected inside the order confirmation email, please follow the following steps:
Inside Shopify’s left menu, Go to ‘Settings’
Click ‘Notifications’
Click ‘New Order’, under ‘Templates’ section. You need to scroll down a little bit.
You will see two input fields. Please replace the field called ‘Email body (HTML)’ with the following snippet:
IMPORTANT: Replace means remove all the existent content of that field and replace with this one:
<p>Hello {{ shop_name }},</p>
<p></p>
<p>{% if customer.name %}{{ customer.name }}{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:</p>
<p></p>
<ul> {% for line in line_items %} <li>
{%if line.properties and line.properties._image%}
<a href="{{ line.properties._image}}"><img src="{{ line.properties._image}}" style="height:150px;" /></a>
{%else%}
<img src="{{ line | img_url: 'thumb' }}" />
{%endif%}
{{ line.quantity }}x {{ line.title }} {% if line.sku != "" %}(SKU: {{line.sku}}){% endif %} for {{ line.price | money }} each </li> {% endfor %} </ul>
<a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}">View order {{order_name}} </a>
{% if fulfillment_aborted %}
<p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>{% endif %}
<p></p><br>
{% if has_high_risks? %}<p><b>Security check:</b></p>
<p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
<p></p>{% endif %}
<p><b>Payment processing method:</b></p>
<p>{{ gateway }}</p>
<p></p>
{% if requires_shipping and shipping_address %}
<p><b>Delivery method:</b></p>
{% for shipping_method in shipping_methods %}<p>{{ shipping_method.title }}</p>{% endfor %}
<p></p>
<p><b>Shipping address:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<p></p>
{% if shopify_shipping_enabled %}
<p>Save time and money by <a href="{{ fulfillment_url }}">fulfilling with Shopify Shipping</a></p>
<p></p>
{% endif %}
If you know CSS, you can customize the themes by following this link. You can override theme classes and ids with custom CSS there.
You can also email us at support@buildateam.io email and request a free quote for custom development.
If you want to customize your loading screen you need to make a few simply steps
1. Go to your admin panel and go to the store setup
2. Upload a new image that you want to use (I used the URL of our logo as an example.)
3. Then go to your admin panel and go to the store setup
4. Go to Edit Code and find ‘customproductbuilder.css’ file there
5. Paste the section /*Loading*/ with your image URL there and save changes
Examples of Custom CSS
@font-face {
font-family: 'retina';
src: url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot?8606387872806150500");
src: url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot?%23iefix&8606387872806150500") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.woff?8606387872806150500") format("woff"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.ttf?8606387872806150500") format("truetype"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.svg?8606387872806150500") format("svg");
font-weight: normal;
font-style: normal
}
/* Please use this file to customize the syles of the custom product builder */
If you know JS, you can add custom JS that would load within the tool. You can manipulate DOM elements in a similar way that ‘Optimizely.com’ does it. It’s a very powerful tool that allows almost any type of theme customizations.
Examples of custom JS
Example 1
(function(){
function converPriceToKr(){
var price=$(shadowNode).find(".price");
var value=price.html().split("DKK")[1];
if(!value) return;
price.html(value+" kr");
}
setTimeout(function(){
var title=document.title;
var url=document.location.href;
var media=$("meta[property='og:image:secure_url']")[0].content;
var html='<span class="social-buttons">Share: <a href="https://twitter.com/intent/tweet?text='+title+'&url='+url+'" target="_blank" class="icon-twitter" title="Share this on Twitter"></a> <a href="https://www.facebook.com/sharer/sharer.php?u='+url+'" target="_blank" class="icon-facebook" title="Share this on Facebook"></a> <a target="_blank" data-pin-do="skipLink" class="icon-pinterest" title="Share this on Pinterest" href="https://pinterest.com/pin/create/button/?url='+url+'&description='+title+'&media='+media+'"></a> <a target="_blank" class="icon-gplus" title="Share this on Google+" href="'+url+'"></a> <a href="mailto:?subject=Thought you might like '+title+'&body=Hey, I was browsing Hornskov København and found '+title+'. I wanted to share it with you.%0D%0A%0D%0A'+url+'" target="_blank" class="icon-email" title="Email this to a friend"></a></span>';
$(shadowNode).find(".builder-actions").after(html);
var title='<h1 class="product-name">Custom Hat</h1>';
$(shadowNode).find(".panels-container").prepend(title);
converPriceToKr();
$(document.body).on("PRODUCT_BUILDER_LAYER_UPDATE", function () {
setTimeout(function(){
converPriceToKr();
},40);
});
},500);
})();
Example 2
;(function(){
/**
* Function wait CPB DOM elements to show up.
* Work in modern browsers.
* And execute callback.
*/
var cpbLoaded = function() {
if ($('div.cpb-option.cpb-option-type-img.cpb-active span').size()
&& $('div.cpb-option.cpb-option-type-color.cpb-active span').size()
&& !$('img[src*="loader-large.gif"]').size()) {
console.debug('CPB is loaded');
customJS();
} else {
window.requestAnimationFrame(cpbLoaded);
}
};
// Function for custom JS (wiil executed after CPB fully loaded)
var customJS = function() {
// Defines variables
var lsItemNames = {
firstCategoryIndexKey: 'cpb_first_category_item_index',
secondCategoryIndexKey: 'cpb_second_category_item_index'
};
var selectors = {
option: '.cpb-category span.option',
category: '.cpb-category',
clickDiv: 'div.cpb-option'
};
var categories = {
main: 0,
first: 1,
second: 2
};
var firstCategoryIndexKey = localStorage.getItem(lsItemNames.firstCategoryIndexKey);
var secondCategoryIndexKey = localStorage.getItem(lsItemNames.secondCategoryIndexKey);
if (firstCategoryIndexKey === null)
localStorage.setItem(
lsItemNames.firstCategoryIndexKey,
$('.cpb-option.cpb-active').eq(categories.first).parent().index()
);
if (secondCategoryIndexKey === null)
localStorage.setItem(
lsItemNames.secondCategoryIndexKey,
$('.cpb-option.cpb-active').eq(categories.second).parents('.option-type-color').index()
);
// Handlers functions
var clickOptionHandler = function() {
var categoryIndex = $(this).closest(selectors.category).index();
switch (categoryIndex) {
case categories.first:
localStorage.setItem(lsItemNames.firstCategoryIndexKey, $(this).index());
break;
case categories.second:
localStorage.setItem(lsItemNames.secondCategoryIndexKey, $(this).index());
break;
case categories.main:
setTimeout(function(){
var firstCategoryIndexKey = localStorage.getItem(lsItemNames.firstCategoryIndexKey);
var secondCategoryIndexKey = localStorage.getItem(lsItemNames.secondCategoryIndexKey);
// Select category spans if localStorage has values
if (firstCategoryIndexKey !== null)
$(selectors.category).eq(categories.first).find(selectors.clickDiv)
.eq(firstCategoryIndexKey).find('div').click();
if (secondCategoryIndexKey !== null)
$(selectors.category).eq(categories.second).find(selectors.clickDiv)
.eq(secondCategoryIndexKey).click();
}, 500);
break;
}
}
// Bind events globally
$(document).on('click', selectors.option, clickOptionHandler)
};
// Exec customJS after CPB loaded
cpbLoaded(customJS);
})();
And do you have a recommendation for the photo size for the background preview image?
I’ve seen squares work best so I would recommend 1000×1000 at least. Perhaps something like 1200×1200 would be
better. But varies depending on the product’s shape.
Customizing Loading Screen
If you want to customize your loading screen you need to make a few simply steps
1. Go to your admin panel and go to the store setup
2. Upload a new image that you want to use (I used the URL of our logo as an example.)
3. Then go to your admin panel and go to the store setup
4. Go to Edit Code and find ‘customproductbuilder.css’ file there
5. Paste the section /*Loading*/ with your image URL there and save changes
How to activate Custom Product Builder to show up on the frontend of my store.
Some customers are faced with the fact that the product of the online store does not display the Custom Product
Bilder. Here are the steps to quickly solve this issue.
1. Go to your admin panel and go to the store setup
2. Go to Edit Code and find 'product.liquid' and 'customproductbuilder-initializer.liquid'
files there
Important note! If you can’t find the 'customproductbuilder-initializer.liquid' file you must reinstall the app. If you don’t find this file after that maybe your theme isn’t supported by Custom Product Builder. In this case, please contact support (support@buildateam.io)
3. Open 'product.liquid' file, save {% section 'product-template' %} (or {% section
'product' %} sometimes) string to Notepad and then replace it with {% include
'customproductbuilder-initializer' %} string and save.
4. Open 'customproductbuilder-initializer.liquid' file and replace strings with the one saved earlier
in Notepad from the 'product.liquid' file and save.
How to remove configId and _image from cart item in store cart.
Some customers are faced with the fact that the cart item has configId and _image service properties.
Here are the steps to quickly solve this issue.
1. Go to your admin panel and go to the store setup
2. Go to Edit Code and find 'cart.liquid' file in templates folder
3. Open 'cart.liquid' file, and find this code {% if p.last != blank %}
4. Change this code to {% if p.last != blank and p.first != '_image' and p.first != 'configId'%}
5. The result need be like this
How to remove JS errors on pages from store (see console logs)
Some customers are faced with the fact that the after setup cpb on pages shown errors. Like this
Here are the steps to quickly solve this issue.
It arises because is already available jQuery other version for you. And need remove our jQuery plugin.
1. Go to your admin panel and go to the store setup
2. Go to Edit Code and find customproductbuilder-initializer.liquid' file in snippets folder
3. Open 'customproductbuilder-initializer.liquid' file, and remove this code {{ 'https://code.jquery.com/jquery-3.0.0.min.js' | script_tag }}
4. These steps will save you from JS of mistakes in the console
How to disable scrollable effect for main CPB image
Some customers are faced with the fact that the after setup cpb on pages main image is scrollable.
Here are the steps to quickly solve this issue if you need to make fixed image.
1. Go to CPB Global settings screen
2. Disable ‘Use Sticky Preview’ tumbler to Off Video mini tutorial
Does this product use full product images as the bundled product is configured, or does it use image overlays to update the image as the product is configured. Is it possible to use image overlays to populate the finished product image as a product is configured?
Our plugin works with png images of the same size with transparent backgrounds. Recommended size for the PNG images is 1500px X 1500px. Squares work best in general. Each png image represents a transparent layer with the product component on the product preview. The software stacks images automatically – showing different product parts on top of each other. You can create a full representation of the product and offer a true ‘Build Your Own Product’ experience. Here is a folder with sample product images: https://drive.google.com/open?id=0BxXbvqoSPF5FMEFrdEdvejYxZk0
We have one store that also uses transparent layers to recolor the base product wireframe: gatcreek.com – one layer for base, 1 layer for grain, 1 layer for different colors.
Does your extension modify the PDP layout at all or is this module solely concerned with how the product image is generated during the configuration process?
Our extension fully replaces the default product page details section. Both the image part and the product option selectors part.
Can I display the custom product on other pages inside Shopify?
Yes you can add the custom product you created to any page of your choice in shopify… Example: riplaces.com
Here is a sample code snippet to do this:
{% assign product = all_products['riplaces-custom-set-4'] %}
{% include 'customproductbuilder-initializer' %}
How to display custom product image inside of the shopping cart?
Here is a sample code snippet to display custom product image inside of the shopping cart. Please note that in the checkout the image will still be standard. Only Shopify Plus allows editing checkout. So make sure to have a good base image of your product.
Please email to support@buildateam.io if you have any questions or problems.[/vc_column_text][/vc_tta_section][/vc_tta_tour][vc_row_inner][vc_column_inner][/vc_column_inner][/vc_row_inner][vc_row_inner disable_element=”yes”][vc_column_inner][vc_column_text]You will be redirected to our new support center in a second. Please accept the redirect at the top of the page.
//jQuery(document).ready(function(){
// if ( window.location.pathname == “/shopify-user-guide/”) {
// alert(‘Your are being redirected to our new support center.’);
// setTimeout(function(){
// url = “https://buildateam.zendesk.com/hc/en-us”;
// jQuery(location).attr(“href”, url); }, 3000)
// };
//});
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]
The form for creating a new layer has been opened.
The new layer added. Click it in the Layer Selection Column.
