Search Help:  
 
Enter keywords to search help.

Is Customer Registration supported for stores built using Web Hosting tools?

Yes. Customer Registration is supported for stores built using Web Hosting tools. Enabling Customer Registration for your store is a four-part process:

Important notes:

  • Customer Registration will not correctly function if you are using hard-coded order URLs. Store tags should be used instead. If you use hard-coded order URLs, even when a registered customer is signed in to their store account, they will be taken through the guest checkout process to complete their order instead of the registered customer checkout flow.
  • You must publish your Store Editor before enabling Customer Registration to update your store tags information. If your store tags are not updated for Customer Registration, as noted above for the issue with hard-coded order URLs, this will cause customers to be taken through a guest checkout process, even when they are signed in to their store account.
  • Customer Registration will be recognized only for your store's primary domain, which can be set in the "Domain Names" section of Store Manager. If you are using multiple domains for your store, we strongly recommend that you set the domain redirect feature (301 redirect). Since using the domain redirect feature can help improve SEO for your site, the benefits of enabling this feature extend well beyond the functionality of Customer Registration.

Step 1. Update your store pages to support the customer registration feature, using a JavaScript code and div code

The JavaScript code and div code to be inserted into your templates can be found in the Customer Registration Manual Setup tab, located in the Global Settings section of Checkout & Registration Manager.

If you've already inserted a JavaScript code and div code for the floating cart feature, the updated JavaScript code and div code for customer registration should replace these. If enabled, your floating cart will continue to function when these codes are replaced.

Updating using Dreamweaver

Merchants who use Dreamweaver to design and update their store page templates may be able to perform a site-wide template update to insert the JavaScript code and div code on their store pages.

To insert the JavaScript code:

  1. On the Customer Registration Manual Setup page, highlight and copy the displayed JavaScript code. This code is unique to each store, and will look like the code in the example below, with your store ID, timestamp, order server URL, and store URL:

    <script type="text/javascript" id="yfc_loader" src="http://l.yimg.com/a/lib/smbiz/store/yfc/js/0.3.9/loader.js?q=[STOREID]&ts=[##########]&p=1&h=[ORDER SERVER URL]&v=[STORE URL]"></script>

  2. Open your store template file in Dreamweaver.

  3. Toggle to Dreamweaver's Code View.

  4. In Code View, locate the closing </body> tag. Insert the floating cart script as the last item immediately above the </body> tag. For example:

    <p>This is the last line of text in my page body.</p>
    <script type="text/javascript" id="yfc_loader" src="http://l.yimg.com/a/lib/smbiz/store/yfc/js/0.3.9/loader.js?q=[STOREID]&ts=[##########]&p=1&h=[ORDER SERVER URL]&v=[STORE URL]"></script>
    </body>


  5. Save your changes. Dreamweaver will ask you if you'd like to update all files that use this template.

  6. Review the list of files Dreamweaver would like to update. To continue with updating these pages, click "Update."

To insert the div code:

  1. On the Customer Registration Manual Setup page, highlight and copy the displayed div code. It will look like the following:

    <div id="ys_superbar">
    <div id="ys_cpers">
    <div id="yscp_welcome_msg"></div>
    <div id="yscp_signin_link"></div>
    <div id="yscp_myaccount_link"></div>
    <div id="yscp_signout_link"></div>
    </div>
    <div id="yfc_mini"></div>
    <div class="ys_clear"></div>
    </div>


  2. Open your store template file in Dreamweaver.

  3. Toggle to Dreamweaver's Code View.

  4. In Code View, locate the opening <body> tag. Insert the div code as the first item immediately below the <body> tag. For example:

    <div id="ys_superbar">
    <div id="ys_cpers">
    <div id="yscp_welcome_msg"></div>
    <div id="yscp_signin_link"></div>
    <div id="yscp_myaccount_link"></div>
    <div id="yscp_signout_link"></div>
    </div>
    <div id="yfc_mini"></div>
    <div class="ys_clear"></div>
    </div>


  5. Save your changes. Dreamweaver will ask you if you'd like to update all files that use this template.

  6. Review the list of files Dreamweaver would like to update. To continue with updating these pages, click "Update."

Using other third-party design tools

To insert the JavaScript code:

  1. On the Customer Registration Manual Setup page, highlight and copy the displayed JavaScript code. This code is unique to each store, and will look like the code in the example below, with your store ID, timestamp, order server URL, and store URL:

    <script type="text/javascript" id="yfc_loader" src="http://l.yimg.com/a/lib/smbiz/store/yfc/js/0.3.9/loader.js?q=[STOREID]&ts=[##########]&p=1&h=[ORDER SERVER URL]&v=[STORE URL]"></script>

  2. Open the design tool you use to update and maintain your store pages.

  3. Using this tool, insert the JavaScript code directly above the page's closing </body> tag. For example:

    <p>This is the last line of text in my page body.</p>
    <script type="text/javascript" id="yfc_loader" src="http://l.yimg.com/a/lib/smbiz/store/yfc/js/0.3.9/loader.js?q=[STOREID]&ts=[##########]&p=1&h=[ORDER SERVER URL]&v=[STORE URL]"></script>
    </body>


  4. Save your changes.

