connect your domain to the VPS<\/a> beforehand. This is done by pointing your domain’s DNS settings to your VPS’s IP address, ensuring that visitors reach your new Magento store when they type your domain name into their browsers.<\/p>Magento 2 Storefront<\/h2> Before practicing our Magento 2 development tutorial, you need to understand how your online store looks and functions from a customer’s perspective. Here, we’ll walk you through the storefront’s key pages and features that shape the customer’s path to purchase on your site.<\/p>
Home Page<\/strong><\/p>The home page serves as the face of your brand. It typically features a clean and inviting design with sliders for promotions, a navigation bar for easy access to different categories, and possibly featured products or new arrivals. This page should be visually appealing and functionally intuitive to ensure a positive first impression.<\/p>
Catalog Page<\/strong><\/p>This page displays all your products or a specific category of products. It should offer filters and sorting options to help customers find what they’re looking for quickly. Product thumbnails should include high-quality images, brief descriptions, and prices to encourage further exploration.<\/p>
Search Results Page<\/strong><\/p>A robust search feature is important for enhancing user experience. The search results page should clearly display products that match the customer’s query with options to refine the search. This page helps customers quickly navigate through a large inventory to find their desired products.<\/p>
Product Page<\/strong><\/p>The product page is where details matter most. It should include high-resolution images, informative product descriptions, availability, pricing details, and an easy-to-spot ‘Add to Cart’ button. Additional features include customer reviews, related products, and social share buttons to enhance user engagement.<\/p>
Shopping Cart<\/strong><\/p>The shopping cart page should summarize the products selected with total costs, and provide options to update quantities or remove items. It should also display available shipping options, estimated delivery times, and a clear call-to-action for proceeding to checkout.<\/p>
Basics of Using Magento 2<\/h2> Let’s explore the basics of using Magento 2 to start your online store.<\/p>
Accessing Your Magento 2 Dashboard<\/h3> Accessing the Magento 2 admin dashboard is your first step toward managing your online store. This central hub is where you’ll oversee all aspects of your eCommerce operation, from sales data to customer interactions.<\/p>
Logging In as an Admin<\/strong><\/p>Here’s how to log in to the Magento 2 admin panel:<\/p>
\nNavigate to your website’s admin URL, which typically looks like yourdomain.com\/admin<\/strong>.<\/li>\n\n\n\nEnter your admin username and password, and click Sign In<\/strong>.<\/li>\n\n\n\nOnce authenticated, you’ll be directed to the dashboard.<\/li>\n<\/ol>Exploring the Dashboard<\/strong><\/p>The Magento 2 dashboard presents a complete overview of your store’s performance. It includes key metrics, recent orders, average order amount, search terms, last orders, and best-selling products.<\/p>
\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>The bottom of the dashboard displays several necessary charts and reports. You can view sales over time, customer activity, and other vital statistics that help you make informed business decisions.<\/p>
Accessing the Admin Account Section<\/strong><\/p>In the upper-right corner of the dashboard, you’ll find the account section. Here, you can manage your account settings, including your username, password, and email address.<\/p>
\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Navigating the Admin Sidebar<\/strong><\/p>The admin sidebar on the left of the screen is your main navigation tool within Magento 2. It contains links to all administrative functions such as Sales, Products, Customers, Marketing, Content, <\/strong>and Reports<\/strong>. Each section is designed to manage specific aspects of your store’s backend.<\/p>Understanding the Admin Workspace<\/strong><\/p>The central part of your admin screen, known as the workspace, displays the content of whichever menu item you select from the sidebar. This area will typically show grids, data forms, and tools related to store management.<\/p>
Configuring Your Store<\/h3> Properly configuring your Magento 2 store is crucial to ensure it aligns with your business needs and complies with local regulations. This section covers the essentials of setting up various store configurations, from user roles to currency settings.<\/p>
Creating New Users and Roles<\/strong><\/p>It’s important to create specific roles for your team members based on their responsibilities to improve security.<\/p>
\nNavigate to the Admin sidebar and click System → Permissions → User Roles<\/strong>.<\/li>\n\n\n\nClick Add New Role<\/strong> and fill in the necessary details for the role, including the role name and specific resources that the role can access.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nAfter creating roles, go to System → Permissions → All Users<\/strong> to add new users.<\/li>\n\n\n\nClick Add New User<\/strong> and fill in the necessary details such as username, email, and password.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nAssign specific roles based on those you have previously created to the new user under the User Role<\/strong> tab. Once done, click Save User<\/strong>.<\/li>\n<\/ol>Configuring Store Details<\/strong><\/p>Setting up your store’s basic information helps how customers perceive and interact with your brand.<\/p>
\nGo to Stores → Configuration → General<\/strong>.<\/li>\n\n\n\nEnter your store information, including the name, phone number, hours of operation, and other relevant contact details.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nIn the Country Options<\/strong> section, select the default country where your business is based or primarily operates.<\/li>\n\n\n\nDepending on the selected country, you may also need to set the default state or province.<\/li>\n\n\n\n In Locale Options<\/strong>, choose the locale that best suits your business’s language and regional settings to tailor the shopping experience to your audience.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Setting Up Web-related Settings<\/strong><\/p>This part involves configuring your URLs and other web-related settings.<\/p>
\nNavigate to Stores → Configuration → General → Web<\/strong>.<\/li>\n\n\n\nEnable the Search Engine Optimization option if you wish for search engines to crawl and index your website.<\/li>\n\n\n\n Adjust your base URLs and secure those URLs if you are using SSL certificates.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nManage your default pages, such as the home page and no route page, and configure URL rewrites and redirects.<\/li>\n<\/ol>Configuring Currency Setup<\/strong><\/p>Proper currency configuration is essential if you’re targeting global customers.<\/p>
\nAccess Stores → Configuration → General → Currency Setup<\/strong>.<\/li>\n\n\n\nSet your base currency, which will be used for all online payment transactions.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nSelect allowed currencies based on the countries you are targeting.<\/li>\n<\/ol>Enabling Contact Us<\/strong><\/p>Enabling a contact page is vital for customer service and feedback.<\/p>
\nGo to Stores → Configuration → General → Contacts<\/strong>.<\/li>\n\n\n\nEnsure the Enable Contact Us<\/strong> option is set to Yes<\/strong>.<\/li>\n\n\n\nConfigure the email options to decide where customer queries should be sent.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Customizing Your Store’s Design<\/h3> Once you’re done with the basic Magento configuration, it’s time to enhance your storefront to reflect your brand’s identity and meet your aesthetic goals, helping you stand out in the competitive eCommerce landscape.<\/p>
Understanding the Default Theme<\/strong><\/p>Magento 2 comes with the default Luma theme, designed to be visually pleasing and functionally robust. This theme serves as a good starting point for customization and offers a responsive design layout.<\/p>
Customizing Storefront Branding<\/strong><\/p>Your online store should include essential elements like the logo, favicon, and copyright, which represent your brand during customer interactions.<\/p>
\nNavigate to Content → Design → Configuration<\/strong> from the left sidebar.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nSelect your active theme and click Edit<\/strong>.<\/li>\n\n\n\nUnder the HTML Head<\/strong> section, upload your favicon image in the Favicon Icon<\/strong> field.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nFor the logo, scroll to the Header<\/strong> section, upload your logo image, and specify its width and height to ensure it fits well within your site’s header.<\/li>\n\n\n\nFill the Welcome Text<\/strong> field with a custom message that greets visitors as they enter your site.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\nGo to the Footer<\/strong> section to customize your copyright text.<\/li>\n<\/ol>Introducing Elements in Magento 2<\/strong><\/p>Magento 2 provides customizable elements such as pages, blocks, widgets, and templates, which are critical for building a dynamic and engaging eCommerce store. You can access them by navigating to Content → Elements<\/strong>.<\/p>\nPages<\/strong>. In Magento 2, pages are individual screens of content that users interact with on your site. You can add new pages and edit existing ones, as well as customize the page title, URL key, layout, and content.<\/li>\n\n\n\nBlocks<\/strong>. These are structural elements on pages that hold content or layout elements within them. Blocks can be static, like text or images, or dynamic, like product lists. Each block consists of a title, an identifier for referencing in layouts or templates, and content.<\/li>\n\n\n\nWidgets<\/strong>. A Widget is a small Magento application that can be inserted into specific pages or particular blocks to provide specific functionality, such as displaying new products, product filters, or promotional banners.<\/li>\n\n\n\nTemplates<\/strong>. In Magento 2, templates define the overall HTML structure of pages and blocks. They are part of Magento’s theme structure and control how content is rendered on the site. If you need to make template changes, find template files under app\/design\/frontend\/<Vendor>\/<Theme>\/Magento_<Module>\/templates<\/strong>\/.<\/li>\n<\/ul>Scheduling Design Changes<\/strong><\/p>Magento 2 allows you to schedule changes to your store design to coincide with marketing events, promotions, or seasons.<\/p>
\nNavigate to Content → Design → Schedule<\/strong>.<\/li>\n\n\n\nClick the Add New Design Change<\/strong> button.<\/li>\n\n\n\nSet the date range and select the design changes you wish to apply during this period.<\/li>\n<\/ol>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Adding Products<\/h3> Adding products is a central aspect of managing your Magento 2 store. This involves setting up product categories, defining product types, and handling inventory to ensure that your products are well-organized and adequately stocked to meet customer demand.<\/p>
Defining Product Categories<\/strong><\/p>Categories in Magento 2 help organize your store’s items into a navigable structure, enhancing the customer experience. You can create a hierarchical category structure with a root category and several subcategories. Here’s a categorization example for a beauty store:<\/p>Root categories<\/strong><\/td>Subcategories<\/strong><\/td><\/tr>
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/04\/the-magento-vps-template-on-hpanel-operating-system-configuration-menu.png\")