Picture Your Life : ★ SELLER HELP




Seller Help

Setting up a Store

These instructions are applicable for setting up all types of stores. Premium and VIP Stores are essentially upgraded Free Stores, so lets first open up a Free Store.


Step 1.

Open a free store

Click here. You will be prompted to create an account if you haven't done so already.

Enter your PayPal email address to get paid

In order to be paid your earned commissions, you'll need to enter your PayPal email address. When logged in, go to Payee Information on the left menu, or click this link to enter it now: http://www.pictureyourlife.com.au/Stores/Payee.aspx


Step 2.

Upgrade the free store

You can open an unlimited number of stores and upgrade any you choose. To view and manage all your stores click here or click on the top left menu and select Members Area > My Stores > Manage Stores. On the right side are store upgrade options. Click on the type of upgrade you are choosing and follow the instructions.


Step 3. (VIP)

This step is completed outside of our website.

Buy a domain name

We recommend GoDaddy, NameCheap or OnlyDomains. Search for the domain that you want on their sites and complete the registration there.

Edit the nameservers

The nameservers will need to be changed to:
    ns1.vip-stores.com
    ns2.vip-stores.com
Instructions to change the nameservers for Only Domains | NameCheap | GoDaddy


Step 4. (VIP)

This step is completed in Store Profile on our website

Enter your domain name on your VIP store profile

Click here (or click on the top left menu on any page and select Members Area > My Stores > Manage Stores) and click on Store Profile on the upgraded VIP Store . Scroll down to where it says Domain Name (VIP Store only) and enter the domain name you bought there.

When this step is completed, all VIP features will automatically activate.

Seller Tutorial Videos

Note, the following videos do not have any audio, they simply show the steps taken.

Customising the Templates


Our Free, Premium, and VIP store templates are all completely customisable.

We have provided complete instructions below on how to completely modify exisiting templates to suit your own brand and design.

This assumes some basic knowledge of web design. If the below instructions seem too foreign to you and to save the spiraling costs of hiring a web developer, we can do the work for you for AU$200.

If you haven't already done so, create a new store, it can be used as a Free store or can be upgraded to a Premium or VIP Domain store.


Add Template

Log in if necessary

