User Manual Quickstart Video Tutorials General Concepts Buyer Side Buyer Side Appearance Settings Sticker Snippets Layout Snippets Engraving Styles and Form Fields Flex Designs Sub Documents Scripting Workflows Template Types Frame Features Resources Account Portal Style Reference Integrations Woo Commerce Shopify Shopify App Install App Configure the Shop Create First Product Install App Blocks Shopify Pluginless Bubble Hp Site Flow 3D Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api Price Display Glossary Changelog Bugs Limitations Acknowlegements

Shopify App

How to Install and Configure the Printess Shopify App for First Use

Install App

Install the Application

After the Printess app installation, no subscription is active. You will have to choose between a 14 days free of charge trial or one of the monthly based subscriptions.

Note: During the installation process you will be asked to provide access to some of your shop data.

Configure the Shop

A 5 minute video guiding you through all the steps of this tutorial is available:

The Printess Shopify app is fully optimized for use with all the new Shopify 2.0 themes and mechanics.

To let customers customize their products and see their creations as thumbnails in the shopping cart, you just need to install a couple necessary app blocks in the shop theme. No worries though, this is a breeze.

To edit the theme you need to make sure that there is at least one product existing in your Printess account, as only available pages may be edited.

Create First Product

So let’s go ahead and create your first Printess product! This is done in the Printess app itself. First we need to start the app. Go to apps and click on Printess.

Start Printess App

Next, click on Create new product which will open the Printess Product Wizard.

Create new product

Enter a product name here and click Select design template.

Create new product 1

On your first product, the wizard will tell you that you do not have any templates yet. Click on “Printess Editor” to open the designer in a new tab and create one.

Create new product 2

The Printess Template editor will open, displaying our ready-made samples. To use one of these just select New on the left tab of the Editor and choose whichever sample you prefer (e.g. our sleek Business Card sample).

Create template

A Printess document template has 2 states / versions. The initial “unpublished” state which is used to create or modify the template and the “published” state which is the one displayed at your store front. You will have to publish your template to make it available inside the shopify app. On the top drop down menu (File menu), click on Save as, and give it a name (e.g. Test Product).

Save and publish template

Provide a name and click on Save.

Save and publish template 1

To publish the template, open the file menu and click on “Save & Publish”

Save and publish template 2

Click on “Publish” to finalize the publishing.

Save and publish template 3

Now, go back to the printess product configurater inside the Printess app. Inside the template selection Dialog, click on the refresh button to reload the list of available templates. Your newly created template should be listed there.

Select template 0

Click on your template in order to use it for the new printess product. The template selection will disappear and the product wizard will display the selected template:

Select template 1

To continue the product configuration, click on the Next button on the top right corner.

Continue configuration

Provide a base price and click on the Create Product button on the top right corner.

Create shopify product 2

A short description of your product is shown. Click on Create Product to confirm your product creation.

Confirm product

Click on Close to continue the app configuration or on Go to new product to have a look on the created product.

Confirm product 1

Install App Blocks

Now its time to install the necessary app blocks to let buyers customize their individual products. To start the process got to the Theme editor by clicking on Customize under the Online Store - Themes topic.

Customize theme

Customize theme 1

Open the product editing template by clicking on the template selector on the top of the screen and select Products.

Edit product theme 1

We strongly recommend using a specialized page for personalized products. The plugin needs alternated versions of the standard shopify add to basket button and the variant selector. Also, the plugin currently does not support the quantity selector as higher quantities than 1 rarely make sense on personalized products. We recommend using seperate pages for personalized and non personalized products to ensure all standard shopify functionalities for non personalized products.

To create a new page for personalized products, select Create Template in case you are not having created a page for these already (otherwise open the already existing page by selecting the page name).

Create product page 1

Provide a new page name and select another existing product page that should be used as base for the new page.

Create product page 2

On the product Template you normally have an Add to Cart and Buy Now button. For customizable Printess products, these buttons should be replaced with a Customize button, as the products can only be added to the basket after the customer has configured them. The Printess App has an app block for this.

Click on Add Block and select the Printess Customize button to insert the app block.

Insert App button

After the Customize button is inserted, you need to move the app block to a position above the Buy button block.

Insert App button 2

Hover with the mouse over the Buy button block and make it invisible by clicking once on the visibility icon

Insert App button 3

The Printess app block will automatically show a Customize button in case of a Printess product and will also show the normal Add to Cart button in case of a standard Shopify product.

Configure Buttons

Note: You can configure the captions and appearance of the buttons at any time by selecting the app block.

Configure Buttons 1

To see the Customize button in action, click on it a second time. The Printess Editor will open automatically.

As the plugin currently does not support the quantity selector, hide it, by clicking on the the quantity selector block and the visibility icon:

Hide quantity selector 1

The plugin comes with its own variant selector. So hide the default one by selecting the Variant picker and clicking on the visibility icon.

Hide variant selector 1

Click on the Add to basket button on the top right corner and wait until the product is saved and the shopping basket page is loaded into the theme editor.

Go to cart theme

The Cart page can also be directly opened by using the page menu that has been used to open the product page.

Go to cart theme 1

On the Cart page, click on Add Section

Add Line Items section

At the bottom of the drop-down that opens up you’ll find the printess app blocks.

Select Printess block

Select Customized Line Items to add this block to the Cart page.

Drag the App block above the Items block.

Position App block

Set the items block to invisible by hovering over it and clicking once on the visibility icon.

Remove old section

The added Your cart block can be customized by selecting it.

Configure Section

Save the changes to the theme. Click on the Save button on top right of the theme editor.

Save Theme changes

In case you created a seperate product page for personalized products, close the theme editor and open the product configuration for your product.

Open product configuration

On the most right column of the product configuration, search for the Online store Topic and change the template to the new one.

Change product template configuration

Click on the save button on the top right of your browser to change your product changes.

Save product changes

Congratulations, you have just configured your shop to be able to sell personalized products like never before!