Once you’ve launched your Online Store with Ucraft's eCommerce App, you can start making use of the eCommerce Elements to create your beautiful storefront.
You'll find all the eCommerce Elements in Elements Section on your Left Panel, including Cart, Categories, Product Filter, Single Product and Products. \
Products
Let's start with Products, the element that allows you to display all your products on your page. All you need to do is add the element to the crafting area by simply dragging it wherever you want the products to be showcased on your page.\
- To access the Products Settings, simply right click on your Products → Edit eCommerce Products and you'll find Layout, General and Distance Settings.
- 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 Padding.
- 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.
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.
With the Style Settings, you can pick the desired color for the Title and Details Texts. In addition, you can edit the font size, Product Name, Description and Price.
To add a new product, click the appropriate icon and you'll be redirected to the Products section in your eCommerce App. 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.
- With Visibility Settings, you can make a certain Element appear on Desktop Only, 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, simply click Delete to remove them from your page. \
If you want to display only one of your Products, you can use our Single Product Element. Simply drag and drop the element to your desired area → click on Select Product → choose the product you want to display → Use Selected.
To customize your Single Product Element, simply right click on it → Edit eCommerce Product → and you'll see all the available Product Settings. You can change the Size and Type of the Title, set Gallery Padding, Button Style, etc.
Custom labels of the 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'll 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.
If you want to switch the product, simply right click on your element → Change Products → and select the one you want to replace it with.
- You will also find the Alignment as well as the Visibility settings right here. If you want to delete the product, simply click on the Trash icon to remove it.
Adding Cart to Store
Moving on to the Cart element. 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.
To add it, 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.
- To customize it, simply click on the cart icon → Edit Button → change the icon, Cart Size, Color, etc. Don't forget to hit Save once you're done.
You can adjust the position of your Cart through the Alignment setting and set the visibility of your cart from the Visibility Settings. To delete it, simply click on the Trash icon.
In case you want to show the Cart popup every time a customer adds an item to cart, simply go to your Dashboard → eCommerce App → Settings → Cart & Checkout → scroll down to the Checkout Settings → enable the 'Open bag when "Add to bag" is clicked' option → and hit Save.
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 using our eCommerce Categories Element.
It allows you to add 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 and drop the categories element 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.
Right click on the element and you'll find loads of options to customize the element's Layout, Style and more.
You can manage the categories style-wise from the 'Edit eCommerce Categories Styles' section.\
- You can change the categories by right clicking on the element → Change Categories → select and deselect the categories you want → hit change to finalize it.
Have more questions? We recommend checking out these Articles for a bigger view of Ucraft.
And always remember, we're just a step away! Hit the Chat box in the lower right corner and our Support Team will be glad to assist you!