Tag Archives: online designer

Limit decoration processes by Affiliate store

Leave a reply

A question we’ve had quite a bit recently is ‘can you limit a decoration process by an affiliate store?’. Well, from an application perspective we don’t have a setting that allows a store to limit what decoration processes it supports however there are tricks you can do with a few settings and CSS to get a similar result. Here is how:

Hiding decoration processes in the designer

When the designer loads and the user clicks Add Text or Add Design they are prompted to select what decoration process to use. DTG, Embroidery, Sublimation or Screen Printing.

You can hide the buttons you don’t want using CSS.

Each button for Add Text and Add Design for each decoration process has a unique CSS select ID. They are:

For text:

  • DTG = #add_text_type_1
  • Sublimation = #add_text_type_2
  • Embroidery = #add_text_type_3
  • Screen Printing = #add_text_type_8

For designs:

  • DTG = #add_image_type_1
  • Sublimation = #add_image_type_2
  • Embroidery = #add_image_type_3
  • Screen Printing = #add_image_type_8

Using CSS you hide these buttons. The CSS is:

#add_text_type_1, #add_image_type_1 {
display:none;
}

This is hide the ‘Add DTG printing Text’ and ‘Add DTG Printing Design’ buttons.

You can add additional buttons to this same CSS by separating each ID with a comma. i.e.

#add_text_type_1, #add_image_type_1, #add_text_type_3, #add_image_type_3 {
display:none;
}

This hides both DTG (1) and embroidery (3).

Add this CSS in your Websites > Manage which store you want to change > Appearance and Customize Template CSS.

Hiding decoration processes from the product list on the website

This solution is not elegant but works. You need to change your product price display to only show blank product price. Again, not elegant but might get you what you are after.

To do this:

  1. Browse to Manage Fulfillment > Products and select Blank Product Behavior from the left side menu
  2. Under Product Behavior section check “Stores can customize” under Black product pricing display.
    bp_001
    If you don’t check this and change the setting here then all stores will adopt this change. Click Save to save the changes.
  3. Once done browse Websites and select Manage for the web store you wish to modify.
  4. Select the Website Pages tile.
  5. First on the Home page scroll down to the Body Settings panel and click Configure next to Blank products.
  6. Change Show prices for to ‘No Decoration’ price:
    bp_002
  7. Click Save to save your changes.
  8. You will also need to do this on you Create page under Body Settings and Create listing.

This will replace any previous mention of ‘Printing from…’, ‘Embroidery front…’ etc with ‘Decorate from’and the above CSS will hide the decoration buttons from the designer.

Remove the Disabled decoration processes from the Add Text and Add Design popup

1 Reply

In DecoNetwork it is possible to disable certain decoration processes to a location on a product. For example, the left chest area might support embroidery and screen printing, but you may have to disable embroidery on the larger full body area.

When a decoration process is disabled it appears with a red “Disabled” icon when Add Text or Add Design is selected:

deco_disabled1Some people prefer not to have the decoration process listed at all when it is not available for that area. For example:

deco_disabled2To achieve this simply add the following CSS in Websites > Select website > Appearance > Customize Template CSS.

.no_items .disabled {
display: none;
}

This will hide the display of disabled decoration processes when adding text or design items.

A simple but neat trick!

 

 

ISS Long Beach demonstration recording

Leave a reply

Did you miss attending to the ISS Long Beach show? Don’t worry! We recorded our demonstration and you can view it here:

You can check out some ISS Long Beach pics at our Facebook page album: https://www.facebook.com/media/set/?set=a.10151159331281324.436710.372925011323&type=3

Enable Facebook and Instagram in your DecoNetwork online designer

3 Replies

v51_facebook_instagram

Version 5.1 of DecoNetwork has a great new feature which allows you to have Facebook and Instagram in your online designer. The benefit to this is your consumers can browse their Facebook or Instagram photos and use them to decorate your products.

To enable Facebook and Instagram on your site:

  1. Browse to Websites and select the website you wish to enable the Facebook and Instagram integration on
  2. Select Configure Online Designer from the right-hand menu
  3. Browse down to Design Options and select Show designs from social networking platform
  4. Check Instagram and / or Facebook
  5. Click Save to save you changes

Take it tour by visiting our demo store and designing with our online designer.

Customizing your web store options

