If you need to highlight an ebook or a plan, promote a book launch or pre-sale, you can place an ad in the Widgets section along with an informative text, an image and a purchase or subscription button. This will help you capture the attention of your users and allow you to make sales in a few clicks.

We are going to show you how to add a banner in the Widgets section of the store like this:

⚠️ Keep in mind that if you already have components in the Widgets section, you can establish the order of these, taking into account that the code you place at the beginning of the box will be what is displayed first.

1. Copy the following code:

<div class="container mt-5 mb-4 pb-5">
<link
href=" https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap "
rel="stylesheet"
/>
<div class="row custom-landing">
<div class="col-12">
<div class="row">
<div class="col-12 p-0 p-md-3 col-sm">
<div>
<h1 class="text-uppercase font-weight-bold"> HOW TO WIN FRIENDS </h1>
<h2 class="mb-4 text-uppercase font-weight-bold">
​AND INFLUENCE PEOPLE
</ h2>
<h4 class="my-3 text-uppercase font-weight-light">
​DALE CARNEGIE
</h4>
</div>
​
<div class="my-5">
<p>Dale Carnegie wrote this book as a supplement to his course on Public Speaking and Human Relations and never imagined that it would become a bestseller and that people would read it, criticize it, and live by its rules. Carnegie interviewed many renowned people to take examples from their lives. Among them are Edison, Franklin D. Roosevelt, and James Farley.
</p>
</div>
<div class="d-none d-md-block">
<article
data-id=" 264286 "
class="Issue Issue-button mt-5 mb-3"
>
<button
type ="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
>
Read Now
<
​
​
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
>
Buy it now
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
>
Register and purchase
</button>
</article>
</div>
</div>
<div class="col-12 col-sm ml-auto mr-auto text-center">
<div class= "cover m-auto">
<img
class="img-fluid truncate"
src=" https://storage-aws-production.publica.la/demo-en/issues/2021/03/2F8IqY6zuH3r2C6D/1615388569_cover.png "
/>
</div>
</div>
</div>
<div class="my-5">
<p>Dale Carnegie wrote this book to be a supplement to his course on public speaking and human relations, and he never imagined that it would become a bestseller and that people would read it, criticize it, and live by its rules. Carnegie interviewed many renowned people to take examples from their lives. Among them are Edison, Franklin D. Roosevelt, and James Farley.
</p>
</div>
<div class="d-md-none text-center m-auto">
<article data-id=" 264286 " class="Issue Issue-button my-4">
<button
type ="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
>
Read Now
</button>
<
​
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
>
Buy it now
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight -bold canBeRegister"
>
Register and Acquire
</button>
</article>
</div>
</div>
</div>
</div>
​
<script>
document.addEventListener('DOMContentLoaded', function() {
var classesList = document.querySelector(
'article[data-id=" 264286 "]:not(.Issue-button)'
);
var IssueCustomButton = document.querySelectorAll(
'article[data-id=" 264286 "].Issue-button'
);
​
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--visible');
});
​
if (classesList && classesList.classList.contains('Issue--canBeRead')) {
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--canBeRead');
});
}
});
</script>

Keep in mind that you must modify what is in bold, placing:

- Title of the Ebook or Plan
- Author or subtitle
- Description
- [data-id] *

( * ) In [data-id="..."] you must place the data-id of the publication or plan that you choose to highlight.

To know this information you must search for the ebook or the plan from the main section of the store and right click on it to open the developer tools.
Choose the Inspect or Inspect option.

Above the article tag line, you will find the data-id attribute that you must place in the code that we share above:

2. Once you have added the data in the code, paste the code in Control Panel > Settings > Widgets and click Save.

3. Now we are going to add the styles. Go to Control Panel > Settings > Advanced and paste the code that we share below in Custom before </body> code :

You can modify the text color and background color by adding the HTML code for each color in background-color (background color) and color (text color). You can also put a background image as in the example, changing the URL in bold.

👉If you have the Custom CSS field , you can place the code there by removing the <style></style> tags from the beginning and end of the code.

Click Save.

Ready! You already have your ad available in the store.

If you want to further modify the customization you must have knowledge in HTML , CSS and JavaScript or you can consult a specialist.

We hope this tutorial has been easy for you. If you have questions, write to us at [email protected]