Skip to main content

How can shop members change their own password? Add a password change button to your shop - Knowledgebase / Apps & ShopFactory Cloud - ShopFactory Help Center

How can shop members change their own password? Add a password change button to your shop

Authors list

This article is about shop members: customers who have created a customer account in your shop. Customers who ordered without creating an account do not have a password, so none of this applies to them.

A membership account costs your customers nothing. Creating one is free.

If you have switched on Services > Set up Customer Membership Accounts in ShopFactory, your shop already shows a login button in the main menu. That button lets a member sign in, but it does not let them change their password. The script in this article adds a second button that does.

What the new button does

  • A member clicks the button and a login window opens.
  • They sign in with the email address and the password they already use in your shop.
  • On that page they can change their details and set a new password.
  • The same page lets them follow their orders.

Before you start

Customer Membership has to be switched on in your shop. In ShopFactory, open the Services menu and tick Set up Customer Membership Accounts.

The full setup is described in Customer Membership Settings in ShopFactory.

Step 1: add a page for the button

You can put the button on a page you already have. Most merchants add a new page for it.

  1. Open your shop in ShopFactory.
  2. In the left tree menu, click where you want the page: Navigation 1, Navigation 2, or Unlisted Pages.
  3. Click the + Page button, or press F8, and give the page a title, for example "My account".
  4. Make sure the page is set to visible, not hidden.

A page under Unlisted Pages does not appear in your menus, so you link to it yourself from wherever you want. See How can I create pages that are not part of Navigation 1 and 2?

Step 2: add the script to that page

  1. Double-click the page in the left tree menu to open the Page Properties.
  2. In the left menu of that dialog, click Add Custom Contents (called Custom Contents in some versions).
  3. Click the + button to add a block. The Custom Contents dialog opens.
  4. At Enter an identification name, type a name you will recognise later, for example "Member login".
  5. Under Enter contents, paste the whole script from the bottom of this article.
  6. Tick "Field contains Javascript code". The button does not work without it. The tick tells ShopFactory that the block holds a script, so it is left alone while you are editing your shop. That is what the SFNOTE lines in the script are for.
  7. At Set Location, choose Area 3 or Area 4, so the button appears in the content of the page.
  8. Click OK, and OK again to close the Page Properties.

The general steps for custom HTML are described in Adding custom HTML code to a Page or to the entire website.

Step 3: put your own domain in the script

The script contains one line you have to edit:

var isantuurl='https://i.santu.com/webshop/mylogin.cgi?from=myeditdetails&fromshop=yourdomain.com';

Replace yourdomain.com with the domain your shop is published to, without https:// in front. If your shop is at https://www.myshop.com, the line becomes:

var isantuurl='https://i.santu.com/webshop/mylogin.cgi?from=myeditdetails&fromshop=www.myshop.com';

Nothing else in the script needs to be changed. The domain tells the login page which shop the member belongs to.

Step 4: save, publish and test

The button only works on a published shop. In the ShopFactory preview you will see a message that the shop has to be published first, which is normal. Save your shop, publish it, then open the page in your browser and try it with a member account of your own.

The script

Copy everything below, from the first line to the last.

<a class="GC91 btn-primary btn sf-button" style="border-radius: 50px; color: rgb(0, 0, 0);" href="#" data-role="isantu-button" data-sfcbpermalink="true"><span>Login to track your orders and/or change your details/password</span></a>
<script>
/* SFNOTE_BEGIN:prevent script execution when in editing mode */
if(typeof(tf)!='undefined'&&(typeof(tf.isInSF)=='undefined'||!tf.isInSF())){
/* SFNOTE_END:prevent script execution when in editing mode */

var isantuurl='https://i.santu.com/webshop/mylogin.cgi?from=myeditdetails&fromshop=yourdomain.com';
$('[data-role="isantu-button"][href=#]').on('click', function(e){
  e.preventDefault();
  if(!tf.wm.online){
    alert(LD.LD_SHOP_MUST_BE_PUBLISHED);return false;
  }
  tf.utils.showPopup(isantuurl,0,0,true);
  return false;
});

/* SFNOTE_BEGIN:prevent script execution when in editing mode */
}
/* SFNOTE_END:prevent script execution when in editing mode */
</script>

Related articles