Once you’ve launched your Online Store with Ucraft and created products through the eCommerce App, you can start making use of eCommerce Elements to create your beautiful storefront.

You'll find all the eCommerce Elements at beck and call on the Elements Section, Left Panel: be it an eCommerce Cart, Categories, Products or a Single Product.

What about checking out all them one by one?


Let's start with Products, that enable adding all your products to your page with a single click.

All you need to do is add the element to the crafting area simply dragging it from the Elements Section and dropping wherever you want the products to be showcased on your page.

Voila, all the products created on your Online Store are here, ready to be customized and SOLD!

Go for 'Edit eCommerce Products' from settings clicking on the products.

You'll find Layout, General and Distance Settings under this option.

Choose the Category you want to be showcased from the Category Filter and define your Layout Preferences with the help of controllers.

These settings include adjusting the number of Products per Row and Page as well as the Paddings.

'General Settings' refer to enabling Showing the Images and Titles, setting the Aspect Ratio, Title Size and Type.

You can also decide whether you want to Show Products' Description as well as set the desired Size.

Go forward to check all the options available to create the look and feel you prefer. The switchers are designed to make the process even easier!

Changing the Add to Cart Button, its Position and Text is not a problem either.

All you need to do is choose the desired option from the dropdown menu or enter your text.

Same with the Load More button, in case you have tons of products.

To enable/disable the 'Sort by' functionality, simply use the 'Show Sort by' switcher.

You can adjust the radius of the dropdown borders, change text alignment as well as adjust vertical distance between each item in dropdown list.

And finally, the 'Distance Settings', that allow changing the distance between the Image, Title, Description, Category, Price and the Add To Cart Button.

What do you think about checking out the 'Style Settings'?

Pick the desired color for the Title and Details Texts.

You can also edit the font size of Product Name, Description and Price.

To add a new product, click the appropriate icon and you'll be redirected to your eCommerce App, Products section. You'll get to create a new Product here, add an image, description and other product details.

You'll find an option to change the Products' Alignment as well as the Visibility Settings.

It enables making a certain Element appear on Desktop or Mobile only, or everywhere by default. Simply hit 'Visibility Settings' and choose the desired option from the dropdown menu to get full control over the Visibility of the eCommerce Products on your page.

Mind the Location visibility as well. Include or exclude specific cities or countries or set the appropriate Custom IP.
If you don't want to showcase the products on your page anymore, Click ‘Delete’ to remove them from your page in a blink of an eye!

Want to focus your buyers' attention on an individual product?

Go for eCommerce Single Product Element. Once again, select the Element and drop it on the desired area on your page.

Now, click ‘Select Product’, choose the desired product and hit ‘Use Selected’.

Time to make the Product look exactly the way you want!

Click ‘Edit eCommerce Product’ to manage the Product details you want to see on your page. You can also change the Size and the Type of the Title, set Gallery Padding, Button Style and make other regulations.

Custom labels of eCommerce Single products are translatable as well. To do so, move to > General Settings section on Edit eCommerce Products, Labels and apply all the desired changes.

Make the necessary adjustments from the 'Style Settings' of the Element like changing the Title and Details text colors.

If you click on 'Size' you will be able to change the Title font family, size, type, weight, letter spacing as well as change the size of Price, Description, Quantity, Options, etc.

Want to switch the Product? Just click ‘Change Products’ button and select the one you want to replace it with.

You will also find the Alignment as well as the 'Visibility settings' right here.

Visibility Settings allow you to control the Element’s visibility on different devices: just choose for it to be visible on Desktop, on Mobile or on both.

In case you’ve changed your mind and you don’t need the Element anymore, click the ‘Remove’ button to Delete it.

Adding Cart to Store

Let's move forward to another important eCommerce Element, the shopping Cart.
Your clients won't be able to complete the purchase process if you don't add one to your online store.

The Shopping Cart helps them collect all the Products they have “picked up” in one place and review them before proceeding with the purchase.

You know how to add it, right?

Go to Elements Section, drag the Cart Element and drop it wherever you want it to be placed. Make sure it's well visible on your page, so the Header is a nice choice.

Click on the element and you'll have 3 options for your Shopping Cart Style/ Layoutfrom the Edit Button option: Icon, Small and Normal Layout. Choose iconic design, text or a default one.

If you have picked the 'Icon', scroll down to select the one that looks better on your page.

Move the pointer to change the Cart Size. Hit ‘Save' once you are done to save the changes.

You can change the color of the icon as well simply picking the desired color from the Color Palette or dragging it from the Colors Tool on the Left Panel and dropping it on the Cart element.

You may not like how your Element is positioned on the page, never mind.

Change that in a blink of an eye clicking on the ‘Alignment’ option and selecting the position you prefer: top, center or bottom.

Make sure not to miss the 'Visibility Settings' either!

To remove the e Commerce Cart Element, choose the ‘Trash’ option and click ‘Delete’ to confirm.

In case you want to show the Cart popup every time a customer adds an item to cart you'll need to move to your eCommerce App→ Cart & Checkout and enable the "Open bag when "Add to bag" is clicked" option.
Note: Keeping the option disabled will make purchase process smoother and increase the conversion rate.

Once you have added all the products to your store, time to categorized them by different criteria, just like putting t-shirts and jeans on various shelves.

Here's where the eCommerce Categories Element comes in handy!

It enables adding Categories to your shop page and lets your buyers choose the section and the category of the products they are interested in.

To add eCommerce Categories to your website simply drag the eCommerce Element and drop it to your desired area.

Now you can navigate to your eCommerce App to Select the Categories you want to be showcased on your page.

Here and now, you can manage the categories and the products in one place.

Hit 'Use Selected' once you've chosen the categories.

Click on the element and you'll find loads of options to customize the element's Layout, Style and more.

Make the categories Vertical or Horizontal or Stretch Labels. Don't be afraid to play a little bit with the Layout!

Manage the categories style-wise from the 'Edit eCommerce Categories Styles' section.

Change the Categories clicking the appropriate icon and select the ones you want to replace the current categories with.

Hit 'Change' and you're good to go.

Let's move to changing the eCommerce Categories Alignment along with the Visibility Settings.

Visibility Settings enable making a certain Element appear on Desktop or Mobile only, or everywhere by default. Simply click 'Visibility Settings' and choose the desired option from the dropdown menu to get full control over the Visibility of the navigation on your page.
If you don't need the Element anymore, click ‘Delete’ to remove it from your page.

Said and done!

Make a wise use of the eCommerce Elements to showcase your products in the best light and to create a professional Online Store.

Need further help? We're here to assist you in setting your store. Just hit the Chat Box in the lower right corner and drop us your questions. You'll surely receive a timely and friendly support from our team.

Did this answer your question?