# Tutorials

- [Customizing Your Theme](/tutorials/customizing-your-theme.md): A walk-through of how you can create your own Scandi-based theme
- [Styling](/tutorials/customizing-your-theme/styling.md): Give your theme a fresh coat of paint!
- [Customizing the Global Styles](/tutorials/customizing-your-theme/styling/customizing-the-global-styles.md): Define the overall look of your application
- [Adding a New Font](/tutorials/customizing-your-theme/styling/adding-a-new-font.md): Learn to add and use new assets in Scandi
- [Overriding a Components Styles](/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](/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](/tutorials/customizing-your-theme/customizing-javascript.md): Change the JavaScript logic in your theme!
- [Customizing the Footer Copyright](/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](/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](/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](/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](/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](/tutorials/payment-method-integration.md): Integrate an existing payment method so you can use it in a Scandi store!
- [Setting Up for Development](/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](/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](/tutorials/payment-method-integration/handling-the-customers-return.md): Handle the customer's return from a 3rd party site
- [Creating a Custom Widget](/tutorials/creating-a-custom-widget.md): Create a widget you can use anywhere in the Magento CMS!
- [Scandi CMS System Overview](/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](/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](/tutorials/creating-a-custom-widget/implementing-the-rendering.md): Define how your widget appears in the Scandi theme
- [Video Tutorials](/tutorials/video-tutorials.md): Watch our tutorials and follow along to get a taste of Scandi!
- [#1 Setting up and talking theory](/tutorials/video-tutorials/lets-talk-theory.md)
- [#2 Templating in React](/tutorials/video-tutorials/templating-in-react.md)
- [#3 Overriding a file](/tutorials/video-tutorials/overriding-a-file.md)
- [#4 Styling the application](/tutorials/video-tutorials/styling-the-application.md)
- [#5 Patterns of ScandiPWA](/tutorials/video-tutorials/patterns-of-scandipwa.md)
- [Dark Mode Extension](/tutorials/dark-mode-extension.md): Implement a Dark Mode extension with the Scandi Plugin Mechanism!
- [Deploying Native Apps](/tutorials/deploying-native-apps.md)
- [Product 3D Model Extension](/tutorials/product-3d-model-extension.md): Implementing a Scandi extension for viewing product 3D models
- [Part 1: Magento 3D Model Uploads](/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](/tutorials/product-3d-model-extension/part-2-graphql-api.md): Expose product 3D models through the GraphQL API
- [Part 3: Scandi Frontend](/tutorials/product-3d-model-extension/part-3-scandi-frontend.md): Display 3D models on the product page
- [Social Share, Full Extension Development](/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](/tutorials/scandipwa-social-share/step-1-and-2-creating-magento-2-module.md)
- [STEP-3 Backend Configurations Settings](/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](/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](/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](/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](/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](/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](/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](/tutorials/scandipwa-social-share/step-10-socialshare-component-development.md): And we ready to develop our SocialShare component
- [STEP-11 SocialShare for CategoryPage](/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](/tutorials/scandipwa-social-share/task-1-changing-linkedin-to-twitter.md): Task that you can do to practice
- [STEP-12 Comments for Admin Users](/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](/tutorials/scandipwa-social-share/step-13-final-bugfixes.md): Finalizing Extension
- [Accessing Magento 2 Controllers](/tutorials/accessing-magento-2-controllers.md): Accessing Magento 2 native controllers
- [STEP-1 Creating Magento 2 Module](/tutorials/accessing-magento-2-controllers/step-1-creating-magento-2-module.md)
- [STEP-2 - Create Magento 2 Frontend Route and Basic Controller](/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](/tutorials/accessing-magento-2-controllers/step-3-accessing-magento-2-controller-bypassing-scandipwa-frontend.md)
- [STEP-4 Creating ScandiPWA Extension with additional dependencies](/tutorials/accessing-magento-2-controllers/step-4-creating-scandipwa-extension-with-additional-dependencies.md)
- [STEP-5 Creating Plugin and Axios request](/tutorials/accessing-magento-2-controllers/step-5-creating-plugin-and-axios-request.md)