2 Replies

You may not be aware of the wealth of options you have to customise and tweak options for your DecoNetwork store. These are really useful options that can allow you website visitors to search for your products, more easily navigate around you site, or socially interact with comments, voting or sharing in social networks like Pinterest an Facebook.

This post highlights where to find these options and exactly what they are.

Accessing the Store Options

To access your store options browse to Manage Store > Store Settings and select the Options tab:

Explanation of the options:

1. Hide fulfillment center contact details:

This will display or hide the Fulfillment Center contact details under the Contact page.

2. Display dropdown menu:

This will display or hide a dropdown menu for menu items such as Products, Create and Designs.

3. Display shopping cart:

This will display or hide the “Cart” link at the top of supported templates (Excluding the Hub template).

4. Display recently viewed items:

This will display or hide the “Recent items” link at the top of supported templates (Excluding the Hub template). This option allows website visitors to see a list of recent items they have viewed on your site.

5. Display currency chooser:

This will display or hide the “Currency” selector at the top of each page. This options allows website visitors can change the display currency of prices in your site.

6. Display search box:

This will display or hide the search box in the navigation bar or on the top of each page. Website users can search for blank products, decorated products or designs on your site.

7. Display breadcrumbs:

This will display or hide the breadcrumb navigation beneath the menu on your site. The breadcrumb navigation allows users to find their way back to previous pages they visited. And yes, ‘breadcrumb’ is in reference to Hansel and Gretel!

8. Allow comments:

This will display or hide the comments field for decorated products and designs. This option allows visitors to your website make comments against decorated products or designs.

9. Allow voting:

This will display or hide the voting capability for decorated products and designs. This option allows visitors to your website to post a vote out of 5 stars against decorated products or designs.

10. Allow sharing:

This will display or hide the sharing capability for decorated products and designs. This option allows visitors to your website share your products by email, Pinterest or Facebook.

11. Allow online designer:

This will display or hide the online designer.

12. Allow gift certificates:

This will display or hide Gift Certificates for sale on your website.

13. Display ‘Create Store’ link:

This will display or hide the ‘Create your own online store!” option on your site. This option allows visitors to your website create their own affiliate store to sell their designs on your products.

14. Display phone number:

This will display or hide your phone number on your website. You can also choose to display the phone number in the footer, header or both of your website.

15. Designer Layout:

This option allows you to select the designer type for your website. The options are the traditional Inline designer or the new Popup designer:

Customizing your launch designer links

Leave a reply

When a customer on your DecoNetwork website views a blank product they can select one of the decoration process links to launch the designer and decorate your product.

By default these are standard links:

But with a little CSS styling you can make these links more attractive and increase the chance a customer will select them to decorate a blank product.

Below is some CSS you can copy and add to your DecoNetwork website to style your launch designer buttons.

Adding the CSS to your DecoNetwork website

First let’s sort out the important part – how to add the custom CSS to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and paste your CSS changes into the window.
  4. Click Save CSS to save your changes.

Example button styles and colors

Here are some sample CSS you can copy to style your product’s launch designer links:

Blue with “Customize with” text:

Copy the following CSS into DecoNetwork:

/* Blue "Customize with" start*/
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background-color: #1682E2;
 background-image: url("/uploads/10343058/File/customize_1.png");
 background-position: 4px 2px;
 background-repeat: no-repeat;
 border-radius: 3px 3px 3px 3px;
 color: #FFFFFF;
 padding: 5px 5px 5px 100px;
 text-decoration: none;
}
.personalize .meta.categories h5 a:hover {
 background-color: #005DC1;
}
/* Blue "Customize with" end */

You may want to modify the “Customize with” text which is actually an image referenced in “background-image: url(“/uploads/10343058/File/customize_1.png”);”. Create your own small image no more than 20 pixels high as a PNG with transparent background and upload it to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and upload your file using the Select File/Image button.
  4. Copy the image URL which will look similar to /uploads/10343058/File/customize_1.png and replace the value of the “background-image” property.

Blue button

Copy the following CSS into DecoNetwork:

