How to Add and Customize a Banner in the Awtomic Customer Portal

In this help article, we will guide you through the process of adding and customizing a banner in the Atomic Merchant's customer portal. The banner can be used to display important announcements, promotions, or any other relevant information to your customers. You can adapt the steps and code to update any UI elements of the customer portal.

If you are not familiar with updating theme files or working with JavaScript code, we recommend having your theme developer perform these changes. Forward these instructions to any theme developer, and they should be able to implement this easily.

Steps:

Create a new Liquid snippet with the JavaScript code
Render the snippet in the theme.liquid file
Customize the banner content and style
Add the banner to the desired location in the customer portal
Bonus: Add subscription details to the banner

Step 1: Create a new Liquid snippet with the JavaScript code

First, create a new Liquid snippet to store the provided JavaScript code.

In your Shopify admin, go to "Online Store" > "Themes."
Find your current theme and click "Actions" > "Edit code."
In the left-hand navigation, click "Snippets."
Click "Add a new snippet."
Name the new snippet banner-injection and click "Create snippet."

Copy the provided JavaScript code and paste it inside the new snippet file, wrapping it in a <script> tag like so:

<script>
  var infoBanner = () => {
    const div = document.createElement('div');
    div.innerHTML = `<div class="bundle-card" style="display: flex; flex-direction: column; padding: 20px;margin-bottom: 30px;background-color: #ffc800;color: #000;font-size: 15px;border-radius: 3px;"> <div class=""> <p style="">  [[Banner Content]] </p> <p style="margin-top: 10px;"> [[Banner Content 2]] </p> </div> </div>`; 
    return div; 
  }; 
	
	function mountInfoBanner() { 
  	var $leftColumn = document.querySelector('.bundle-subs-detail-layout-column--left'); 
    if ($leftColumn) {
      $leftColumn.prepend(infoBanner());
    }
  } 
	
	window.addEventListener('awtomic-cp-loaded', ({detail} = {}) => {
    setTimeout(mountInfoBanner, 200);
    mountInfoBanner()
  });
</script>

Save your changes.

Step 2: Render the snippet in the theme.liquid file

Next, render the newly created snippet in your theme.liquid file, right before the closing </body> tag.

In the "Edit code" view, click on "Layout" in the left-hand navigation.
Click on the "theme.liquid" file to edit it.
Scroll down to the bottom of the file and find the closing </body> tag.
Right before the closing </body> tag, add the following code:
```
{% render 'banner-injection' %}
```
Save your changes.

Step 3: Customize the banner content and style

Now that you've added the code to your theme, you can customize the banner content. Replace the [[Banner Content]] and [[Banner Content 2]] placeholders with your desired text and update the inline CSS styles as needed

For example:

<div class="bundle-card" style="display: flex; flex-direction: column; padding: 20px;margin-bottom: 30px;background-color: #ff9900;color: #000;font-size: 15px;border-radius: 3px;"> <div class=""> <p style=""> Save 10% on your next order! </p> <p style="margin-top: 10px;"> Use code SAVE10 at checkout. </p> </div></div>

In this example, we changed the background color to #ff9900. You can update any other CSS properties in the style attribute to customize the appearance of the banner to match your brand.

Remember to save your changes after updating the content and style.

Step 4: Add the banner to the desired location in the customer portal

The JavaScript code provided will automatically add the banner to the top of the left column in the customer portal. However, you can modify the mountInfoBanner function to change the banner's location.

To do this, update the query selector in the following line of code:

var $leftColumn = document.querySelector('.bundle-subs-detail-layout-column--left');

Replace the '.bundle-subs-detail-layout-column--left' with the desired CSS selector of the element where you want the banner to appear.

That's it! Once you've completed these four steps, the banner will appear in the Atomic Merchant's customer portal with your custom content.

Step 5: Bonus: Add subscription details to the banner

In this section, you will learn how to add subscription details to the banner by grabbing data from window.Awtomic.subscriptionDetails. This can be useful for displaying personalized information, such as the next billing date, to your customers.

First, modify the infoBanner function in the banner-injection snippet to include the subscription details. In this example, we will display the next billing date in a human-readable format.

Update the infoBanner function in the banner-injection snippet to include the following code:

const options = { weekday: 'long', month: 'short', day: 'numeric' };const formatter = new Intl.DateTimeFormat('en-US', options);const formattedBillingDate = formatter.format(new Date(window.Awtomic.subscriptionDetails.NextBillingDate));// You can now use the formattedBillingDate variable in the banner content

Update the banner content to include the formattedBillingDate variable:

<p style=""> Your next billing date is ${formattedBillingDate}.</p>

Save your changes.

Now the banner will display the customer's next billing date, making the content more personalized and relevant. You can similarly access other subscription details from window.Awtomic.subscriptionDetails and include them in the banner content as needed.