With the branding complete and the product data prepared, the next stage was building the website in Shopify. This part of the process combines UX, custom design, and technical development to create a store that feels cohesive and functions smoothly.
Theme Selection
While the theme acts as the foundation, the choice here isn’t about picking a “finished” design — it’s about selecting the structure and features that most closely align with the project.
For Ravenwood Co, I chose a clean, flexible theme that allowed for full customisation.
The aim wasn’t to rely on the theme’s presets, but to use it as a stable framework for:Custom typographyAtmospheric layout choicesModified navigationBranding-driven sectionsThis approach ensures the build is completely tailored, regardless of the starting theme.
UX Design for the Homepage
The homepage is designed around customer behaviour, not just aesthetics. For Ravenwood, this meant creating a layout that guides visitors through the atmosphere of the brand and towards the most important actions.Key decisions included:A strong hero section to set the tone instantlyFeatured collections placed where engagement is highestClear pathways to shop categoriesA balance of imagery + whitespace for sensory comfortStrategic call-to-action placement to support conversionSection spacing tailored to the brand rather than the theme defaultsEvery part of the homepage was designed intentionally, making the customer journey feel calm, intuitive, and on-brand.
Custom Code Integration
Because Ravenwood Co uses Cinzel Decorative — a non-standard font — I added custom code to bring the typeface into Shopify and apply it consistently across headings. This allowed the typography to match the brand style guide rather than being limited to built-in fonts.Additionally, the navigation required customisation:Positioning and sizing adjustments to support the logoImproved spacing and alignmentAdjusted header height for a more balanced layoutThese refinements ensured the header looked deliberate and matched the rest of the brand, not just the theme defaults.If you want, we can also mention any minor Liquid/CSS adjustments (colour variables, button styles, spacing tweaks) — which are usually part of your workflow.
Custom Built About Page
Instead of relying on Shopify’s basic text section, the About page was designed manually to match the brand style guide.This included:Structured content blocksCustom section layoutsVisual hierarchy that mirrors the homepage stylingA mix of text, imagery, and spacing to create a calm, readable flowTone-appropriate storytelling based on the brand’s directionThe result was a page that feels handcrafted rather than generic — something especially important for new brands establishing their identity.
Additional Development Work
A few more elements strengthened the build:
Consistent button and colour styles adjusted through custom CSS
Improved mobile layout, with special attention to spacing and readability
Optimised product page structure, ensuring descriptions, images, and CTAs load in a logical order
Setting up automated collections, so future products slot into the right categories without manual work
Clean, branded footer design, including social icons, policies, and navigation
Accessibility considerations, such as readable font sizes, alt-text, and good contrast
These details create a smooth customer experience and make future updates easier for the owner.
.png)
