"Products are the best representation of a foreign trade enterprise's strength."
In the SX-Creval system, product lists are no longer just rigid image stacks. We've built in an "Advanced Product Card Component." Whether you're showcasing large machinery or precision hardware accessories, you can easily configure a uniformly sized product display matrix with multiple advanced hovering interactive effects using a "building block" approach.
1. Basic Layout and Grid
You have complete control over how the product cards are arranged on the page:
- Number of grid columns : Supports setting two, three, or four columns of products to be displayed in one row on the computer. (The system will automatically adapt to single or double columns on the mobile device, so you don't need to worry about it).
- Number of rows in the grid : Used in conjunction with the number of columns, this determines how many rows of products are displayed in this block.
- Card text alignment :
- Left alignment: This style leans towards the minimalist reading habits of Europe and America, giving it a more modern and business-like feel.
- Center alignment: Traditional and stable, suitable for displays with few card elements and mainly images.
2. Smart Image Ratio
Different industries offer products that suit different display frame shapes. Simply upload your original image, and SX-Creval will automatically perform lossless cropping and intelligent scaling in the background, ensuring every image on the front end looks neat and uniform!
- 1/1 (square) : The most classic cross-border e-commerce ratio (similar to Alibaba style), which is very suitable for hardware accessories, electronic components, daily consumer goods, etc.
- 4/3 or 16/9 (horizontal long image) : Ideal for showcasing "large machinery and equipment", "production lines" or "auto parts", demonstrating the product's broad appeal.
- 5/6 (vertical long image) : Suitable for displaying "clothing", "packaging boxes" and "tall and slender instruments and equipment", which can visually enhance the product's upright appearance.
(Fine-tuning: You can also enable *“Image Micro-Border”* for your images and choose right angles or slightly rounded corners in “Rounded Corner Settings” to match your brand's style.)
3. Advanced Hover Effects
This is one of SX-Creval's most captivating features! What happens when overseas customers hover their mouse over your product image? We offer a variety of world-class front-end interactive animations:
Classic scaling class (most versatile)
- Zoom in : When the mouse hovers over the image, it slowly zooms in within the frame, bringing the customer closer to the product and revealing every detail.
- Zoom out : The image is slightly enlarged by default, and returns to its original size when the mouse hovers over it, allowing your view to focus.
3D and spatial simulation (highly technological)
- 3D Flip Card : Highly recommended! Like flipping over a playing card, the card flips 180 degrees in 3D when you hover your mouse over it, revealing a cool dark background and a "View Details" button on the back, making it highly interactive and fun.
- 3D Tilt : The card will slightly tilt and float with shadows following the mouse position, giving it a realistic texture, just like a real physical card.
✨ Light and shadow texture (high-end texture)
- Glow / Edge Sweep / Split Light : When the mouse hovers over the card, it leaves a high-end gloss or glass reflection on the surface, making it ideal for high-tech products or the new energy industry.
- Overlay Frame : The image is darkened by default, and a beautiful four-corner frame and product title appear, which is suitable for "atmospheric" product displays that mainly feature full-screen large images.
4. Carousel Style
If the number of your products exceeds the set grid number, the system will automatically convert it into a "sliding carousel". You can customize the appearance of the controller:
- Bottom dots (Dots) : The most common style, simple and understated.
- Side-mounted arrows : Floating buttons displayed on the left and right sides of the product for easy and quick switching.
- Top-right arrows : A very modern design! Two slender arrows float side by side in the top right corner of the module, a style currently favored by many top international websites.
- Show All (Both) : Displays both the arrow and the dot simultaneously.
💡 Operations and Content Tips (Pro Tips)
- Source of product information :
The title and brief description displayed below the card are automatically extracted from the product page's "SEO Title" and "Search Description." Please be sure to fill in these two fields when publishing your product; this will not only make your card display more comprehensive but also greatly benefit your Google ranking! - The hidden conversion tool – "View Product" :
To keep the interface clean and tidy, the bottom of the cards is very clean when customers are browsing normally; however, when the mouse hovers over a card, the system will automatically display a "View Product" tooltip with an arrow pointing to it, smoothly guiding the customer to click and enter the details page. - Maintain a consistent tone for motion effects :
It is recommended that you consistently use one or two hover effects in your product listings across the entire website (e.g., use 3D flip cards on the homepage and zoom in on inner pages). A unified visual language can significantly enhance the brand's professionalism.