How to Customize and Manage “Add to Bag” Buttons in Your Online Store Using OzSpeed hPanel

The “Add to Bag” button is one of the most important elements in your online store, encouraging customers to start the purchasing process. Customizing its appearance and functionality ensures a better user experience and aligns with your branding.

---

Step 1: Log in to hPanel #

1. Visit OzSpeed hPanel.
2. Enter your credentials and log in.
3. Navigate to Website Builder or Online Store Settings.

---

Step 2: Locate the “Add to Bag” Button Settings #

1. Go to Product Pages in the Website Builder.
2. Select a product or category page to edit.
3. Click on the “Add to Bag” Button to access its settings.

---

Step 3: Customize the Button Text #

1. In the button settings, locate the Button Label field.
2. Change the text to suit your preferences (e.g., “Add to Cart,” “Buy Now,” “Add to Bag”).
3. Save the changes.

---

Step 4: Adjust Button Design #

1. Open the Design Settings for the “Add to Bag” button.
2. Customize the following:
   • Color: Choose a color that contrasts well with the background and stands out.
   • Font: Adjust the font style, size, and weight.
   • Border: Add rounded edges or borders to match your store’s style.
   • Hover Effects: Add effects like color changes or shadow when the button is hovered over.

---

Step 5: Position the Button #

1. Drag and drop the “Add to Bag” button to reposition it on the product page.
2. Ensure it’s placed prominently near the product image or description for visibility.

---

Step 6: Add Button Actions #

1. In the button settings, configure what happens when a customer clicks the button:
   • Add the product to the bag (cart).
   • Redirect to the shopping bag (cart) page.
   • Display a pop-up confirmation that the product has been added to the bag.
2. Save your preferences.

---

Step 7: Test the “Add to Bag” Button #

1. Visit your storefront and navigate to a product page.
2. Click the “Add to Bag” button and confirm:
   • The product is added to the shopping bag.
   • The button functions as expected across different devices (desktop and mobile).

---

Troubleshooting Tips #

1. Button Not Working:
   • Check that the button is linked correctly to the shopping bag functionality in the Product Settings.
   • Verify that the product is marked as Active.
2. Button Not Visible:
   • Ensure the button is enabled in the Product Page Layout.
   • Check that the product is in stock, as buttons may be hidden for out-of-stock products.
3. Button Design Issues:
   • Clear your browser cache if the button design changes aren’t showing.
   • Ensure the button color contrasts well with the background for accessibility.

---

Additional Tips: #

• Call-to-Action Optimization: Use engaging text like “Add to Your Collection” or “Grab It Now” to make the button more appealing.
• Analytics: Track how often the “Add to Bag” button is clicked using tools like Google Analytics to measure engagement.
• Mobile-Friendly Design: Ensure the button is large and easy to tap on smaller screens.