Once you've added the hero block to your shopify store theme, you may notice whitespace around the left & right edges like the following image:
In order to remove this and fill the screen entirely, we need to add the small code snippet below into the 'custom css' section from the shopify theme editor.
Instructions to remove margins
1) Navigate to the shopify theme editor by clicking 'customise' under your desired store theme
2) From the left panel, click on the small cog icon to open your theme settings
3) Scroll down to 'custom css' and paste in the below code
.loyalty-hero-banner {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 0 !important;
margin-top: 0;
margin-bottom: 0;
}4) The whitespace should now be removed successfully from your hero component
