While you create a new email template for newsletters, you often have to do the same routine actions. For instance, imagine you have a website where products are published. If you need to send an email about the promotion with a link to ten products from your site, you need to download ten pictures, product names, prices, brand names, and links to indicate them under the "Buy" button.

These downloaded elements are usually applied in the email several times, for example, the name of the product is used 3 times: in the field “product names”, for the title and alt-text of the picture of the product. The same goes for the link, we apply it to the button, the picture, the title, etc. So, in future new actions, you will again have to repeat the steps described above. What if there are not 5 products, but 50? It's a pain, isn't it?!

To reduce the loss of your time for performing routine operations, we created a new entity – a smart element that allows you to automate this process!

Smart Elements is a functionality designed by Stripo. It allows you to automate email production. This is a true time-saver for those who build multiple product cards and email digests. You configure them once and use them across numerous promo campaigns.

Also, it's important to know that you can apply smart elements for Stripes, Structures, and Containers.
​

For now, we have 2 ways to configure smart elements inside your email templates:
​

All you have to do is paste a link to your website, and Stripo by itself pulls the product image, product description, and product name into your promo emails.

No need for you to save and upload images, no need to copy and paste product descriptions, or add necessary URLs to buttons — we’re on it.
​
To use this method, we first need to find out if the site you want to download content from supports Open Graph tags.
If your site contains OG tags (Open Graph tags), you simply insert a link to the product and indicate where exactly in the email this or that information about the product should go. It will take you less than 5 minutes – just one time. The next time you use Smart Elements again, all you need to do is paste the product link without any configuration.

We need to go to the site from which you want to download product information using smart elements

If your website supports the OG tags, we’ve prepared a brief manual on how to configure smart elements in under 10 minutes. Please check this article.
​
​

There are two ways to activate the smart option:

1) Creating a smart-element manually:
For example, in the Stripo editor, we drop the structure from one container (at once, I will make a reservation: it’s up to you personally how many containers in the structure you need).
In the first container, I add the blocks necessary to me (Picture, two blocks Text, Button) – I do the “skeleton” of the product card.

Next, I select the container with the base blocks (for this, I click on the blue label “Container” from the bottom), select the “Data” tab in the sidebar, and click on the “Connect Website page” button to activate the Smart property.

In the "Link" field we should insert the URL link to our product. Here, you will find a link to the detailed instructions on how to configure smart elements step by step.

​2) Utilizing a smart element from the Stripo modules library:

While in the template, you can use Pre-build modules in which all smart elements are already activated.
​

You just need to go to the Structures&Modules section → General Modules, and in the sorting tab, select Product Card and Set of Product Cards.

Or you can use any of our prepared templates with smart elements.
You should use sorting by Feature and select Smart-Elements.

If you choose this option, the smart-elements will be activated by default, all that remains is to add the URL link in the same way as we saw in the example above.
​

If your site does not support the OG tags, please refer to our “Smart Elements Reduce the Time Spent on Creating Similar Emails” blog post for the manual on how to work with the smart elements in this case.

Using this method, you need to set up the content once, in which the title of the product, picture, price, description, and button “Buy” will be arranged in the desired order and their appearance. Then add the variables, set the rules where to get the values and where to apply them, and that's all – the smart element is ready for use.
​

Let's look at an example of adding a new variable for the price.

​1. Follow the "Config" tab;
​

​2. Click on the "+" button, and give the variable's name. After that, click the "+Item" button and select the desired block. In our case, this is the new third block, which I added specifically for the price. It will be highlighted with a frame in the smart element. After that, we just need to click on the "Save Configuration" button.
​

​3. In order to add unique information from the site into the smart element, we just need to copy the CSS selector of it. In our case, we want to load the price, which means we need a price CSS selector.
​
To do this, open the site page with the product, right-click on any free field, and go to the inspect section. Next, click on the "Select an element in the page to inspect it" button and hover over the price. After this, the code that is responsible for the price will be highlighted, and you just need to right-click on the highlighted code, go to the
​"Copy section" → "Copy selector".
​

​4. Return to the editor, and in the smart-element settings, go to the Direction rule of the desired block, paste the copied information in the "Selector" section, and click "Check Rule and Save".
​

Thus, using smart elements, you can upload any information from your site to the email template, you just need to copy the selector and paste it to the desired block into the smart settings​.
​

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.