Step 1: Add CSS for the Banner
Add the following CSS to your theme's style.css file:
/* Style for the vertical banner */
.vertical-banner-container {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 200px; /* Adjust the width as needed */
background: #f8f8f8; /* Adjust background color as needed */
border: 1px solid #ddd;
z-index: 9999;
}
.vertical-banner img {
width: 100%;
height: auto;
}
Step 2: Add HTML for the Banner in functions.php
Add the following PHP code to your theme’s functions.php
file to display the banner on specific pages:
function add_vertical_banner() {
if (is_page(array('k-beauty', 'skincare-2', 'by-concern/anti-aging', 'by-concern/brightening-glow', 'by-concern/hydrating', 'by-concern/skin-barrier-acne-blemishes', 'by-concern/shrinks-pores-dullness', 'makeup', 'cleanser', 'sunscreen', 'masks', 'hair-body-care', 'mens', 'gift-sets', 'beauty-device'))) {
echo '<div class="vertical-banner-container">
<div class="vertical-banner">
<center><img src="/wp-content/uploads/2024/07/cosmetic-vertical-top5.jpg" alt="Banner 0"></center>
<a href="https://giantsmarket.ca/product/mediheal-watermide-essential-mask-%eb%a9%94%eb%94%94%ed%9e%90-%ec%9b%8c%ed%84%b0%eb%a7%88%ec%9d%b4%eb%93%9c-%ec%97%90%ec%84%bc%ec%85%9c-%eb%a7%88%ec%8a%a4%ed%81%ac/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical-01.jpg" alt="Banner 1"></a><br/>
<a href="https://giantsmarket.ca/product/apieu-pore-primer-30ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical02.jpg" alt="Banner 2"></a><br/>
<a href="https://giantsmarket.ca/product/missha-vita-c-eraser-toning-cream-30ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical03.jpg" alt="Banner 3"></a><br/>
<a href="https://giantsmarket.ca/product/%ec%8a%a4%ed%82%a8%ed%91%b8%eb%93%9c-carrot-caliming-pad-250ml/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical04.jpg" alt="Banner 4"></a><br/>
<a href="https://giantsmarket.ca/product/cosrx-snail-92-all-in-1-cream-100g/"><img src="/wp-content/uploads/2024/07/cosmetic-vertical05.jpg" alt="Banner 5"></a>
</div>
</div>';
}
}
add_action('wp_footer', 'add_vertical_banner');