Product sections allow you to group and display products in specific layouts on your online store. These sections can showcase categories, featured products, new arrivals, or on-sale items, enhancing the browsing experience for your customers.
Here’s how to set up and customize Product Sections using OzSpeed hPanel.
Step 1: Log in to hPanel #
- Go to OzSpeed hPanel.
- Enter your credentials and log in.
- Navigate to Online Store or Website Builder.
Step 2: Access the Product Sections #
- Open Website Builder from the dashboard.
- Go to the Homepage or a specific page where you want to add a product section.
- Click Edit Page and locate the Product Section option in the editing tools.
Step 3: Add a New Product Section #
- In the page editor, click Add Section.
- Select Product Section from the available options.
- Choose a predefined layout (e.g., grid, carousel, or list view).
Step 4: Configure Product Section Settings #
What to Customize: #
- Section Title:
- Add a title to describe the section (e.g., “Featured Products,” “Best Sellers,” or “New Arrivals”).
- Adjust the font size, color, and style.
- Content Source:
- Select the category or product group to display:
- Specific categories (e.g., “Electronics,” “Clothing”).
- Featured products (manually marked in product settings).
- Sale items (products with a discounted price).
- Use tags or filters to refine the displayed products.
- Select the category or product group to display:
- Product Display:
- Set the number of products to show in the section.
- Enable pagination for larger product groups.
- Layout Options:
- Grid Layout: Display products in rows and columns.
- Carousel: Showcase products in a sliding format.
- List View: Arrange products vertically with detailed descriptions.
Step 5: Customize Product Cards #
Each product displayed in the section uses a product card layout. Customize these cards to enhance their appeal.
What to Customize: #
- Image Display:
- Choose to display one primary image or alternate images on hover.
- Product Details:
- Show or hide product name, price, and a short description.
- Buttons:
- Add Add to Cart, Wishlist, or View Details buttons.
- Customize button colors, text, and hover effects.
Step 6: Style the Section #
- Click on the Style or Design tab in the section editor.
- Adjust the following:
- Background Color or Image: Choose a background for the section to make it stand out.
- Spacing: Set margins and padding for the section.
- Fonts: Use consistent typography for section titles and product details.
Step 7: Add Filters and Sorting (Optional) #
Enable filters and sorting options to improve user navigation.
Filters to Add: #
- Price range
- Product categories
- Tags (e.g., “On Sale,” “New”)
- Ratings
Sorting Options: #
- Best-selling
- Alphabetical
- Price (low to high or high to low)
Step 8: Preview and Save #
- Click Preview to see how the product section looks on both desktop and mobile devices.
- Make necessary adjustments to the layout or settings.
- Click Save to store your changes.
Step 9: Publish the Product Section #
- Once you’re satisfied, click Publish to make the product section live on your website.
- Verify that the section appears correctly on the intended page.
Troubleshooting Tips #
- Products Not Displaying:
- Ensure the selected category or product group has active products.
- Check that the products are set to Visible in the product settings.
- Section Not Aligned Properly:
- Adjust the spacing and alignment settings in the section editor.
- Images Not Loading:
- Ensure product images are uploaded and meet the size requirements.
Additional Tips: #
- Highlight Seasonal Promotions: Use product sections to showcase seasonal or limited-time offers.
- Test Responsiveness: Ensure the section looks good on mobile and desktop views.
- Add Call-to-Actions (CTAs): Include buttons like “Shop Now” or “Explore More” to drive engagement.
