01 — SHOPIFY & ECOMMERCE BUILDS
Drayton — Shopify Website, Navigation & SEO/GEO Transformation
Shopify · Merchandising · Product Discovery
Introduction
Drayton supplies personalised corporate gifts, promotional merchandise and branded products to businesses across the UK.
The previous website had become outdated and was underperforming in Google Analytics. Its extensive catalogue covered numerous products, services and branding methods, making it difficult for customers to find suitable options and progress towards an enquiry.
I redeveloped the responsive Shopify experience around clearer navigation, stronger product discovery, reusable content sections and more direct quotation journeys.
Project Snapshot
Business | Corporate gifts, promotional merchandise and branded products |
Platform | Shopify |
My role | Shopify development, UX planning, information architecture, SEO/GEO and visual content |
Development | Liquid, HTML, CSS and JavaScript |
Core challenge | Organising a large catalogue into a clearer customer journey |
Commercial action | Product and service enquiries through quotation forms |
Project status | Live website with ongoing content development |
Project Goals
No. | Goal |
01 | Modernise the website and improve its overall user experience. |
02 | Simplify navigation across a large and complex catalogue. |
03 | Improve product, service and branding-method discovery. |
04 | Create clearer enquiry and quotation journeys. |
05 | Strengthen the website’s SEO and GEO foundations. |
06 | Introduce reusable Shopify sections for future content. |
07 | Produce consistent supporting imagery and video. |
08 | Establish an ongoing content and blog framework. |
Research & Strategy
The project began with a review of the existing website, available Google Analytics information and the principal customer journeys.
Review area | Action |
Analytics | Reviewed available performance information and important landing pages. |
Navigation | Audited the original menu, product hierarchy and customer pathways. |
Catalogue | Grouped related products into clearer customer-facing categories. |
Services | Identified priority branding methods, sectors and service themes. |
Content | Reviewed headings, page structure, internal links and content gaps. |
Search | Identified commercial themes and recurring customer questions. |
Conversion | Examined the journey from product research to quotation request. |
The live catalogue includes bags, drinkware, garments, technology, stationery, outdoor products and other branded merchandise. Information architecture therefore became a central part of the project.
Original Revised
UX & Conversion Design
Navigation & Information Architecture
Area | Design response | Customer value |
Product categories | Reorganised products into recognisable customer-facing groups. | Makes the catalogue easier to scan and understand. |
Service discovery | Created clearer routes to branding methods and specialist services. | Helps customers connect products with appropriate branding options. |
Customer intent | Supported both specific product searches and broader project requirements. | Accommodates customers at different stages of the buying journey. |
Internal pathways | Connected relevant products, services, sectors and content. | Reduces dead ends and encourages informed exploration. |
Mobile navigation | Adapted the catalogue hierarchy for smaller screens. | Preserves access to important categories without overwhelming the interface. |
Conversion Journey
Customer need | Conversion improvement |
Understand the available service | Added clearer explanatory and comparison content. |
Compare branding methods | Created a dedicated branding-method comparison section. |
Request project information | Introduced consistent Request a Quote blocks. |
Submit a useful enquiry | Developed forms that collect relevant project details. |
Know what to do next | Strengthened calls to action across important pages. |
Shopify Development & Features
Custom Navigation
A scalable navigation structure was created around Drayton’s extensive product catalogue, branding methods and service offering.
Request a Quote Block
A reusable HTML quotation section directs visitors towards a consistent and commercially valuable next step from relevant product and service pages.
Custom Contact Forms
Custom-coded form sections collect useful information such as product interest, quantities, branding requirements and supporting project details.
Branding-Method Comparison
A custom comparison block explains:
Branding method | Purpose |
Embroidery | Durable stitched branding for suitable garments and textiles. |
UV printing | Full-colour printing for compatible promotional products. |
Laser engraving | Precise, permanent marking on suitable materials. |
Screen printing | Repeatable printed branding for appropriate products and quantities. |
Reusable Shopify Sections
Reusable sections support flexible page building while maintaining consistent layouts, content hierarchy and calls to action.
(Placeholder image — create a three-image row featuring the Request a Quote block, enquiry form and branding-method comparison.)
Visual Content
AI-assisted creative workflows were used to produce adaptable supporting images and video assets.
Requirement | Approach |
Consistency | Maintained a shared visual direction across product, service and campaign content. |
Coverage | Produced supporting assets where suitable source photography was unavailable. |
Clarity | Used visuals to explain services and make complex information easier to understand. |
Quality control | Selected, reviewed and adapted AI-assisted assets before publication. |
SEO & GEO Approach
The search work focused on making Drayton’s products, services and expertise easier to interpret for customers, search engines and AI-assisted discovery systems.
Focus | Improvement |
Page structure | Improved headings and content hierarchy. |
Search targeting | Strengthened product, service and sector relevance. |
Context | Added clearer explanatory copy around products and branding methods. |
Internal linking | Connected related products, services, sectors and articles. |
Customer questions | Planned content around comparison-led and informational searches. |
Images | Improved descriptive context and relevance. |
Topical authority | Developed blog ideas around commercial and customer-led themes. |
GEO readiness | Structured content and relationships more clearly for AI-assisted discovery. |
GEO was treated as an extension of useful, well-structured content—not as a guarantee of inclusion within AI-generated results.
Blog & Content Planning
Content theme | Example direction |
Corporate gifting | Product selection, occasions and campaign planning |
Branding methods | Comparisons, suitability and production considerations |
Sustainability | Materials, reusable products and responsible choices |
Events | Promotional merchandise for exhibitions and campaigns |
Onboarding packs | Branded employee and customer welcome materials |
Product guidance | Category comparisons and buying considerations |
The live website now contains an active content area supporting earlier research stages and broader topical coverage.
Technology & Methods
Area | Tools and methods |
Platform | Shopify |
Development | Liquid, HTML, CSS and JavaScript |
Analytics | Google Analytics |
UX | Customer journeys, navigation and information architecture |
Search | SEO, GEO, content hierarchy and internal linking |
Conversion | Calls to action, quotation journeys and custom forms |
Creative production | AI-assisted images and video |
Content | Blog strategy, service content and comparison-led copy |
Challenges & Solutions
Challenge | Response |
The catalogue was difficult to navigate. | Reorganised products into clearer categories supported by a scalable navigation structure. |
Customers could be unsure which branding method to choose. | Introduced comparison-led content explaining the available methods. |
General forms did not always capture sufficient project information. | Created more focused contact and quotation forms. |
Supporting imagery lacked consistency. | Developed a controlled AI-assisted visual-production workflow. |
Products, services and content were not clearly connected. | Strengthened page hierarchy, contextual copy and internal linking. |
New pages required repeated design work. | Created reusable Shopify sections for future content development. |
Results & Impact
Delivered outcome | Value |
Modernised Shopify experience | Presents Drayton through a clearer and more professional interface. |
Improved catalogue structure | Makes a broad product range easier to explore. |
Clearer enquiry routes | Connects product research to quotation requests. |
Reusable content system | Supports future page creation without rebuilding layouts. |
Stronger search foundations | Improves the structure and context supporting SEO and GEO. |
Consistent visual production | Creates a repeatable approach to website imagery and video. |
Ongoing content framework | Supports articles addressing products, services and customer questions. |
Specific performance figures will be added once the relevant before-and-after analytics have been confirmed. No unverified traffic, ranking or conversion improvements are claimed.
Key Deliverables
Website & UX | Search & Content |
Shopify website redevelopment | SEO and GEO improvements |
Navigation and information architecture | Internal-linking recommendations |
Product and service categorisation | Blog topic strategy |
Responsive optimisation | Comparison-led service content |
Request a Quote block | AI-assisted images and videos |
Custom enquiry forms | Ongoing content framework |
Branding-method comparison | Analytics-led review |
Reusable Liquid sections | Product and service copy |
Skills Demonstrated
Shopify development · Liquid · HTML · CSS · JavaScript · UX design · Information architecture · Ecommerce navigation · Conversion design · SEO · GEO · Internal linking · Content planning · Google Analytics · AI-assisted creative production · Responsive design
Conclusion
The Drayton project brought together Shopify development, UX strategy, search optimisation and AI-assisted content production.
The resulting website provides clearer product discovery, stronger service information, more useful enquiry routes and a scalable foundation for continued content development.