UI Block (Shortcode)
UI Blocks, also known as Shortcodes, are small pieces of code that allow you to add predefined elements to your website. They are used to enhance the functionality of your website without the need to write custom code.
Usage
To use a shortcode, simply add the shortcode to the content of a page or post.
For example, to add a Google Maps to a page, use the following shortcode:
[google-map]New York, USA[/google-map]
The above shortcode will add a Google Map to the page with the location set to New York, USA.
Go to the frontend of your website to see the result:
Available Shortcodes
About
Display simple information about your shop, company, or organization.
[about image_1="path_to_media_image" image_2="path_to_media_image" subtitle="Sample subtitle" title="Sample title" description="Sample description" action_label="Contact Us" action_url="/contact"][/about]
Ads
Display advertisements on your website. There are 4 different styles available.
For example:
[ads style="1" key_1="ADS_KEY" key_2="ADS_KEY"][/ads]Style 1
Style 2
Style 3
Style 4
To use the Ads shortcode, activate the Ads plugin and create an ad unit in the Ads section of the admin menu dashboard.
Then, choose the ad unit to display in the shortcode.
App Downloads
Display app download links with icons.
Example:
[app-downloads title="Sample title" google_label="Google Play" google_icon="ti ti-brand-google-play" apple_label="Apple Store" apple_icon="ti ti-brand-apple-filled" screenshot="path_to_media_image"][/app-downloads]
Blog Posts
Display a list of blog posts.
Use the following shortcode to display a list of blog posts:
[blog-posts title="Sample title" type="latest" limit="3"][/blog-posts]The above shortcode will display the latest 3 blog posts.
Contact Form
Display a contact form on a page.
[contact-form show_contact_form="1" title="Sent A Message"][/contact-form]
Ecommerce Categories
Display a list of specific product categories.
[ecommerce-categories style="slider" category_ids="1,2,3,4,5"][/ecommerce-categories]We have 2 styles available for the Ecommerce Categories shortcode:
Grid style
Slider style
Ecommerce Coupons
Display a list of specific available coupons.
[ecommerce-coupons coupon_ids="1,2,3,4"][/ecommerce-coupons]
Ecommerce Flash Sale
The Ecommerce Flash Sale shortcode can be used to display a list of products or a countdown timer.
[ecommerce-flash-sale style="1" title="Sample title" flash_sale_id="1" limit="4"][/ecommerce-flash-sale]The above shortcode will display a list of products with the specified flash sale ID (in this case, 1). Make sure to create a flash sale in the admin panel first.
List product style
Countdown style
Ecommerce Product Groups
Product groups are used to display a list of products in a group. There are 5 groups available:
- All: Display all products
- Featured: Display featured products
- On Sale: Display products that are on sale
- Trending: Display trending products
- Top Rated: Display top-rated products
[ecommerce-product-groups title="Sample title" limit="8" tabs="all,featured,on-sale,trending,top-rated"][/ecommerce-product-groups]You also can choose the style tabs or columns for the product groups.
Tabs style
Columns style
Ecommerce Products
This is the most used shortcode to display a list of products. In this shortcode, you can choose the category, collection, or specific products to display.
[ecommerce-products style="grid" category_ids="20" limit="12"][/ecommerce-products]The above example will display 20 products in the category with the ID of 20.
You also can control the left side of product list to display the category detail, and ads banners.
Grid style
Slider style
Simple style
Gallery Images
Display a list of images in a gallery. There are 2 different styles available.
Style 1
Style 2
TIP
Activate the Gallery plugin to use this shortcode.
Image Slider
It used to display a list of images in a slider. Usually for brands, logos, or sponsors.
Simple Slider
Usually used to display a list of images in a slider on the hero section of the website.
First, you need to create a slider in the admin panel. Go to Simple Slider on the admin menu dashboard to create a slider.
There are 5 styles for different purposes:
Style 1
Style 2
Style 3
Style 4
Style 5
TIP
Activate the Simple Slider plugin to use this shortcode.
Site Features
Display a list of site features. There are 4 different styles available.
Style 1
Style 2
Style 3
Style 4
Testimonials
Add testimonials to your website. There are 3 different styles available.
[testimonials style="1" testimonial_ids="1,2,3"][/testimonials]Go to Testimonials on the admin menu dashboard to create testimonials and assign them to the shortcode.
TIP
Activate the Testimonials plugin to use this shortcode.
Style 1
Style 2
Style 3
