Store home page banner with orders shipping date

Question

 

I will be taking a vacation and will not be able to attend to my store for a couple of weeks. I don't want to lose sales by putting my store into the maintenance mode, but at the same time I want to let shoppers know that the store orders will be mailed only after a certain date.

 

How can I add a banner at the top of my store home page with the orders shipping date announcement? 

Answer 1

To add a message to your store home page, informing your store visitors about orders shipping dates, you will need to insert custom code snippets.

In your store Design window find “custom CSS” and paste the following code:

#shipping_msg {
	text-align:center;
	padding:40px;
	margin:20px 0 20px 0;
	border:1px #cccccc solid;
	display:none;
	}

Find “custom JS” and paste the following code:

var txt_box_msg_inner = '<b>WELCOME!</b><br />'+
'<br />DEFAULT TEXT GOES HERE<br />'+
'<br />DEFAULT TEXT GOES HERE<br />'+
'DEFAULT TEXT GOES HERE<br />'+
'DEFAULT TEXT GOES HERE<br />'+
'DEFAULT TEXT GOES HERE.<br />'+
'<br />DEFAULT TEXT GOES HERE.<br />';

$(document).ready(function() {

	var store_home_page = $('#home_page').val();
	
	if (store_home_page == '1')
	{
		var txt_box_msg = '<div id="shipping_msg" class="bg_2 txt_2">'+txt_box_msg_inner+'</div>';
		$('#store_logo').after(txt_box_msg);
		$('#shipping_msg').delay(1200).slideDown(600);
	}
});

To see how this custom message will look and work, click here.

You can edit the text of the message by changing the default text to the one that will inform your shoppers about the order shipping dates.

After you are back from vacation, you can delete this message simply by erasing custom code snippets from both – CSS and JS – sections of your store Design window.

 

Anne - eez.io support