How to Adjust the Number of Columns When Displaying Products on Mobile in Your Online Store Using OzSpeed hPanel

Customizing the number of columns for mobile product displays can enhance the user experience, making your store more visually appealing and easier to navigate on smaller screens.

---

Step 1: Log in to OzSpeed hPanel #

1. Visit OzSpeed hPanel.
2. Enter your credentials and log in.
3. Navigate to Online Store > Design Settings.

---

Step 2: Access Mobile Layout Settings #

1. In the Design Settings menu, locate the Mobile View or Responsive Design section.
2. Click on Product Display Options or a similar section specific to product grids.

---

Step 3: Adjust the Number of Columns #

1. Find the Columns for Mobile View setting.
2. Select your preferred option:
   • 1 Column: Displays one product per row for a detailed view.
   • 2 Columns: Shows two products per row for a balanced display.
   • 3 Columns: Displays more products per row, ideal for compact item previews.
3. Save the changes.

---

Step 4: Preview Changes #

1. Use the Preview Mode in hPanel to view how the product grid looks on mobile.
2. Ensure:
   • The layout is responsive and adjusts to various screen sizes.
   • Images and text are properly aligned and readable.

---

Step 5: Test on Actual Mobile Devices #

1. Open your online store on a smartphone or tablet.
2. Navigate to a product category or collection page to confirm the number of columns is displaying correctly.

---

Troubleshooting Tips #

1. Changes Not Visible on Mobile:
   • Clear your website’s cache to ensure updates are applied.
   • Check for overrides in custom CSS or template settings.
2. Text or Images Misaligned:
   • Ensure product titles and descriptions are brief to avoid layout breaks.
   • Optimize product images for mobile to maintain consistency.
3. Performance Issues:
   • Limit the number of products displayed per page if loading times increase with more columns.

---

Additional Tips: #

• Consider User Experience: Use 1 or 2 columns for better readability on smaller screens.
• Highlight Important Products: Use featured products or carousels for key items instead of adding too many columns.
• Maintain Consistency: Ensure the column layout complements desktop and tablet views for a cohesive design.