To insert the div code:

  1. On the Customer Registration Manual Setup page, highlight and copy the displayed div code. It will look like the following:

    <div id="ys_superbar">
    <div id="ys_cpers">
    <div id="yscp_welcome_msg"></div>
    <div id="yscp_signin_link"></div>
    <div id="yscp_myaccount_link"></div>
    <div id="yscp_signout_link"></div>
    </div>
    <div id="yfc_mini"></div>
    <div class="ys_clear"></div>
    </div>


  2. Open the design tool you use to update and maintain your store pages.

  3. Using this tool, insert the div code as the first item immediately below the <body> tag. For example:

    <div id="ys_superbar">
    <div id="ys_cpers">
    <div id="yscp_welcome_msg"></div>
    <div id="yscp_signin_link"></div>
    <div id="yscp_myaccount_link"></div>
    <div id="yscp_signout_link"></div>
    </div>
    <div id="yfc_mini"></div>
    <div class="ys_clear"></div>
    </div>


  4. Save your changes.

Step 2. Update your CSS styles in Checkout & Registration Manager

Next, you will need to update the CSS used by your store pages, and the CSS file in Checkout & Registration Manager. These styles control the appearance and placement of the customer registration links that appear on your store pages, the sign-in and register pop-ups, the checkout options page, and your registration and customer account pages.

Add the following styles to your store page CSS:

#ys_superbar {left:0; margin:0 auto; position:static; top:0; width:762px; height:22px;}
#ys_cpers { float:left; }
#yfc_mini { float:right; }
.ys_clear { clear:both; }
#yscp_welcome_msg { margin:0px 10px 0px 5px; display:none; line-height:20px; color:#000; }
#yscp_signin_link { display:none; line-height:20px; color:#fff; }
#yscp_signout_link { margin-left:10px; display:none; line-height:20px; }
#yscp_myaccount_link { display:none; line-height:20px; margin-right:10px; margin-left:10px; }
.yscp_bold { font-weight:bold; }
a.yscp_link { font-family:verdana; text-decoration:none; color:#000; line-height:20px; }
a.yscp_link:hover { font-family:verdana; color:#c07dcc; text-decoration:underline; line-height:20px; }
#custRegDiv a.container-close { top:5px; }
.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft { background-color:#fff; }
.yui-skin-sam .yui-panel .bd { padding:0px; }
#iframe_id { width:679px; border:1px solid #000; padding:0px; }
#custRegDiv_h.hd { display:none; }
#custRegDiv_mask.mask { background-color:#000000; opacity:0.5; filter:alpha(opacity=50);}
#loadingDiv {height:210px; width:679px; position:absolute; background:#ececec;}
img.loadingImg {margin-top:90px; margin-left:20px;}


These styles may be customized, based upon your preferences. To learn more about what each style controls, please see our Customer Registration CSS Reference page.

Next, you will also need to add Customer Registration CSS elements to the default.css file in Checkout & Registration Manager:

  1. Download the Customer Registration CSS elements file
  2. Copy and paste these styles into your default.css file

If you are unfamiliar with how to make changes to your CSS file in Checkout & Registration Manager, learn how.

If you wish to customize the customer registration buttons that are displayed on your customer registration pages, you may do so in the Visual Customization section of Checkout & Registration Manager.

Step 3. Upload required files to the root directory of your web site

If your store is built using Web Hosting tools, you must upload several small files to the root directory of your web site in order for Customer Registration to correctly function. If you've already enabled floating cart for your store, you may have already uploaded these files.

Download these files. The download page also includes help for how to modify the storage-whitelist.xml file, and how to upload these files to the root directory of your web site.

Step 4. Enable Customer Registration in Checkout & Registration Manager

Once you've updated your store pages with the JavaScript code and div code, updated your store page CSS and checkout CSS files, and uploaded the files noted in Step 3 to the root directory of your web site, you may enable customer registration using Checkout & Registration Manager:

  1. In the Global Settings section of Checkout & Registration Manager, click the Customer Registration tab.

  2. In the Customer Registration Settings section, choose to enable customer registration (Figure 1).

    Enable Customer Registration in the Global Settings section of Checkout & Registration Manager.
    Figure 1. Enable Customer Registration in the Global Settings section of Checkout & Registration Manager

  3. Configure your customer registration settings:

  • Choose to make customer registration and account sign-in required to check out, or to offer a guest checkout option in addition to registration and sign-in links.
  • Choose to add registration using a Facebook ID as an option, or to disable this option. Enabling this option requires you to create a Facebook application and enter its Application ID and Application Secret. Learn how. If you choose not to offer this, only the Facebook ID option will be excluded from your registration and sign-in pop-ups. Yahoo! ID, Google ID, and AOL ID options will still be shown. Note: This option is not currently supported for stores built using Web Hosting tools.
  • If offering a guest checkout option, you can also choose whether or not to offer account registration to your customers who aren't registered or signed-in once they've completed their order.
  • Choose to offer your customers the ability to save their card and billing address information so they may select it when making a future purchase from your store, or to disable this option. If you enable this option, choose to display information about the feature as a dismissible information box, or inline on the order confirmation page. Learn more about Saved Cards.
  • Using the Post-Registration URL field, you may specify a link to take the place of the “Keep Shopping” link, to be displayed to customers once their registration form has been submitted.
  • Using the Cancel Registration URL, you may specify a link for customers to return to when they've canceled their account registration before completing the registration process.

Once you've enabled customer registration in Checkout & Registration Manager, and configured your customer registration settings, publish your Order Settings.

Was this article helpful?

Yes   No
Click to contact Customer Care for further assistance.