Home > Add-Ons > Responsive Templates
In Step 4 of the Installation procedure, you may want to edit the Skinning script before executing. Below is a breakdown of each section of the script with further explanation. The actual contents of the skinning script included in your installation package may vary. The below example uses Dean (Skin 1).
--Set the Skin ID here
@SkinID = 1
This section defines the Skin ID variable, which can optionally be used further down in the script. By default, this isn't used in most scripts, so this can typically be left as-is.
If, for example, your current live site skin is in the folder Skin_7, and you install the new skin into the Skin_1 folder, you might want to set all of your stores and customers to use the new skin. You could use the SkinID variable to add the following script just below this section:
SkinID = @SkinID
--Images will work in Dev Environment as long as references DO NOT include a leading '/' character. If you're running this script in a dev environment, set @Environment = ''.
--Images will work in Staging Environment as long as references DO include a leading '/' character. If you're running this script in a staging environment, set @Environment = '/'.
This section defines whether you're running the script in a development or staging environment. If you plan to run this in a local/development environment first, to test out and modify the skin before applying to your live site, you'll want to leave this as-is. If you're running this on your staging or live site, set the @Environment variable to SET @Environment = '/'
Adjusting this setting to '/' will allow the images included in topics to appear correctly in the admin console. Images, when referenced correctly in topics, will appear on the front-end of the site regardless of this setting.
This section defines the product & entity xmlpackages (page layouts) used for all products & entities on the store. Adjust these to include the filenames of the XmlPackages you'd like to set globally throughout the store. Or delete these lines to keep your XmlPackage settings as they are. You can find the available filenames in the files on your live site under XmlPackages, and Skins/Skin_1/XmlPackages. If the same filename exists in both locations, the Skins/Skin_1/XmlPackages file will be used.
This section adjusts your store Settings (referred to as "AppConfigs" in the database). More information on each of these settings can be found in your live site admin console under Configuration > Settings.
--Create New AppConfigs
'Set this to true to show the promo popup window, set this to false to turn it off completely'
'Number of days until the promo window will show again for a visitor who has previously dismissed it.'
'Amount of time delay (in milliseconds) until the promo displays. For example: to delay for 5 seconds after page load, set this to 5000.'
'Show variant images on '
'Responsive Variants in a List'
'Show subcategory images on '
'Responsive Entity Grid'
'Show SKU on product pages.'
Your responsive template includes some new settings which are used by some of the features specific to each of the Responsive Templates. This section of code will create the Settings on your store. After the script has been run, you can edit these new settings under Configuration > Settings in your store.
@Locale = (
LocaleSetting = @Locale
This section creates Prompts (referred to as "StringResources" in the database) that are used by some of the new Responsive Template features. Specifically, the product.tabbed-responsive.xml.config product page layout uses the product.tablabels... prompts to determine the tab names on the page just below the main product information. After the script has been run, you can edit these new prompts under Content > Manage Prompts in your store.
, Title, [Description], ShowInSiteMap)
Near the bottom of the skinning script, there are several sections of code that create and insert HTML descriptions into topics. These topics are embedded throughout your responsive template and are used to display things like your store's logo, phone number, social media icons, top navigation, footer, etc.
For more information, or to get help with installing your new skin, please submit a ticket to our Help Desk .