Shopify Development Standards

ensure to match the requirements from PMS.

check all the layered files provided and hidden layers as well.

validate Font Family and Weight thoroughly.

make sure to add an appropriate Favicon as per the business requirements.

add requisite Meta Title.

use only Global, Style, Responsive used, CSS Framework.

ensure to keep naming conversion of code & assets (lower case & -).

use proper and well-formatted code.

make sure that there is a proper linking of pages.

check whether the custom 404 is configured correctly or not.

check all the default pages.

use the latest version of libraries like JQuery & Plugins.

cross-check all the spellings before passing it to further development.

use Less/SCSS.

ensure that font-sizing is in REM.

include CSS files in the Head of the page.

include JS files at the bottom of the page.

make sure that comments are used properly to define the code.

reset CSS as per the requirement arises.

ensure that all JavaScript for sections and blocks functions properly in the theme editor.

make sure that the section and block JavaScript is initialized on page load.

ensure that JavaScript for sections and blocks is initialized when the section or block is added, or when a setting is changed that reloads the section or block.

assure that event handlers and unneeded JavaScript are removed when a section or block is removed.

ensure to build scalable and sustainable Shopify themes.

ensure that the layout is responsive.

make sure all RTE-generated content is consistent (h1-h5, blockquotes, ul, ol, and so on) across all templates.

assure that the theme must include powered_by_link without any redirects, and it cannot provide a setting to remove powered_by_link.

ensure that any link in the code that points to one of Shopify's domains must include a rel="nofollow" attribute.

ensure there are not any affiliate links in the theme files.

ensure that the theme supports variant images and internationalization.

ensure that images have alt text.

make sure that form inputs have labels with for attributes, including form labels in the theme settings.

assure that short forms include aria-label attributes.

ensure that the theme is built with valid HTML (can check for valid HTML using the W3C Markup Validator).

make sure all parts of the theme's pages are accessible with a keyboard, including drop-down navigation.

ensure that the theme has been tested for color contrast. The color contrast ratio should be as close to 4.5 as possible.

make sure that the theme contains multiple presets (to a maximum of three).

ensure that all sections include a name in their schema. The schema Liquid tag of each section must be at the bottom of the file.

check if a section or block has a title or header setting, then that setting's ID should be the title.

check if a section or block has a title or header setting, then the name of the section updates when a merchant changes the title.

make sure that the theme uses the image_picker setting type instead of an image.

ensure the theme includes a link_list to select main and footer menus.

assure that the template-specific settings only appear in sections.

ensure those customer template settings do not appear in sections.

make sure all JavaScript and CSS for sections are stored in theme assets (javascript and stylesheet Liquid tags are not used).

make sure that the design is 100% pixel perfect on Windows, Chrome web pages.

ensure that on the rest of the OS and browsers, web pages must be very much identical to Windows Chrome.

check user interface on Mac browsers (Chrome, Safari, Firefox).

check UI on iPhone.

Check UI on Android.

check the browser resizing testing has been done.

make sure that the images are retina ready.

ensure to use print-friendly CSS.

assure that the theme has a presentable screenshot.

check that admin passwords are highly-secured.

upgrade Shopify modules to the latest version.

verify what permissions anonymous and authenticated users have been given on the permissions page.

verify that account creation settings are intended (can users create their own accounts, and do they need approval) on the ‘User Settings’ page.

check Reports > Status report and make sure there are no warnings or errors.

protect forms against spam and attacks.

check what kind of forms are anonymous and authenticated users able to access the website.

check the enabling of CAPTCHA, reCAPTCHA, or an anti-spam service.

verify that the site email address in /admin/settings/site-information is not a test address.

verify the email addresses in modules that send notifications, and also verify the text of email messages site generates.

ensure all relevant users are set up with correct permissions.

check new user registering permissions under User Settings (i.e. do new users need admin approval or not).

check placeholder images and copy and remove where required.

clear all test content or users if there is any.

check if one of the domain redirect options is enabled in the .htaccess file. Either redirect URLs without www. or vice versa.

update API keys, such as Twitter, or Google Apps Update API keys.

pass the code through coder and ensure that it is getting passed at the maximum sensitivity.

make sure that regular database backups are being made.

make sure that all the icons, logos and small images are Sprite images.

make sure provided SVG is being used.

ensure that all the console logs are cleaned.

make sure of using clean unused code, images, and files.

check and ensure that GTMetrix has A Grade PageSpeed rating.

ensure that the loading time for all the webpages is 5 seconds or below.

ensure the minification of JS.

ensure the minification of CSS.

make sure that Google Page Speed has a score of 70+.

optimize images, enable cache, and disable the unused extensions.

enable flat categories and products to speed up the performance of Shopify based websites.

merge and minify CSS and JS files that means making the web page as light as possible for the fast loading.

use the Content Delivery Network (CDN) rightly to connect all cache servers.

enable the compression.

keep time to first byte (TTFB) around 200ms to enhance the server response time.

replace background images with CSS.

Adopt the technique of lazy image loading.

organize tracking with Google Tag Manager to manage all tags into one JavaScript request.

prioritize testing to optimize mobile performance.

make sure there are no excessive Liquid loops.

decrease the thumbnail image size to boost the site's performance.

weigh the benefits of installing another app for the website.

optimize Shopify site structure and product pages.

ensure the use of SSL.

set up redirects for unused or discontinued pages.

make sure to use the SEO semantic coding.

always use semantic tags If overriding tpl file which helps to get good ranking over search engines.

index site for search at search settings and test.

check that all web pages have unique titles using the Page Title module.

check whether XML Sitemap and Google News Sitemap are configured properly.

check if the redirect module is enabled and configured.

check if the global redirect module is enabled and configured.

check that .htaccess redirect to site with/without www.

check that the homepage title includes a slogan, and is descriptive for the function of the site.

check if Meta Tags are filled with descriptive information.

check if the site's information appears well when shared on Facebook.

check if Path aliases patterns are meaningful.

check if Google Analytics is enabled and configured properly.

check if the Page Title module is enabled and configured appropriately.

check if Site verification is enabled and configured properly.

check if the Search 404 module is enabled and configured correctly.

check the compatibility of HTML5.

ensure that all the codes pass W3C Validation for HTML & CSS.

run the mobile-friendly test.

run the test using real devices.

check the website on all browsers (Chrome, Safari, Firefox, etc) as well as on devices (iOS, Android, etc).

test the storefront and admin panel UI.

tracks changes in CPU, Memory and other metrics.

execute nightly for developing branches.

measure total page load times in all browsers.

ensure that a seamless upgrade is possible from previously released product versions to the new one.

test JS modules and other JS portions of the UI. These tests are similar to integration tests used for server-side testing.

ensure the system is extensible as designed.