Step 1: Go to Account from the top menu, then click Manage Stores (or use and bookmark this link: http ://www.pictureyourlife.com.au/Stores/AllStores.aspx)

Step 2. Click Add Template from the store you are customising

Add Template


Step 3: Choose your template based on the general colour or feel you are after. 21a-Super and 24a-Super are the most customisable. Click "Add to My Template" to select.

select021a
.

Modifying the Template

Repeat step 1 above if necessary

Step 4: Now click My Template from the store you are customising

My Template


Step 5: Click Customise from the active template (the one that has a tick in the Active column)

Template list


Change the template sections

You will then get a screen that displays the following sections. Click on any section on the left to perform the instructions explained here.

Scroll down further if you wish to see more detailed instructions.

StoreControl
The main options for how the products are displayed
StoreBaseControl
Show or hide the store name on the page
MostTopHtmlBlock
Insert your custom HTML/Java/CSS at the very top of the page
TemplateHeaderHtmlBlock
Choose "Hidden for all pages" to replace with HTML above
StoreInfoSupportPhone
If not hidden, can put a number or HTML/Java/CSS code
StoreInfoTitle
If not hidden, the text entered as the title of the store shown here. 
TemplateFuncHtmlBlock
The left menu. Can hide for all pages or set which pages to be visible on, such as member areas
TopLeftHtmlBlock
Can add your own HTML/Java/CSS code to the menu at the top
CategoryGroupControl
The "hot products" cloud. Choose whether to customise or hide.
MenuControl
Store Menu
Ignore
StoreSearchControl
Store search bar, can edit or hide.
ProductListControl
Pre-created products list. Can customise or hide.
SectionControl
Edit the look of how pre-designed products are displayed
StoreNewsLetter
Select Hidden for All Pages (not currently functional)
BottomLeftHtmlBlock
Can add your own HTML/Java to the menu at the bottom
TopBarControl
Top Bar
The top menu, can be customised how you wish
SuperTopBarControl
Super Top Bar
Not used for this level of store
TopHtmlBlock
Insert your HTML/Java at the top just before the main content
StoreNavigator
A "cookie trail" showing customers which area they are on
StoreHelpPanel
Can be customised, or select Hidden from all Pages to remove
MostBottomHtmlBlock Add your own HTML/Java to the footer of the page

Hiding sections

To hide a section such as the template header graphic choose "Hide for all pages" from the "1.Visible" dropdown menu and click "Save."

If you only want to show a section on specific pages, such as the left menu on member area pages, choose "Visable for specific pages" then click the box of each page you want it to show on.

 Show hide

Entering your own code

Now we can create the template to your liking with HTML and CSS etc. The place to enter the code is in the following sections:
  • MostTopHtmlBlock - as implied, the top most part of the template
  • TopHtmlBlock - the top of the content after the store title etc
  • TopLeftHtmlBlock and BottomLeftHtmlBlock (if you are not hiding the side menu/panel)
  • TemplateFooterHtmlBlock - the bottom of the main content
  • MostBottomHtmlBlock - as implied, the most bottom part of the template 

  • And also:
  • Store Profile - Useful for features not dependant on templates, such as Google Analytics, web fonts, etc.
  • Custom Pages - You can use html, css, java scripts to create your own stylish or feature-rich pages
html

Server Controls

You can disable sections as explained above and display them elsewhere in your template.

Copy and paste the below server controls where you would like them to appear (Custom Pages or template sections that are named MostTopHtmlBlock, TopHtmlBlock, TopLeftHtmlBlock,BottomLeftHtmlBlock, TemplateFooterHtmlBlock, or MostBottomHtmlBlock.)

Server controls (copy/paste) Description
(#Content#) Content of your store, Must include in your store template
(#WebFile Url="t1.gif"#) Image Url, you must have t1.gif in your file manager.
(#StoreHtml ID=XXXXHtmlBlock#) Custom html block
(#StoreInfo StoreField="StoreTitle"#) Store Title
(#StoreSearchControl#) Store search control
(#ProductListcontrol#) Product list control
(#Sectioncontrol#) Store category tree control
(#StoreNewsletter#) Store news letter control
(#CustomPageTreeControl#) Store custom page tree control
(#StoreNavigator ID=StoreNavigator#) Store navigator control
(#StoreHelpPanel#) Store help panel
(#TopBarcontrol#) Top Bar of VIP Store
(#CartCountControl#) Show the item count in the cart, if cart is empty , show nothing.

Enhancements

Please read the "Templates" section first to know how to make the following enhancements. It requires copy/pasting the provided code below into the relevant sections previously explained.

Change the font

You can use the example code below to change the font to Raleway. Copy/paste it into any MostTopHtmlBlock, TopHtmlBlock, TopLeftHtmlBlock, BottomLeftHtmlBlock, TemplateFooterHtmlBlock, or MostBottomHtmlBlock.

<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" />

<style type="text/css">
table,tr,td,p,.p,br,body,div,li,span,big,blockquote,label,name, h1, h2, h3, h4, h5, h6, .zi06
{
font-family: 'Raleway', arial, sans-serif; 
font-weight:lighter;
}
</style>

You can get free fonts for your website and the same above instructions to use them at www.google.com/fonts

To use your own specific font, you will need to convert to css (google the free sites that do this) and link it with this code:

<link href="http://www.somewhere.com/fontname.css" type="text/css" rel="stylesheet" />

Then, use the name of the font in the font-family part

<style type="text/css">

table,tr,td,p,.p,br,body,div,li,span,big,blockquote,label,name, h1, h2, h3, h4, h5, h6, .zi06
{
  font-family: 'fontname', arial, sans-serif; 
}

</style>

Replace text

In the same way you inserted the above code in the the HTMLBlock sections of the template, you can also do the same with Javascript.

This script will replace standard text on your store that you normally can't change. Use it to make changes in spelling between USA and UK etc, or rephrase sentences.

Don't use it make false claims or be misleading however or you could find yourself in a lawsuit.

Copy/paste the code below into MostBottomHTMLBlock, but you can change the text shown as underlined to what you would like to change.

<script type='text/javascript'>

/*
* jQuery replaceText - v1.1 - 11/21/2009
* http://benalman.com/projects/jquery-replacetext-plugin/
*
* Copyright (c) 2009 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/

(function($){$.fn.replaceText=function(b,a,c){return this.each(function(){var f=this.firstChild,g,e,d=[];if(f){do{if(f.nodeType===3) {g=f.nodeValue;e=g.replace(b,a);if(e!==g){if(! c&&/</.test(e)){$(f).before(e);d.push(f)}else {f.nodeValue=e}}}}while(f=f.nextSibling)}d.length&& $(d).remove()})}})(jQuery);

$("body *").replaceText( /original/gi, "changed" );
$("body *").replaceText( /original sentence/gi, "changed sentence" );

</script>

Replace Images

You can use this javascript code in the same way as the other examples above to replace the quality and dimensions/size of the standard images. The below example loads higher resolution images from our server and also increases their dimensions/sizes from 240px to 320px for example. It is applied when the page loads so all product images are replaced by the script.

<script type=text/javascript>

var images = document.getElementsByTagName('img');

for (var i=0; i<images.length; i++) {
    var img = images[i];

   img.src = img.src.replace(/0-1-1$/, '0-3-1');

   if (img.width == '240' && img.height == '240') {
        img.width = '320';
        img.height = '320';
    }

   if (img.width == '120' && img.height == '120') {
        img.width = '130';
        img.height = '130';
    }

    img.src = img.src.replace(/0-2-1$/, '0-1-0');

}

</script>

Another way is with the use of a link for the visitor to click. The advantage of this method is saving bandwidth and page load time for the visitor, and also gives better control if certain images on certain pages shouldn't be resized. Paste this code where you want the link to be, for example in TopHTMLBlock (above the main content of the store)

<a style="text- decoration:none;" href="#" onClick="HDimages()" title="View larger product images">
<big>#128269</big>
<sup><sup><sup><b><b style="color:#575b5f;"> +</b></b></sup></sup></sup>
<small style="color:#575b5f;"> HD</small>
</a>
<BR><BR>

<script language = JavaScript">
function HDimages () {

var image = document.getElementsByTagName('img');

for (var i=0; i<image.length; i++) {
var img = image[i];

if (img.width == '120' && img.height == '120') {
img.width = '210';
img.height = '210';
}

img.src = img.src.replace(/0-2-1$/, '0-0-0');

}

}
</script>

Product Slideshow (VIP only)

Add a nice product slider to your store.


Copy/paste this code to any custom page or these template sections: MostTopHtmlBlock, TopHtmlBlock, TemplateFooterHtmlBlock, or MostBottomHtmlBlock.

<!-- START SLIDER -->

<link href="http://www.cjsmedia.pulsefinger.com/java/jsImgSlider/themes/1/pyl-slider2generic.css" rel="stylesheet" type="text/css">
<script src="http://www.cjsmedia.pulsefinger.com/java/jsImgSlider/themes/1/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
<a href="/create/default.aspx">
<div id="overlay" title="Click here or click the images to view the products"></div>
</a>

<div id="slider">
<a href="/diy/all-over-print-apparel"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide01-aop.png" alt="Full cover printed clothing & accessories"></a>
<a href="/diy/bag"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide02-bag.png" alt="Personalised Hangbags, Schoolbags, Tote Bags, and more"></a>
<a href="/diy/phone"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide03-phone.png" alt="Custom Smartphone Cases"></a>
<a href="/diy/book"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide04-book.png" alt="Create your own photo books or story books"></a>
<a href="/diy/cat0504"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide06-cat0504.png" alt="Custom Cards & Stationery" title="Cards & Stationery"></a>
<a href="/diy/cat0512"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide07-cat0512.png" alt="Home Decor - Designed by you!" ></a>
<a href="/diy/acrylic-jigsaw"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide08-acrylicjigsaw.png" alt="Make your own Jigsaw Puzzles"></a>
<a href="/diy/dog"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide09-dog.png" alt="Puppy stuff!"></a>
<a href="/diy/cat0505"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide10-cat0505.png" alt="Custom Clothing & Accessories"></a>
<a href="/diy/flip-flops"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide11-flipflops.png" alt="Personalised Thongs/ Flip Flops" ></a>
<a href="/diy/electronics"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide13-usb.png" alt="Customised Electronics"></a>
<a href="/diy/speaker"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide14-speaker.png" alt="Personalised Portable Speakers"></a>
<a href="/diy/watch"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide15-watch.png" alt="Photo Watches"></a>
<a href="/diy/wall-clock"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide16-wallclock.png" alt="DIY Wall Clocks" ></a>
<a href="/diy/252,253,254"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide17-252253254.png" alt="Cute Personalised Clocks"></a>
<a href="/diy/keychain"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide18-keychain.png" alt="Key Chains"></a>
<a href="/diy/tablet"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide19-tablet.png" alt="Popular Tablet Accessories"></a>
<a href="/diy/umbrella"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide20-umbrella.png" alt="Design your own Umbrellas"></a>
<a href="/diy/block"><img src="http://www.cjsmedia.pulsefinger.com/images/pyl/slide21-block.png" alt="Acrylic Photo Blocks"></a></div>
</div>

<!-- END SLIDER -->

Social Icons

Add social sharing buttons to your store.

The following code is best placed at the beginning of TopHTMLBlock

<!-- AddToAny Social Icons BEGIN -->
    <div class="a2a_kit a2a_kit_size_32 a2a_default_style" style="float:right; margin-bottom: 15px; margin-top:-15px">
        <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
        <a class="a2a_button_facebook"></a>
        <a class="a2a_button_twitter"></a>
        <a class="a2a_button_google_plus"></a>
    </div>
    <script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny Social Icon END -->

Payment Icons

Increase trust with payment and security buttons.
PayPal is the secure way to pay without sharing your financial informationSSL encrypts your information so it can't be stolen during checkout

The following code is best placed at the end of MostBottomHtmlBlock.

<div id="icons" style="text-align:center";><br>
<img src="http://www.ferricfusion.co.uk/wp-content/uploads/2015/01/paypal-transparent-logo.png" alt="PayPal" title="PayPal is the secure way to pay without sharing your financial information">
<img src="https://securesitehost.com/wp-content/uploads/2015/01/ssl.png" alt="SSL Encryption" title="SSL encrypts your information so it can't be stolen during checkout" height=51 style="margin-bottom:7px;">
<br></div>

Website Integration

Now that you have learned how to hide sections and use server controls, you can display your store inside another website.

Please note that this may not be practical or fully functional, so please consider whether this is the best option for you.

The simplest way to integrate your finished store is with iframe tags.

</iframe src="(link to your store)"></iframe>

To make this look as seemless as possible you should have the same branding design elements in your store template as your website that you want to integrate with, including the same css styles for headings and backgrounds etc.

The width and height of the iframe can also be set as best suited to your website. Sometimes it is best to have a fixed width and height, others it is best to resize according to the content. You will need to either experiment with this or hire a web developer. We can also do this for you for AU$50 if you have already finalised the template.

Here is an example of using Javascript for automatically sizing iframes according to their content. Add this the <head> section of your website:

<script language="javascript" type="text/javascript"> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script>

And this section to where you want the store to display:

<iframe src="url to your store" frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Custom Brand Tags (reseller accounts only)

     
1. All brand tags must be center folded, saved as an .ai file (Adobe Illustrator). When you design the brand tags, please add two sew-in borders of 10mm.

2. Brand tag fees: 5000 for $500, for 2 colours. If it is white background, you can have 3 colours (including white). For extra colours, it costs extra US$200 per colour.

     

3. The brand tag fees US$500 is for one design only, if you need to change tag designs, you need to start again.

4. For US$500, we will keep 5,000pcs brand tags for you in stock, which includes XS(300pcs), S(1,000pcs), M(1,000pcs), L(1,000pcs), XL(1,000pcs), 2XL(400pcs), 3XL(300pcs), we will inform you to deposit another US$500 fees when one of them is going to be out of stock. You can also design the quantity of each size.

5. All allover print apparels will include material tags. For the brand tags you have designed, please don't include the material inside. See sample here.

6. If you get any questions, please contact our customer services for more details.

Base Prices

The prices below are available only for our subscribers. They are the prices we offer you on which you can set your own markup.

Start Selling!
 

Random Compliments

"Thank you"

"Dear Team"





-->
Copyright © 2003-2017 Picture Your Life. All rights reserved.