Technical Specification for Developing a Website on Shopify
Project Goal
Create a functional and high-performance website on the Shopify platform that meets modern requirements in the following aspects:
• Performance: Compliance with Google PageSpeed and Core Web Vitals recommendations with scores no lower than 85/100.
• Accessibility: Compliance with WCAG 2.1 AA standards.
• Best Practices: Optimal use of Shopify platform resources.
• SEO-readiness: Maximum readiness of the site for indexing and high ranking in search engines.
1. Performance and Optimization
1.1 Minimizing Downloads (if possible and necessary, considering the specifics of Shopify functionality):
• Use only necessary CSS and JS scripts, exclude redundant code.
• Provide Critical CSS to speed up content loading in the above-the-fold area.
• Exclude loading external JS scripts at the top of the page.
1.2 Core Web Vitals:
• The site must meet the core metrics of Core Web Vitals, including Interaction to Next Paint (INP).
• Conduct regular testing through Google PageSpeed and GTmetrix.
1.3 Responsive Design:
• Optimize the site for various devices (desktops, tablets, smartphones).
• Use modern CSS technologies such as Flexbox and Grid.
1.4 Images:
• Support for WebP format and 2X Retina versions of images.
• Use responsive image sizes.
• Automatic image optimization upon upload (Shopify Apps can be used).
2. Accessibility
2.1 WCAG 2.1 AA:
• Implement WCAG 2.1 AA accessibility standards for the convenience of users with special needs and passing the Google Accessibility test.
• Use semantic HTML5 elements (<header>, <main>, <footer>, <section>, <article>).
• Ensure proper heading hierarchy (H1, H2, H3, H4, H5…)
3. SEO Optimization
3.1 Basic SEO Parameters:
• Use built-in Shopify SEO tools or connect applications (e.g., SEO Manager or Plug in SEO).
• Specify correct metadata (title, description).
• Set up Open Graph for social sharing.
• Automatic updating of XML Sitemap and its connection in robots.txt.
3.2 Schema Markup:
• Implement relevant Schema.org markup to improve visibility in search engines.
• Implement markup for the following content types: FAQ, Products, Reviews, Videos.
• Check correctness through Google Rich Results and Schema Validator tools.
3.3 Redirects:
• Ensure proper functioning of 301 redirects to retain current traffic when transferring the old site.
4. Navigation and Structure
4.1 User Experience:
• Simple and intuitive navigation.
• Implementation of breadcrumbs.
• Minimize the number of clicks to achieve the user's end goal (e.g., purchasing a product).
4.2 Code Validity:
• All pages must pass validation through W3C Validator without critical errors.
• HTML, CSS, and JavaScript code must comply with W3C standards.
5. Integrations and Applications
5.1 Recommended Applications:
• SEO Manager or similar for managing SEO.
• An application for image optimization (e.g., TinyIMG).
• An application for automating caching and speeding up loading upon agreement at the final stage.
5.2 Forms and Interactions:
• Connect forms with spam protection via Google reCAPTCHA.
• Possibility of integration with Telegram bots for notifications (optional).
6. Security
6.1 Protection Measures:
• Ensure access to the site only via HTTPS using an SSL certificate.
• Set up automatic backups.
• Enable two-factor authentication for administrative accounts.
6.2 Updates:
• At the time of delivery, the site must have the latest versions of all used applications and modules.
7. Testing and Launch
7.1 Testing Stages:
• Performance check through Google PageSpeed and GTmetrix.
• Responsiveness testing on different devices and browsers.
• Full functional testing of forms, redirects, and interactive elements.
7.2 Launch:
• Ensure minimal loss of indexing and site positions during the transition.
• Conduct an audit through Google Search Console.
• Monitor errors and resolve identified issues within the first month.
8. Functional Features
8.1 Sticky menu when scrolling up
8.2 Integration of reviews from the current version of the site and import from Amazon
8.3 Adding upsell/cross-sell capabilities during cart addition.
Behance
Freelancehunt
