This is a demo store that utilizes the Azkarra Theme. Please note that no orders will be fulfilled as these are solely sample/test data.
Table of Contents:
- Important Magento 2 Variables
- Basic Text Formatting Elements
- Buttons
- Forms
- Font Icons
- Lazyload (for performance)
Basic Magento 2 Variables
Link to a Store Page (for href="" without hardcoding the domain): {{store direct_url='bags.html'}}
Link to an Uploaded Image (for src="" or data-src="" attribute): {{media url='wysiwyg/image.jpg'}} or {{media url='wysiwyg/folder-name/image.jpg'}}
Basic Text Formatting Elements
Product Title [h2]
This is an example [p] paragraph with a short product description. [em] italicized text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat ac lectus [strong] bold text enhancement malesuada pellentesque vel ut nisi. And an example of [u] underlined text.
Product Main Features [h3]
Bulleted list [ul.square]:
- High-quality material
- Water-resistant
Bulleted list [ul.disc]:
- Comfortable to wear
- Unique design
Bulleted list [ul.triangle]:
- Lorem ispum
- Lorem ipsum 2
Available Sizes: S, M, L, [del] XL
Product Details [h4]
This is an example [em] extended description of the product. [strong] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec elit nec quam lacinia dictum. Nulla facilisi. Sed eget turpis massa. Praesent fringilla, lectus id facilisis ultricies, neque nisi rhoncus velit, in bibendum odio sapien nec felis. Nulla facilisi. Proin nec consectetur elit. Nulla facilisi.
Usage Instructions [h5]
This is an example crossed-out usage instruction for the product. Aenean efficitur ipsum eu justo blandit, vel gravida quam interdum. Sed vestibulum, lorem vel bibendum pharetra, risus eros condimentum est, a tincidunt ipsum lectus sit amet odio. Maecenas vitae mollis nunc. Pellentesque euismod quam ut nibh fringilla, vitae vulputate lectus rhoncus. Nullam accumsan turpis eu elit auctor, a dictum elit sodales. Integer ut vehicula dolor, a tincidunt odio. This demonstrates the use of any color using: style="color:orange".
Examples of Product Usage [h6]
Numbered list [ol]:
- For home use
- In the office
- Outdoors
- For special occasions
If you're interested in purchasing this product, click this [a] link: Buy Now.
Center-aligned text
(.align-center or style="text-align:center;") Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!
Right-aligned text
(.align-right or style="text-align:right;") Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!
Buttons
Forms
50 Icons
Use CSS class: .icon-name, e.g. .icon-phone
Lazyload
Image
![]()
data-src="path/to/image.jpg" class="lazyload" width="100" height="100" alt="Lazyload image" />
Iframe
Script
Background image
data-lazy-background="background: url('/path/to/background-desktop.jpg') no-repeat center/cover;height: 300px;"
data-lazy-background-mobile="background-image: url('/path/to/background-mobile.jpg');">
...