I am using the Shopify .liquid theme "New Standard" for my site. I want to edit the html/css so that a basic modal displays on the homepage when the page has loaded.
I got the basic modal code from W3 and a javascript function so that it displays when the page is loaded. All of that works in my jsfiddle, I just do not know which .liquid file to include the code.
.Liquid theme files
Also, will the javascript be in a separate .liquid file than the modal?
Much thanks.
Here is my code:
{% if template == 'index' %}
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
{% endif %}
Block Element Modal
I am using the Shopify .liquid theme "New Standard" for my site. I want to edit the html/css so that a basic modal displays on the homepage when the page has loaded.
I got the basic modal code from W3 and a javascript function so that it displays when the page is loaded. All of that works in my jsfiddle, I just do not know which .liquid file to include the code.
.Liquid theme files
Also, will the javascript be in a separate .liquid file than the modal?
Much thanks.
Here is my code:
{% if template == 'index' %}
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
{% endif %}
Block Element Modal
Share Improve this question edited Nov 5, 2015 at 17:26 Hunter Banks asked Nov 4, 2015 at 4:29 Hunter BanksHunter Banks 311 silver badge3 bronze badges 1- See my proposed solution, let us know if it worked, and if it did, don't forget to give a credit. – jpaljasma Commented Nov 6, 2015 at 18:09
2 Answers
Reset to default 4Put the modal code into a separate file called snippets/modal.liquid, then edit layout/theme.liquid and inject the following code before closing of the </body> tag:
{% if template == 'index' %}
{% include 'modal' %}
{% endif %}
I would switch $(window).load with $(document).ready as well.
Don't forget to include Bootstrap JavaScripts and CSS in your template.
If the modal is only going to show on your homepage, then you could put the code in the index.liquid file. This is your homepage's template file. You can also put the Javascript code in that file as well, however it's a better practice to place Javascript code towards the end of your <body>.
An alternative would be to put both the html for the modal and the Javascript in your theme.liquid file and place them inside of a conditional that would only load them if you are on the homepage. It would look something like this:
{% if template == 'index' %}
<-- CODE FOR MODAL GOES HERE -->
<-- CODE FOR JAVASCRIPT GOES HERE -->
{% endif %}