How to Change Product Image Proportions in Your Online Store Using OzSpeed hPanel

Adjusting the proportions of product images can improve the visual appeal of your store and ensure a consistent layout for better user experience. Here’s a step-by-step guide to changing product image proportions in OzSpeed hPanel.

---

Step 1: Log in to hPanel #

1. Visit OzSpeed hPanel.
2. Log in with your credentials.
3. Navigate to Online Store > Products.

---

Step 2: Access Image Settings #

1. Go to Product Pages or Manage Products.
2. Select a product whose images you want to adjust.
3. Open the Images section within the product editor.

---

Step 3: Adjust Image Proportions #

Option 1: Resize and Crop Images Manually #

1. Click Edit Image for the product image you want to modify.
2. Use the built-in editor to crop or resize the image.
3. Select the desired aspect ratio (e.g., 1:1 square, 4:3, or 16:9).
4. Save the changes.

---

Option 2: Apply Automatic Image Resizing (Recommended for Consistency) #

1. In the Store Settings, locate the Image Display Options under Design Settings.
2. Choose a default image proportion:
   • Square (1:1): Ideal for a clean and uniform look.
   • Portrait (3:4): Best for products that are taller than they are wide.
   • Landscape (4:3 or 16:9): Suitable for wider products like banners or horizontal layouts.
3. Save the settings to apply the selected proportions across all product images.

---

Option 3: Bulk Adjust Image Proportions #

1. Use a third-party image editor (e.g., Canva, Photoshop) to resize multiple product images to a consistent size.
2. Re-upload the resized images to your product library in hPanel.

Recommended Dimensions: #

• Square (1:1): 1000×1000 pixels
• Portrait (3:4): 750×1000 pixels
• Landscape (4:3): 1200×900 pixels

---

Step 4: Customize Display Settings on Product Pages #

1. Navigate to Website Builder > Product Sections.
2. Open the Product Display Settings.
3. Adjust how product images are displayed:
   • Thumbnail Size: Adjust the size of product thumbnails on category pages.
   • Full-Size Display: Set proportions for images on individual product pages.
4. Save and publish your changes.

---

Step 5: Preview the Adjusted Images #

1. Click Preview in the hPanel dashboard.
2. Visit product pages and category pages to ensure the new proportions look consistent and visually appealing.
3. Test on both desktop and mobile devices for responsiveness.

---

Troubleshooting Tips #

1. Images Appear Distorted:
   • Check that the original image dimensions match the selected aspect ratio.
   • Re-crop the image using the editor to remove distortion.
2. Proportions Not Applying:
   • Ensure you’ve saved changes in the Design Settings.
   • Clear your browser cache and refresh the page.
3. Low-Quality Images:
   • Use high-resolution images that maintain clarity when resized or cropped.

---

Additional Tips: #

• Consistency: Keep all product images in the same proportion for a professional and clean look.
• Optimize for Speed: Compress images to reduce file size without sacrificing quality for faster page loading.
• Use Placeholders: If you’re waiting for high-quality images, use placeholders with consistent proportions to maintain design integrity.