Have your store match the website that links to it

[Rutabaga]

Question:
We have a Modular Merchant shopping cart and multiple product websites. When a customer enters the store's checkout area from a product website, we want the checkout area to match the look of the site they came from.

Is this possible?
Yes. Modular Merchant allows you to create multiple HTML templates. These HTML templates are called "Skins". Each section of the storefront has its own Skin. Store Admins can also create multiple Skins, and assign different Skins to different pages in your storefront. This process has the following requirements:

Requirements:
1. Familiarity with HTML. You will need to create HTML website templates.
2. Knowledge of passing variables in a hyperlink. For example: My Link

What can and can't be changed:
1. The URL of the checkout area can't change. www.checkout-area.com will be used no matter where they come from, but the HTML template applied to the checkout area can be changed.
2. All orders will still be processed by the same merchant account. You're using the same payment gateway/merchant account to process all orders, no matter which site they come from. The name of the company on the customer's credit card statement will be the same no matter which site they come from. If orders from each website need to be processed by a separate merchant account, you will need a separate Modular Merchant account for each.

Instructions on applying custom HTML Skins to your store:
My company has a Modular Merchant STANDARD shopping cart, operating at www.my-company.com/store/.
My company has two separate product websites. These two websites are at different domains. For example, website 1 is located at www.website-one.com, and website 2 is located at www.website-two.com. These two sites have completely different HTML designs. (See Figure 1.) The only similarity between the two websites is that they both list products my company sells through our Modular Merchant store, which is hosted on the www.my-company.com/store/ website mentioned above.

Figure 1: Two different websites, hosted on two different domains.

The products being sold on both websites have been set up on my Modular Merchant account. Each product has a variety of special links associated with it. These links are referred to as "QuickLinks?". These links can be found in your Modular Merchant account's Administration area on the Search Products page. (See Figure 2.)

Figure 2: Locating a product's QuickLinks?.

There are several different types of QuickLinks, each with its own special behavior. For example, the "QuickCheckout?" link can be used add a link to a "Buy Now" button on a remote website with the behavior of adding product(s) to the customer's shopping basket, and then loading the first step of your Modular Merchant store's checkout process. An example of a QuickCheckout link is below (See Figure 3):

http://www.my-company.com/store/quick_checkout.php?id=123&qty=1
Figure 3: A sample product's QuickCheckout? link.

Okay, so I have remote websites that list the products in my Modular Merchant store, and I can automatically add the products to the customer's shopping basket and send them to my store's checkout area with a single link. However, when the checkout area in my store loads, it doesn't match the design of the website its coming from. How do I change the HTML template applied to my store's checkout area within the QuickCheckout link?

The Design section of the Modular Merchant account's Administration area contains a tool called the "Skin Editor". A "Skin" is a set of HTML templates. Each sections of your online store can have a different Skin assigned to it. For example, there is an HTML Skin template for each page of the checkout process, another for the "My Basket" page, another for the customer account area, etc. Stores are not limited to just one set of Skins. Admins can create an unlimited number of Skins. Each of these Skins can be applied to a different page (See Figure 4.)

Figure 4: Stores can have multiple Skin sets on file. Each Skin is a different set of HTML templates.

A store will use the default Skin assigned to it, unless told to do otherwise. The Skin that is applied to your store can also be set dynamically, by including a "skin" variable within a hyperlink that points to your store. For example, let's say I created two different Skins in my store; the default Skin in my store matches the blue HTML design of "Website 1" from Figure 1. A second Skin titled "Red Skin" matches the reddish HTML design of "Website 2" from Figure 1. To assign the "Red Skin" to my store for customers that come from Website 2, I just need to reference in my QuickCheckout link. (See Figure 5.)

http://www.my-company.com/store/quick_checkout.php?id=123&qty=1&skin=red_skin
Figure 5: Assigning Skins to my store's checkout area by including the "skin" variable in my QuickCheckout link.

If a customer enters my store from the link in Figure 5, they will be served the version with the "Red Skin" assigned to it. (See "Checkout 2" in Figure 6.) If a customer enters my store from any other link, they will be served the version with the default skin assigned to it. (See "Checkout 1" in Figure 6.)

Figure 6: The same Modular Merchant checkout area with two different Skins applied to it.

Additional Tips and Hints:
The "skin" variable is not limited to QuickLinks. The "skin" variable can be included in any link that points to your Modular Merchant storefront.

If a Skin is assigned by an incoming link, it will be retained for the customer's entire shopping session. If the customer jumps to another website and back in the same browsing session, the custom Skin will still be applied.