Overview
Beginning on July 13th 2018 at 11 PM CST and ending on July 14th at 7 AM CST, AmeriCommerce will be having all servers migrated to a new data center in Texas, this is a very rare process that needs to be done and we are lucky to have trained and skilled professionals running the transfer. Currently, we expect all sites on our platform to be inaccessible for ~8 hours during this time as the servers are physically removed from the current data center and transported then installed into the new data center. This is a mandatory requirement by our server provider that will affect all sites on the platform without exception at this time. The move does provide upgrades for your site being an upgrade data center which comes with advanced server cooling and a more spacious server rack which will help cool the server holding your data causing a more effective use of resources and an upgraded firewall to help protect you and your customer's data.
Before this time hits we understand you may want to notify your customers of the outage publicly on your website and need instructions on how to do so. This article should run you through the basics of setting up a very standard/basic HTML widget that will notify your customers of the maintenance.
Before making any HTML/CSS or Theme Changes we strong suggest creating a backup of your theme. For a full explanation on creating a theme back-up please review This Article.
Enter the widget using WYSIWYG
First you will want to navigate to your dashboard which is your store url + /store/admin. So, www.mystore.com/store/admin as an example.
Next you will want to log in and navigate to your Themes section, and edit your Active Theme.
Next you want to navigate to your Header Widget areas and select the widget area that you want it to show up in. Your screen will likely look different as these screenshots were taken using a test store and with only the information needed for this tutorial.
Next you will want to click Add Widget and select the Custom HTML widget from the list.
Next you will want to give the widget a name so that you can easily return to it when needed and you will want to hide it for the time being until you are ready to release it to the world to view.
Go ahead and click Save at the top right. Once it has saved we're ready to add in the text. Click the <> icon to switch to the HTML editor briefly and add in the below code snippit.
<span style="color: #e36c09;"><strong><span style="font-size: 11px;"> Thank you for visiting ##STORENAME##, our site will be temporarily unavailable between <u>11PM Friday the 13th</u> and <u>7 AM Saturday the 14th</u> for routine maintenance. Have a wonderful day! </span></strong></span>
Great! Now you can click Save again. From here if you click the <> again to return to the WYSIWYG editor you can make your alterations as needed to the text and style it however you want. If you leave it as default it should look something like this.
*Note* Once you are prepared for it to be seen you do need to unhide the widget by deselecting the hide button from the widget settings and selecting save again.
Enter the widget using HTML
To add the widget directly into the HTML you will need to figure out exactly where you want the widget to show up by reviewing the HTML of the page/header you want it to go on. Adding the below code will give you CSS to edit the text as the text is wrapped in the class NotiTxt (short for notification text) and it will also generate a new widget area and widget on your theme on whatever page you put the code.
Then you can copy the below code and paste it in there, making changes as needed.
<ac:widgetarea id="NotificationWidget"><ac:widget id="HTML9898" type="HTML">
<p><strong>
<div class="NotiTxt">Thank you for visiting ##STORENAME##, our site will be temporarily unavailable between <u>11PM Friday the 13th</u> and <u>7 AM Saturday the 14th</u> for routine maintenance. Have a wonderful day!</div>
</strong></p>
</ac:widget>
</ac:widgetarea>
Then you can add the below to the bottom of your Global CSS
NotiTxt {
color: rgb(227, 108, 9);
font-size: 11px;
}
Advanced Assistance
We understand that this task may be a bit confusing and if you need more direct assistance please feel free to enter a Support Request and one of our agents will be happy to help you with the instructions and walking through the process.