How do I get This code to show as is on shopify

Store Design
1

Page: https://laureloptics.com/pages/affiliate-program

Code for what I want. Not sure how to get it to present the same on shopify.

body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; }

.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(“https://cdn.shopify.com/s/files/1/0468/2255/5808/files/Merger_Lifestyle.png?v=1662487108”);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}

.hero-text button:hover {
background-color: #555;
color: white;
}

Affiliate Program

Drive traffic to LAURELOPTICS.COM & make money! You'll earn commission on every purchase made by customers that you refer.

Register Now

*30 Day Cookie

2

HI @LaurelOptics

You should create a custom page template for Affiliate to add the html codes

3

Unfortunately, adding the html code to a new page template did not work as expected.

4

It seems that the CSS is causing the break… any thoughts?