HomeArctic ReservationsGuest-Facing SiteGuest-Facing Site Design Tools for Subdomain Implementations

30.4. Guest-Facing Site Design Tools for Subdomain Implementations

If you chose a subdomain to host your Arctic guest-facing site, we provide an initial import of your site design so that the guest-facing site will match the look and feel. But you may wish to further refine this design, or to update it based on future updates to your website. We provide tools that you or your web designer can use to update the guest-facing site design.

There are two approaches to update the guest-facing site design, depending on how big the changes are:

General tips

Because the guest-facing site runs on a subdomain and requires SSL encryption to comply with PCI standards, there are some special requirements for the design. The links in your navigation need to be absolute links (e.g., starting with "http://" or "https://"). And all referenced scripts, stylesheets, fonts and images must be served via a secure server (starting with "https://"). When we initially setup the design, we take care of these details for you. But updating the design requires being cognizant of these details.

In addition, since Arctic uses a number of JavaScript libraries to create the interactive guest-facing site functionality, it tries not to interfere with your existing JavaScript. But there may be some interactions or overlap between the scripts. 

Finally, we strongly recommend that the person making changes be knowledgeable about web design (HTML, JavaScript and CSS stylesheets). This may mean bringing in your web designer to help with updates.

Small changes: editing the design

This approach is good for minor changes, like navigation tweaks and such.

  1. Go to the "Settings" site, open the "Guest-Facing Sites" section and click the pencil to "Manage Guest-Facing Sites."
  2. Click the "Designs" button next your guest-facing site.
  3. Find your existing design (marked with the "Live" icon) and click the edit icon.
  4. Arctic will allow you to change the HTML and, if needed, the JavaScript, CSS and images associated with the design.

Note that it is a good idea to backup existing copies of the files before making changes, just in case the change does not work as intended. Also note that you cannot just replace the files with copies from your design, as the URLs have all been modified to match the file structure on your guest-facing site.

Big changes: reimporting the design

This approach is better for big overhauls or changes. Arctic provides a set of automated tools that should take care of the majority of the process of setting up a new design. 

  1. Go to the "Settings" site, open the "Guest-Facing Sites" section and click the pencil to "Manage Guest-Facing Sites."
  2. Either click "Reimport" next to your existing design (if the same sample page can be used) or create a new design.
  3. Provide Arctic with a URL on your website that you want to use as a basis for the design. If you created a sample design as recommended in the previous documentation page, use the URL of that page.
  4. Be patient, as Arctic will download that page, as well as all referenced CSS, JavaScript, images, etc.

    During the process, Arctic tries to intelligently update URLs and preserve functionality of your design.
  5. Once it does the initial import, it will ask you to edit the design to make tweaks (much like the "editing your existing design" above). A few tips to help with this process:
    • If you did not setup your sample page as described earlier, you'll have to remove the content from the page you imported, and replace it with a placeholder so Arctic knows where in the design the page content goes. This is indicated with inserting {SITE-BODY}. In addition, insert {SITE-TITLE} where you would like the title of the page to go (e.g., within the <titile> tag and with the header tags).
    • Generally speaking, the import process gets your design 95% of the way to working, but little aspects may not be correctly imported. You may have to tweak the HTML, CSS and JavaScript to make sure things all work together nicely.
    • Note that there is a "Preview Design" option at this stage that you can use to ensure the design is working properly.
  6. At the end, you can provide a name and make the design live if it is ready.

Need help

Whether your editing your existing design or doing a fresh import, both approaches require good knowledge of your design's HTML, CSS and JavaScript. As a result, we encourage working with your site designer during the process as it can make it go more smoothly. 

If your designer is not available or if you need a little more help, we can perform a fresh import of your design, but would bill for the time required. Contact support for more information. It is not possible for us to make small changes or incremental updates, as we can't tell what aspects of your design has changed on the rest of the website.

This page was: Helpful | Not Helpful