/* Blue start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #499bea; /* Old browsers */
 background: -moz-linear-gradient(top, #499bea 0%, #1a5fbf 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#1a5fbf)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* IE10+ */
 background: linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1a5fbf',GradientType=0 ); /* IE6-9 */
 border: 1px solid #1a5fbf;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Blue end */

Silver button

Copy the following CSS into DecoNetwork:

/* Silver button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #e1ebec 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1ebec)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* IE10+ */
 background: linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1ebec',GradientType=0 ); /* IE6-9 */
 border: 1px solid #DCE1E1;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Silver button end */

Orange button

Copy the following CSS into DecoNetwork:

/* Orange button */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #fff45e; /* Old browsers */
 background: -moz-linear-gradient(top, #fff45e 0%, #febf04 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff45e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #fff45e 0%,#febf04 100%); /* IE10+ */
 background: linear-gradient(top, #fff45e 0%,#febf04 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff45e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
 border: 1px solid #FFE605;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 0, 0, 0.2) inset, 0 1px 3px rgba(255, 0, 0, 0.2);
}
/* Orange button end */

Charcoal button

Copy the following CSS into DecoNetwork:

/* Charcoal button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #505459; /* Old browsers */
 background: -moz-linear-gradient(top, #505459 0%, #000000 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505459), color-stop(100%,#000000)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #505459 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #505459 0%,#000000 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #505459 0%,#000000 100%); /* IE10+ */
 background: linear-gradient(top, #505459 0%,#000000 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505459', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(255, 255, 255, 0.6);
}
/* Charcoal button end */

Steel blue button

Copy the following CSS into DecoNetwork:

/* Steel blue button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #a7cfdf; /* Old browsers */
 background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* IE10+ */
 background: linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Steel blue button end */

Green button

Copy the following CSS into DecoNetwork:

/* Green button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #b6e026; /* Old browsers */
 background: -moz-linear-gradient(top, #b6e026 0%, #89bf24 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#89bf24)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* IE10+ */
 background: linear-gradient(top, #b6e026 0%,#89bf24 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#89bf24',GradientType=0 ); /* IE6-9 */
 border: 1px solid #89bf24;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Green button end */

Purple button

Copy the following CSS into DecoNetwork:

/* Purple button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #e570e7; /* Old browsers */
 background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop 
(100%,#a849a3)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
 background: linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Purple button end */

Red button

Copy the following CSS into DecoNetwork:

/* Red button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ff3019; /* Old browsers */
 background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
 background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Red button end */

Creating a round button

Sometimes you want something not so square, and round button is perfect for that! To turn your square button into a round button simple add the following property and value to the “.personalize .meta.categories h5 a” selector:

border-radius:99px;

Ensure this goes after the { and before the } on a new line in .personalize .meta.categories h5 a.

Have a play with our new, larger online designer!

6 Replies

Some great news everyone, we have a new, larger, easier to use online designer .

It is currently in Alpha, but would like feedback on what you think.

When this becomes available you wil be able to choose which designer you want to use on your site, the old one or the new larger one.

Oh,  nearly forgot,  here is the link to have a play  -

http://regtest403a.deco-apparel.com/designer/customize/691878?&bt=3&dpid=1&ma=4

Cheers,

Greg

Sneak peek – Screen printing in DecoNetwork!

Leave a reply

We’re excited to give you a quick sneak peek at some of the new screen printing updates that will soon be rolling out on DecoNetwork.

Add a screen print design in DecoNetwork Business Hub

It will be possible to add a screen print design in DecoNetwork Business Hub.

Select number of colors

Select the number of colors in the screen print design and specify the actual colors. DecoNetwork auto-detects if the artwork is on a dark garment and requires a white base. Prices are automatically calculated.

Re-use screens

DecoNetwork is smart enough to know a design can be used on multiple products. Therefore, when you add a design to a second product or collection of products DecoNetwork will prompt you to re-use an existing design or create a new one.

Screen print settings

Configure your DecoNetwork business and pricing rules for screen print including:

  • Screen set-up fee
  • Maximum number of colors per area
  • Minimum quantity per design. And yes, we allow a design to be split over multiple garments and styles!
  • World exclusive CorelDRAW powered website graphics engine with over 15 files formats for your Production and editable file thanks to our friends at CorelDRAW!
  • …plus a whole lot more!

As with all new DecoNetwork functions it is open for public beta for existing DecoNetwork site owners. Please visit http://www.deconetwork.com/beta to register your interest in participating in DecoNetwork beta.