Rue Du Cadre — custom framing made in France
Custom PrestaShop development for Rue du Cadre
About Rue du Cadre
Rue du Cadre is a photo printing and frame-selling online store established in 2009 as a project of FranceShop. It’s a group of companies and entrepreneurs specializing in eCommerce. They have 30+ years of experience in the decoration and related items business. All the projects, including Rue du Cadre, are full-cycled. They start with the idea, fabricate the product, and then distribute it.
When Rue du Cadre turned to BelVG, they wanted to set up a Framer tool that would allow users to create custom photo frames. After our developing team had finished the work, the client trusted us with a fundamental redesign of the webstore. An initial version was outdated and user behavior had worsened during the last year. Our design and frontend team helped Rue du Cadre with that problem. They created and implemented a user-friendly theme with custom features. After the work was done, the client asked to set up another third-party tool called Cropper, which prepared photos for printing.
During a year of cooperation, we customized two custom tools, created a personalized theme, added new features, and integrated several modules.
ClientRue Du Cadre
IndustryRetail Art Supplies
Services & notable features
- PrestaShop theme development
- Module installation and customization
- Third-party feature development
- Bug fixing
- API integration with the Framer tool
Custom theme development
Turning to us, the Rue du Cadre team believed that the webstore was outdated and it had an impact on user behavior. This is why they asked BelVG to carry out a total redesign.
The first step we took was to study a user journey. We analyzed the user behavior on the website taking into account that Rue du Cadre wanted to improve user experience and increase tool usage.
We took the original theme as a starting point and created a new custom one based on it. Relying on our studies, we changed the home page, added a new menu, and facilitated the website navigation.
The webstore has a unified style with harmoniously matching colors and fonts. We’ve chosen a font compliant with the webstore logo. The color palette is balanced and soft, with a single accent used to highlight needed information and details.
We worked out a special design for a drop-down menu. Each subcategory is displayed with a relevant picture so that users can easily find a necessary section.
For such a category as Cartons, we also decided to use a hover effect. When a cursor points out a specific item, it zooms in with a darkened background. This effect helps to focus user attention and engage them in the process of making an order.
As a result, we worked out a custom PrestaShop theme and redesigned both Framer and Cropper according to it.
Framer is one of the third-party tools that help users to create a custom frame for their photos. Rue du Cadre wanted to simplify the use of Framer for clients so they would order more custom solutions instead of ready-made ones. We added more categories for customization, eased the usage process for customers, and synchronized the tool with the PrestaShop checkout via API.
Framer wasn’t user-friendly for potential clients. That is why the BelVG team came up with an intuitive design for those who wanted to create a custom frame. We used the step-by-step scheme to guide the user and visually separated the CTA buttons to make them eye-catching.
As the name of the tool suggests, it is used to find the perfect frame for an image or photo. A great number of users are professional photographers who consider a frame to be a part of the art project. Therefore, we provided them an opportunity to zoom the frame and see it in high resolution.
If a user isn’t sure that the frame matches the picture, they can preview it with all the chosen details.
The tool was originally built as a separate system with no attachments to PrestaShop. It has its admin system and core structure. Our team studied this custom solution and further developed Framer to work like this. A user chooses a size, type, color, material, mount type, glazing, and passepartout. They can also combine several frames into a system and order them like that.
We implemented the possibility to save the custom order on the checkout stage to make shopping more thoughtful. The user can also print the quotation PDF during any step of making an order.
Customization of Framer API integration
PrestaShop stores all ready-to-use frames and special accessories that Rue du Cadre offers to customers. And Framer creates custom items. They don’t exist at the store but the user must be able to see them in a cart. To organize that, we adjusted the API integration.
Our developing team set up a special rule. Firstly, a customer makes an item in Framer, uploads a photo to see how it would look with a frame, and orders. Then, PrestaShop automatically creates this custom frame as a new product and adds it to the user cart. The website transfers both the frame image and the user photo from the tool to the cart. And the order is ready.
Built-up Cropper tool
Cropper is the other custom third-party tool we implemented into the Rue du Cadre webstore. It’s an independent instrument that allows users to order their printed photos. When the BelVG team got the work, it was just a separate modal window. But we significantly widen its functionality.
We took the provided basis and implemented different tools for downloading the image, making changes, and finally adding it to the cart as an order. We introduced such functions as changing orientation and imposing filters. But the main one is changing the size of the image to print it correctly. It’s the key point as Rue du Cadre often works with professional high-resolution photos that need to be cropped and compressed without losing the final quality. We also put a lot of effort into making the interface clear and logical.
- Text and icon designations are combined to explain certain functions for every category of users.
- Custom size regulation is available to crop the picture using the computer mouse. In some cases, it is a more convenient solution than entering the required parameters for a quick lookup.
- Minimum filters and settings are presented to adjust the picture without using other applications.
- A standard set of sizes is introduced to facilitate cropping. The user can choose one of the proposed sizes and avoid entering parameters and custom settings. The picture will be changed automatically.
BelVG specialists dedicated lots of attention and effort to the adaptive design. The whole tool functionality is available with the screen sizes and doesn’t require a long scroll. The buttons and fields are aligned and do not overlap each other or any other details.
Cropper works as a separate tool, but Rue du Cadre is planning to integrate it into Framer. In that case, it would be possible for a user to upload a photo into Framer, adjust it using the Cropper instruments, and create a custom frame. As a result, the user will be able to order a printed picture already placed in an individual frame.
Price rule adjustment and website support
Rue du Cadre doesn’t have a loyalty program, but each product including custom ones has its discount depending on the number of items in the order. Buying 2+ identical items, a customer receives a 10% discount, 5+ items give a 15% discount, and so on. When a user creates an item in Framer and sets the quantity of 5, the tool calculates the price with a 15% discount. The order is added to the cart with the same price. If the user decides that they want 4 frames instead of 5, they don’t need to create a new order in Framer. They can change the quantity in the cart, and the price will be recalculated automatically to a 10% discount, even though such a custom frame doesn’t exist in a PrestaShop catalog. We set up synchronization of all these data transfers via the API.
As the website had lots of modules, our team also held some tech support tasks such as bug fixing and compatibility solutions. We added cross-sell and best-sell sections, adjusted the check-out by adding new payment methods, and installed the Quick View module. This extension allows customers to look at the product and place it in the cart from a popup window without opening a full product page and reloading a catalog.