Your Products section is your online shop window. Keeping it up to date with eye-catching images and exact prices helps customers buy with confidence. Watch the video, or follow the steps below.
Step 1: Open the UENI Editor
Log in to your UENI Hub and click Edit Website. Then click Pages and open the page with your products.
Step 2: Go to Products
Click Products.
Step 3: Edit the section title
Enter a name in the Title field and click Save.
Step 4: Create a product group
Click Add new group to create a category, such as "Luxury Suits". You can rename it at any time.
Step 5: Add a product and its details
Click Add new product in your group.
Then fill in the details:
Product Name and Price.
Pricing Unit: show a unit or extra information, like "per box".
Show "Add to Cart" button: choose whether the product can be bought.
Product Variations: offer options like color, size or material. Learn how product variations work.
Media: add images, or videos from YouTube or Vimeo.
Description: what customers see when they click the product.
Share your Product: share it on social media or copy its link.
Inventory
Track inventory for this product on: enter your quantity. UENI updates it as items sell and shows Sold Out at zero, so you never oversell.
Track inventory off: use the In Stock checkbox to control availability yourself.
Pro tip: Running a sale? Add a Promotional Price to show the discount.
Click Save to publish your product.
Step 6: Move a product to another group
Open the product, choose a new group from the Group dropdown and click Save.
Step 7 (Optional): Turn on the Advanced Layout
Want your Products section to look exactly the way you picture it? The Advanced Layout gives you control over columns, spacing, colors, images and text. Everything works with simple sliders and menus, so no code is needed.
In the UENI Editor, open your Products section.
Change the layout type from Basic to Advanced.
Click Save.
Click Design Products to get started.
The settings are grouped into three areas: Section, Content and Card.
Section
Gap Below Title: space between the section title and your products, 0 to 100px.
Widget Padding (top, bottom, left, right): space between the Products widget and the menu, footer and screen edges, 0 to 200px.
Section title padding (top, bottom, left, right): space around the section title, 0 to 200px.
Background Color: the background color of the section.
Content
Columns: how many products show per row, from 1 to 12.
Container Size: Default Value, Full Width, Small, Medium or Large. This also changes the size of your products.
Container Alignment: Default (Center), Left, Right, Space Evenly or Space Between.
Gap Between Items: space between products, 0 to 100px. Container Padding on each side goes from 0 to 200px.
Background Color and Font Color: the widget background and the color of your product group titles.
Desktop Categories Layout: show your groups as Headers, Tabs, Accordion or Hidden.
Card
Spacing: Gap inside item (0 to 100px), Item padding on each side (0 to 200px) and Min Height.
Content Layout: Stacked (default), Split, Inline action or Heading row.
Content Alignment (left, center, right) and Content Vertical Alignment (top, center, bottom).
Card style: Elevation (1 to 24), Hover Effect (None, Elevate, Lift, Grow, Image Zoom), Border corner radius (0 to 100px), Border Width (0 to 20px), Border Color, and a solid or gradient Background (Linear, Radial or Angular).
Text: line height, font size, weight, margins and color for the title, description and price, plus Promotional Price Color.
Action button: full customisation, width (Stacked and Split layouts only), margins, font size, padding (0 to 100px), and background, text and border colors.
Image: Image Container Position (Left of Card, Right of Card, Top of Card, Bottom of Card, Fit Card), Aspect Ratio (1:1, 4:3, 3:4, 16:9, 9:16), Width (10% to 100%), Corner Radius (0 to 200px), Image Fit (Cover, Contain, Fill, None), Image Position and Disable Gutters.
Pro tip: Click the down arrow next to a setting to change it for Phone, Tablet, Laptop or Desktop. Double-click the number next to any slider to type in an exact value.
Step 8 (Optional): Filter your Products
Warning: You can only filter your products on the page where they are displayed. If you are using the Catalog, the Filter option will not be available.
Do you want to showcase a specific product/products on one page? Now you can!
The Product Filter allows you to select the Products and Categories that will be displayed on that specific Product Widget:
After you click on the Products Filter option, all of your Products and Categories will be shown to you. Tick the products and categories that you want to display on the page to show or hide them:
Once you have decided which products you want to showcase, save your work. Only the selected products will be displayed; the rest will be hidden until you enable them again.
Note: This doesn't delete any products only hides them. The products are still viewable if they exist in another section.
Final thoughts
You're ready to showcase your products! For more ideas, read getting the most out of your products on the UENI Blog.