Do you want to use this element?

  1. Subscribe or login to Flatzone
  2. Download element
  3. Upload to your Flatsome site
  4. And done!

Compatible with

Learn more on
This is a
Available for



Modern product page, to add credibility and trust to your store/products.

Frequently Asked Questions

from flatsome users

To upload a shortcode, CSS, and images to your Flatsome website, you can follow these steps - please don’t skip any of them:

  • Shortcodes: You can copy the shortcode, add a new UX Block, choose Text (not Visual) and paste the shortcode in it.
  • CSS: You can add custom CSS by going to Flatsome > Advanced > Custom CSS. You can also add custom CSS by creating a child theme and adding the CSS to the style.css file.
  • Images: You can add images to your Flatsome site by uploading them to the media library. To do this, go to Media > Add New.

Yes. To ensure that your website matches the "Preview" style, it is important to upload the elements in the correct sequence:

  1. First, upload any necessary images to the media library.
  2. Next, add the custom CSS to your theme by using the Custom CSS option in the Flatsome > Advanced or by creating a child theme and adding the CSS to the style.css file.
  3. Finally, add the shortcode using a UX Block.

It is important to note that not all elements may require all three types of files (images, CSS, and shortcodes), but it is important to upload the appropriate files in the correct sequence to achieve the desired result. Skipping or changing the order in which the files are uploaded may result in a difference in the final outcome.

One of the possible outcomes of not following the correct sequence is that the color and font of your website will not match the preview, as they will be retrieved from the default style of your website.

To upload custom CSS code to a Flatsome site, you can use the Custom CSS option in the Flatsome > Advanced or by creating a child theme and adding the CSS to the style.css file.

  1. First, go to Flatsome > Advanced in your WordPress dashboard.
  2. Next, navigate to the Custom CSS option.
  3. Then, paste your custom CSS code into the text area provided
  4. Finally, click on the "Save changes" button to publish it.

Alternatively, you can create a child theme and add the custom CSS code to the style.css file. This method is recommended for users who want to make more extensive changes to their site's design.

Make sure to preview your changes before publishing them to your live site

The downloadable file you downloaded from contains a variety of different types of files. The shortcode, images, CSS code, and readme files are some of the necessary components of a Flatsome element that has been packaged for download.

If you have any additional inquiries, please do not hesitate to reach out to us. We will make every effort to furnish you with the information you require. Premium clients have access to specialized support, while free users can contact us via email.

Our support channels can be located in the "My Account" menu or at the footer of our website.

You cannot copy content of this page

To provide you with a better browsing experience, this website utilizes cookies. You consent to our usage of cookies if you browse this website.