# ScandiPWA

## ScandiPWA

- [Why Scandi](https://docs.scandipwa.com/master.md): Welcome to Scandi, providing next-generation user experience for e-commerce!
- [Quick-start Guide](https://docs.scandipwa.com/quick-start-guide.md): Get familiar with Scandi in a few minutes!
- [Roadmap](https://docs.scandipwa.com/roadmap.md)
- [Introduction to the Stack](https://docs.scandipwa.com/introduction.md): A quick overview of the technologies of Scandi
- [CMA, CSA, and ScandiPWA](https://docs.scandipwa.com/introduction/cma-csa-and-scandipwa.md): Ecosystem overview
- [Challenges](https://docs.scandipwa.com/introduction/challenges.md): The challenges of creating a PWA for Magento and how we overcome them
- [Setting up Scandi](https://docs.scandipwa.com/getting-started-1.md): Learn about different installation modes
- [Storefront Mode Setup](https://docs.scandipwa.com/getting-started-1/storefront-mode.md): Run Scandi as an separate app
- [Proxying requests to server](https://docs.scandipwa.com/getting-started-1/storefront-mode/proxying-requests-to-server.md)
- [Magento Mode Setup](https://docs.scandipwa.com/getting-started-1/magento-theme-mode.md): Build Scandi as a Magento theme
- [Existing Magento 2 setup](https://docs.scandipwa.com/getting-started-1/magento-integration.md): The ScandiPWA theme integrates seamlessly with Magento
- [Magento Commerce Cloud setup](https://docs.scandipwa.com/getting-started-1/magento-commerce-cloud-setup.md)
- [Updating to new releases](https://docs.scandipwa.com/getting-started-1/updating-scandipwa.md): Update your Scandi app to the latest version
- [Storefront mode upgrade](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/storefront-mode-upgrade.md): Upgrade Scandi in Storefront theme mode to the newest version
- [Magento mode upgrade](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/magento-mode-upgrade.md): Upgrade ScandiPWA in Magento theme mode to the newer version
- [CMA upgrade](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/cma-upgrade.md)
- [CSA upgrade](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/csa-upgrade.md)
- [Custom ScandiPWA composer dependency update](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/custom-scandipwa-composer-dependency-update.md): Upgrade a custom ScandiPWA module in Magento theme mode to the newer version
- [Local ScandiPWA Composer Package Setup](https://docs.scandipwa.com/getting-started-1/updating-scandipwa/local-scandipwa-composer-package-setup.md): ScandiPWA Composer package installation and upgrade for the Core Team
- [Docker Setup \[deprecated\]](https://docs.scandipwa.com/getting-started-1/depricated-docker-setup.md)
- [Migrating to CMA & CSA](https://docs.scandipwa.com/getting-started-1/depricated-docker-setup/migrating-from-the-docker-setup-legacy.md): If you have already set up ScandiPWA with docker, you can upgrade to the new setup
- [Override Mechanism](https://docs.scandipwa.com/developing-with-scandi/override-mechanism.md): Create a customized theme based on ScandiPWA
- [Overriding JavaScript](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript.md): Override JavaScript files using the ScandiPWA Override Mechanism
- [Overriding classes](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript/overriding-classes.md)
- [Overriding non-classes](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript/overriding-non-classes.md)
- [Overriding Styles](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-styles.md)
- [Overriding the HTML / PHP](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/overriding-the-index-file.md): You can override index.html and any other static file by matching its path
- [Parent Themes](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/parent-themes.md): Let others base their theme on yours
- [Extensions](https://docs.scandipwa.com/developing-with-scandi/extensions.md)
- [Creating an extension](https://docs.scandipwa.com/developing-with-scandi/extensions/creating-an-extension.md)
- [Installing an extension](https://docs.scandipwa.com/developing-with-scandi/extensions/installing-an-extension.md)
- [Migrating from 3.x to 4.x](https://docs.scandipwa.com/developing-with-scandi/extensions/migrating-from-3.x-to-4.x.md)
- [Extension Terminology](https://docs.scandipwa.com/developing-with-scandi/extensions/extension-terminology.md): A document defining and standardizing plugin-related terminology for consistency and clarity across documentation, tutorials and inter-developer communication.
- [Working With Magento](https://docs.scandipwa.com/developing-with-scandi/working-with-magento.md)
- [Magento troubleshooting](https://docs.scandipwa.com/developing-with-scandi/working-with-magento/magento-troubleshooting.md): Resolving common issues after a Magento+ScandiPWA installation
- [Working with Magento modules](https://docs.scandipwa.com/developing-with-scandi/working-with-magento/working-with-magento-modules.md)
- [Working with GraphQL](https://docs.scandipwa.com/developing-with-scandi/working-with-magento/developing-the-magento-backend.md)
- [GraphQL Security](https://docs.scandipwa.com/developing-with-scandi/working-with-magento/graphql-query-compexity.md)
- [Working with "granular cache"](https://docs.scandipwa.com/developing-with-scandi/working-with-magento/working-with-granular-cache.md)
- [Developer Tools](https://docs.scandipwa.com/developing-with-scandi/developer-tools.md): To make the development process easier, we have compiled a set of tools for working with Scandi
- [Debugging in VSCode](https://docs.scandipwa.com/developing-with-scandi/developer-tools/debugging-in-chrome.md): This guide only works for Visual Studio Code
- [ScandiPWA CLI](https://docs.scandipwa.com/developing-with-scandi/developer-tools/scandipwa-cli.md): A utility for accelerating development with Scandi
- [Configuring ESLint](https://docs.scandipwa.com/developing-with-scandi/developer-tools/configuring-eslint.md)
- [CSA Commands](https://docs.scandipwa.com/developing-with-scandi/developer-tools/available-commands.md)
- [Deploying Your App](https://docs.scandipwa.com/developing-with-scandi/deploying-your-app.md)
- [Build & Deploy Android app](https://docs.scandipwa.com/developing-with-scandi/deploying-your-app/build-and-deploy-android-app.md): You can package Scandi as a native Android application
- [Build & Deploy iOS app](https://docs.scandipwa.com/developing-with-scandi/deploying-your-app/build-and-deploy-ios-app.md): You can package Scandi as a native iOS application
- [Directory Structure](https://docs.scandipwa.com/structure/folder-structure.md): A high-level overview of how files are organized in Scandi
- [Building Blocks](https://docs.scandipwa.com/structure/building-blocks-summary.md): Learn about the structure of the ScandiPWA codebase
- [Components](https://docs.scandipwa.com/structure/building-blocks-summary/components.md): ScandiPWA React components are reusable pieces of UI logic
- [Styling Components](https://docs.scandipwa.com/structure/building-blocks-summary/components/styling-components.md): ScandiPWA uses the BEM methodology and SCSS
- [Routes](https://docs.scandipwa.com/structure/building-blocks-summary/routes.md): Routes are pages in your single-page application
- [Redux Stores](https://docs.scandipwa.com/structure/building-blocks-summary/redux-stores.md): Redux stores are used to maintain global state
- [GraphQL Queries](https://docs.scandipwa.com/structure/building-blocks-summary/constructing-graphql-queries.md): GraphQL queries are generated dynamically using javascript
- [Global Styles](https://docs.scandipwa.com/structure/building-blocks-summary/global-styles.md): While each component may have its own styles, some styles are globally defined
- [The Util Directory](https://docs.scandipwa.com/structure/building-blocks-summary/the-util-directory.md): The util directory in ScandiPWA contains various utility functions that don't belong in the other categories
- [Type Checking](https://docs.scandipwa.com/structure/building-blocks-summary/type-checking.md): ScandiPWA uses PropTypes to help verify that the expected props are passed, and catch bugs
- [Application assets](https://docs.scandipwa.com/structure/adding-assets.md): Add static assets to your app, such as fonts and favicons
- [Code Style](https://docs.scandipwa.com/structure/code-style.md): Following our coding style helps maintain a consistent and well-organized codebase
- [JavaScript Code Style](https://docs.scandipwa.com/structure/code-style/javascript-code-style.md): ScandiPWA follows a strict JavaScript style guide for maintainability and consistency
- [SCSS Code Style](https://docs.scandipwa.com/structure/code-style/scss-code-style.md): ScandiPWA follows a strict SCSS style guide for maintainability and consistency
- [Customizing Your Theme](https://docs.scandipwa.com/tutorials/customizing-your-theme.md): A walk-through of how you can create your own Scandi-based theme
- [Styling](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling.md): Give your theme a fresh coat of paint!
- [Customizing the Global Styles](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/customizing-the-global-styles.md): Define the overall look of your application
- [Adding a New Font](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/adding-a-new-font.md): Learn to add and use new assets in Scandi
- [Overriding a Components Styles](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/overriding-a-components-styles.md): Give a fresh new look to any component – replace the default styles with your own.
- [Extending a Component's Styles](https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/partially-extending-a-components-styles.md): Tailor the details to your needs – make small adjustments while keeping the original styles
- [Customizing JavaScript](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript.md): Change the JavaScript logic in your theme!
- [Customizing the Footer Copyright](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/customizing-the-footer-copyright.md): Learn to override the copyright text at the bottom of the page
- [Adding a New Page](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/addinga-new-page.md): Learn to create new pages (routes) in your Scandi app!
- [Adding a Section in My Account](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-section-in-my-account.md): Learn to override with a common pattern in Scandi – render maps
- [Adding a Tab on the Product Page](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/adding-a-tab-on-the-product-page.md): Another example of overriding a tab configuration
- [Creating a New Redux Store](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript/creating-a-new-redux-store.md): Learn to add your Redux store to the Scandi app
- [Payment Method Integration](https://docs.scandipwa.com/tutorials/payment-method-integration.md): Integrate an existing payment method so you can use it in a Scandi store!
- [Setting Up for Development](https://docs.scandipwa.com/tutorials/payment-method-integration/setting-up-for-development.md): Before you can start working on the Scandi integration, you need to set up a local environment
- [Redirecting to the Payment Provider](https://docs.scandipwa.com/tutorials/payment-method-integration/redirecting-to-the-payment-provider.md): Redirect to a 3rd party site after the order is placed
- [Handling the Customer's Return](https://docs.scandipwa.com/tutorials/payment-method-integration/handling-the-customers-return.md): Handle the customer's return from a 3rd party site
- [Creating a Custom Widget](https://docs.scandipwa.com/tutorials/creating-a-custom-widget.md): Create a widget you can use anywhere in the Magento CMS!
- [Scandi CMS System Overview](https://docs.scandipwa.com/tutorials/creating-a-custom-widget/scandi-cms-system-overview.md): An overview of how the Scandi CMS system works with widgets.
- [Creating a Magento Widget](https://docs.scandipwa.com/tutorials/creating-a-custom-widget/creating-a-magento-widget.md): Since widgets are created in the admin panel, we first need to write some Magento logic for the backend part of the widget.
- [Implementing the Rendering](https://docs.scandipwa.com/tutorials/creating-a-custom-widget/implementing-the-rendering.md): Define how your widget appears in the Scandi theme
- [Video Tutorials](https://docs.scandipwa.com/tutorials/video-tutorials.md): Watch our tutorials and follow along to get a taste of Scandi!
- [#1 Setting up and talking theory](https://docs.scandipwa.com/tutorials/video-tutorials/lets-talk-theory.md)
- [#2 Templating in React](https://docs.scandipwa.com/tutorials/video-tutorials/templating-in-react.md)
- [#3 Overriding a file](https://docs.scandipwa.com/tutorials/video-tutorials/overriding-a-file.md)
- [#4 Styling the application](https://docs.scandipwa.com/tutorials/video-tutorials/styling-the-application.md)
- [#5 Patterns of ScandiPWA](https://docs.scandipwa.com/tutorials/video-tutorials/patterns-of-scandipwa.md)
- [Dark Mode Extension](https://docs.scandipwa.com/tutorials/dark-mode-extension.md): Implement a Dark Mode extension with the Scandi Plugin Mechanism!
- [Deploying Native Apps](https://docs.scandipwa.com/tutorials/deploying-native-apps.md)
- [Product 3D Model Extension](https://docs.scandipwa.com/tutorials/product-3d-model-extension.md): Implementing a Scandi extension for viewing product 3D models
- [Part 1: Magento 3D Model Uploads](https://docs.scandipwa.com/tutorials/product-3d-model-extension/part-1-magento-3d-model-uploads.md): Adding 3D model upload functionality to the Magento Admin panel for products
- [Part 2: GraphQL API](https://docs.scandipwa.com/tutorials/product-3d-model-extension/part-2-graphql-api.md): Expose product 3D models through the GraphQL API
- [Part 3: Scandi Frontend](https://docs.scandipwa.com/tutorials/product-3d-model-extension/part-3-scandi-frontend.md): Display 3D models on the product page
- [Social Share, Full Extension Development](https://docs.scandipwa.com/tutorials/scandipwa-social-share.md): In this tutorial, we going to develop one of the most popular extensions on different marketplaces SocialShare
- [STEP-1 and 2 Creating Magento 2 Module](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-1-and-2-creating-magento-2-module.md)
- [STEP-3 Backend Configurations Settings](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-3-backend-configurations-settings.md): In this step we going to create Module backend configurations
- [STEP-4 Simple GraphQl and Resolver](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-4-simple-graphql-and-resolver.md): The next few steps not going to be so visual, but very important, we going to create an Extension and establish the connection (communication) between this extension and our module.
- [STEP-5 Creating Extension, Base Redux Store](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-5-creating-extension-base-redux-store.md): In this step finally, we going to begin scandipwa extension development
- [STEP-6 Extension plugins](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-6-extension-plugins.md): In this step, we going finally write our first Extension plugins, at first we will assign our reducer to the global redux store, and then will plugin into the Router container mapDispatchToProps.
- [STEP-7 GraphQL types, Helpers](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-7-graphql-types-helpers.md): As we have successfully established a connection with backend and frontend, let's prepare and collect all configurations we created at STEP-3 transfer.
- [STEP-8 Query Field and FieldList](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-8-query-field-and-fieldlist.md): In this step, we going to modify our query to fetch all config data to the frontend
- [STEP-9 render Plugins and MSTP Plugin, Component creation](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-9-render-plugins-and-mstp-plugin-component-creation.md): Now we going to create plugins for the Product Page.
- [STEP-10 SocialShare Component Development](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-10-socialshare-component-development.md): And we ready to develop our SocialShare component
- [STEP-11 SocialShare for CategoryPage](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-11-socialshare-for-categorypage.md): In this step we going to create SocialShare for Category page
- [TASK-1 Changing LinkedIn to Twitter](https://docs.scandipwa.com/tutorials/scandipwa-social-share/task-1-changing-linkedin-to-twitter.md): Task that you can do to practice
- [STEP-12 Comments for Admin Users](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-12-comments-for-admin-users.md): At this Step we going to add useful comments and fix some bugs
- [STEP-13 Final, bugfixes](https://docs.scandipwa.com/tutorials/scandipwa-social-share/step-13-final-bugfixes.md): Finalizing Extension
- [Accessing Magento 2 Controllers](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers.md): Accessing Magento 2 native controllers
- [STEP-1 Creating Magento 2 Module](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers/step-1-creating-magento-2-module.md)
- [STEP-2 - Create Magento 2 Frontend Route and Basic Controller](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers/step-2-create-magento-2-frontend-route-and-basic-controller.md)
- [STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers/step-3-accessing-magento-2-controller-bypassing-scandipwa-frontend.md)
- [STEP-4 Creating ScandiPWA Extension with additional dependencies](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers/step-4-creating-scandipwa-extension-with-additional-dependencies.md)
- [STEP-5 Creating Plugin and Axios request](https://docs.scandipwa.com/tutorials/accessing-magento-2-controllers/step-5-creating-plugin-and-axios-request.md)
- [Support](https://docs.scandipwa.com/about/support.md): Need more help? Let us know!
- [Release notes](https://docs.scandipwa.com/about/release-notes.md)
- [Technical Information](https://docs.scandipwa.com/about/technical-information.md): Regarding technical decisions behind ScandiPWA
- [Data Analytics](https://docs.scandipwa.com/about/data-analytics.md)
- [Contributing](https://docs.scandipwa.com/about/contributing.md): We appreciate contributions from the community!
- [Installation from Fork](https://docs.scandipwa.com/about/contributing/installation-from-fork.md)
- [Repository structure](https://docs.scandipwa.com/about/contributing/repository-structure.md)
- [Code contribution process](https://docs.scandipwa.com/about/contributing/code-contribution-process.md)
- [Submitting an Issue](https://docs.scandipwa.com/about/contributing/submitting-an-issue.md): Found a bug? Got an idea? Please let us know!
- [Publishing ScandiPWA](https://docs.scandipwa.com/about/contributing/publishing-scandipwa.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on a page URL with the `ask` query parameter:
```
GET https://docs.scandipwa.com/master.md?ask=<question>
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.