Advanced JavaScript and CSS Tips

Warning: This is an advanced tutorial and is not supported by ReCharge as it is not part of ReCharge's standard turnkey solution. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid may be required.

This guide will continuously be expanded to include all sorts of specific use-cases for how people have customized their store. Although we don't have the capacity to personally help you code additional features, we would still like to assist you by providing these examples.

Have you done something interesting with your code and think it would helpful for other store owners to see in the future?  Let us know!

Use Case #1:

This is an example of code that was added to the thank you view using the checkout Thank You page's text box that displays this at the top:

The Additional Contents section is a direct HTML input, so you can put in any <style> or <script> tags to have full flexibility to shift things up.

<div id='prompt'>
<h1 style='text-align: center'>Already Have Your Device?</h1>
<p style='text-align: center'>Please <a href='https://domain.com/account' >click here</a> to proceed with your activation</p>
</div>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript'>
$('document').ready(function(){
var promptHTML = $('#prompt').html();
$('#prompt').html('');
$('#main').before(promptHTML);
});
</script>

To accomplish this, you'll need the help of our guide on Additional Contents & Scripts.

Use Case #2:

Here is an example of code that was written to add an extra link to the storefront Customer Portal below 'Subscriptions'. This link would open a new tab to a spreadsheet where customers can select their subscription items for the month. This can be added by putting in custom JavaScript in the Storefront Header's HTML/CSS/JS section. Here's some sample code that someone else used for reference. It has to be in the footer since the script needs to show up after the portal elements are rendered. We recommend taking a look at our guide on Customizing CSS in the Storefront Customer Portal.

<script>
$('.nav-stacked').append('<li><a style="cursor:pointer" href="LINK URL HERE" target="_blank">Manage Membership Status</a></li>');
</script>

Still stuck? How can we help? Still stuck? How can we help?