RealChem — brand identity and store front-end

About the project

RealChem is an online store for chemical products, with a custom interface being integrated into OpenCart 3. The implemented scope covers product pages, the cart, authentication and customer accounts. Content administration received separate attention, with dedicated forms for editing the homepage, blog posts and a welcome video.

What was delivered

Sign-in uses a one-time code sent by email. The same mechanism is used to change the email address in a customer’s profile. The account area has shared sidebar navigation for the profile, orders and wishlist. Orders can be filtered by status and opened on a detail page; wishlist items are displayed as product cards.

• Add-to-cart buttons on the homepage and catalogue are connected to the OpenCart cart.
• The cart page displays product photographs, names, quantities, prices and line totals, together with delivery calculation information.
• Product pages display reviews from the database and include a review submission form.
• Seven administration forms were created for managing homepage content blocks.
• Dedicated interfaces were added for managing the blog and welcome teaser.

The welcome video appears as an overlay on the homepage. Administrators can set the video and poster, while display frequency is tracked through a cookie. The overlay appears when its video file is available, and a viewing is recorded when the content is actually displayed.

Technical approach

The theme uses Twig templates and Tailwind styles. A shared navigation controller receives the active account section. Authentication has dedicated controllers and modal windows, with verification codes stored in database-backed OpenCart sessions. The client-side mechanism for starting verification is shared by sign-in and email management.

Homepage forms are organised into tabs for general settings, content and display options. They share a single selector for active languages, collapsible repeating rows, drag-and-drop ordering and media selection tiles. Labels and help text are stored in language files. The same structure is used across all seven forms.

Blog content is edited as a sequence of paragraphs through repeating fields and stored in JSON format. Posts support language-specific SEO URLs. Layout management includes drag-and-drop ordering, and the blog and teaser have their own entries in the administration menu.

SEO and performance

Readable URLs were configured for the shop, contacts, blog, cart and checkout. URL generation handles information-page routes. The homepage title and meta description were filled in, while blog post URLs can be set separately for each language.

Cart thumbnails were increased to 128 × 128 to match the presentation of products in the new interface. The welcome teaser is attached to the homepage, with its content and display rules controlled through store settings.

At this stage, RealChem combines a custom OpenCart theme, email-code access to customer accounts and tools for everyday content editing. The implemented forms allow homepage blocks, blog copy and the welcome video to be updated through the administration interface.