My Account
The “My Account” page is where customers can manage their personal information, order history, and preferences on your Shopify store.
1. Enable Reorder
When this feature is enabled, you will be able to reorder your previous orders from the My Account page, and a Reorder button will be displayed.
2. Enable Recent Order
Displays a list of the customer’s most recent orders on the “My Account” page. This helps customers view and access their order history at a glance, making it easier to reorder or track past purchases.
-> View the number of recent order products:
Set the total number of recent order products to be displayed.
3. Enable Reorder & Checkout Button
When this option is enabled, customers can directly reorder from the My Account page and proceed to checkout easily. They can reorder selected items and complete the purchase without additional steps.
4. Enable Discount Code
Allows customers to apply discount codes when reordering items. This encourages repeat purchases and improves customer satisfaction by offering discounts during the reorder process.
5. Reorder/Recent Order Product Default Checked
When enabled, all items from a recent order or a reorder list are pre-selected (checked) by default. Customers can modify their selection if needed but won’t have to manually select every item, saving time and effort.
6. Enable Order Note Only for Recent Order Icon
Allows customers to add special instructions or notes to their order, specifically for items they are reordering through the “Recent Order” icon. This is useful for providing additional details or preferences for a repeat purchase.
7. Enable Redirect After Add to Cart
When this option is enabled, customers will be redirected to the cart page when they choose a product to reorder from the My Account page and click the Add to Cart button.
8. Enable Add to Cart Button
When this option is enabled, the Add to Cart button will be displayed on the My Account page.
Text settings
1. Popup Display Option
-> This setting determines how the reorder popup is displayed on the user’s screen
- Display in Popup:
The reorder feature will show in the popup on myaccount page after clicking the recent order or reorder option. - Display in Bottom:
The reorder feature will show at the bottom of the page after clicking on the recent order or reorder option.
2. Popup Label Text
-> This text appears as the title or header of the reorder popup.
-> Ensure the text is concise yet informative, such as “Order Details” or “Reorder Summary”.
3. Add to Cart Button Text
-> This text appears on the button that adds selected items to the cart.
-> Customize it to something like “Add Items to Cart” or “Add Products”.
4.Reorder & Checkout Button Text
-> This option is used to change the text for the checkout button.
-> This text appears on the button that allows customers to reorder all items and proceed to checkout.
5. Discount Code
-> This option is for applying discount coupons/codes. Whatever discount you select from the dropdown here will be applicable for reorder orders.
6. Discount Message
-> This option is used as a placeholder text in the discount.
7. Note Title
-> The title text for any additional notes the customer might want to add to their reorder.
-> Example: “Add Special Instructions” or “Order Notes”.
8. Note Placeholder Text
-> Placeholder text appears in the notes field before the customer starts typing.
-> Example: “Enter any special instructions for your reorder here (e.g., gift wrapping)”.
9. Checking Out Text
-> The label for the checkout button.
-> Example: “Proceed to Checkout” or “Complete Your Order”.
10. Select Reorder Button Type
-> Determines the style of the reorder button on the page.
- Icon:
Displays the button as an icon only (e.g.,Show the icon as a reorder button). - Button:
Displays the reorder button as a standard text button.
-> Example: “Reorder” or “Order Again”.
11. Upload Reorder Icon
-> Allows you to upload a custom icon for the reorder functionality.
Specifications:
-> Dimensions: 40×40 px for optimal display.
-> File Size: Less than 1MB.
-> Example: when this option will be visible for configuration, upload a shopping cart or arrow symbol.
12. Select Recent Order Button Type
-> Similar to the reorder button, this determines the style for the “Recent Order” button.
- Icon:
Displayed as an icon (e.g., clock or history symbol). - Button:
Displayed as a standard text button, such as “Recent Orders”.
13. Recent Order Button Text
-> Text displayed on the button that accesses recent orders.
-> Example: “View Recent Orders” or “Order History”.
-> This customization provides flexibility in the appearance and functionality of the “My Account” page, ensuring a seamless experience for customers looking to reorder.
Style settings
Here’s a detailed explanation of each styling setting for the “My Account” page.
1. Popup Label Font Size
-> Sets the font size of the popup title or header text.
-> Example: 16px, 20px, etc.
-> Use a font size that makes the label easily readable.
2. Popup Label Text Color
-> Defines the color of the popup label text.
-> Use HEX, RGB, or color names (e.g., #000000 for black, #ffffff for white).
-> Choose a color that aligns with your brand theme and ensures readability.
3. Popup Close Button Color
-> Specifies the color of the close (X) button on the popup.
-> Example: #ff0000 for red or #888888 for grey.
4. Popup Close Button Hover Color
-> Sets the color of the close button when hovered over by the cursor.
-> Typically a slightly darker or lighter shade of the default color to indicate interactivity.
5. Popup Box Border Color
-> Determines the border color of the popup box.
-> Example: #cccccc for a subtle grey border or #000000 for a bold black border.
6. Add to Cart Button Background Color
-> Specifies the background color of the “Add to Cart” button.
-> Example: #28a745 for green or #007bff for blue.
7. Add to Cart Button Background Hover Color
-> Sets the background color of the “Add to Cart” button when hovered over.
-> Choose a shade that contrasts slightly with the default background color to signal interactivity.
8. Add to Cart Text Color
-> Defines the text color of the “Add to Cart” button.
-> Example: #ffffff for white text on a dark background.
9. Add to Cart Text Hover Color
-> Sets the text color of the “Add to Cart” button when hovered over.
-> Ensure the color is legible and matches the hover background.
10. Add to Cart Font Size
-> Adjusts the font size of the “Add to Cart” button text.
-> Example: 14px, 16px, etc.
11. Add to Cart Top/Bottom Padding
-> Defines the top and bottom (verticle) spacing (padding) inside the “Add to Cart” button.
-> Example: 8px, 10px.
12. Add to Cart Left/Right Padding
-> Specifies the left and right (horizontal) spacing (padding) inside the “Add to Cart” button.
-> Example: 12px, 15px.
13. Recent Order Button Color
-> Sets the background color of the “Recent Order” button.
-> Example: #f8f9fa for a light grey or #6c757d for a darker shade.
14. Recent Order Button Hover Color
-> Defines the background color of the “Recent Order” button when hovered over.
-> Use a shade that highlights the button for better visibility.
15. Recent Order Button Text Color
-> Specifies the text color of the “Recent Order” button.
-> Example: #212529 for dark text or #ffffff for light text.
16. Recent Order Button Font Size
-> Adjusts the font size of the “Recent Order” button text.
-> Example: 14px, 16px.
17. Recent Order Button Text Hover Color
-> Sets the text color of the “Recent Order” button when hovered over.
-> Ensure it contrasts with the hover background color.
18. Recent Order Button Top/Bottom Padding
-> Defines the top and bottom (vertical) spacing (padding) inside the “Recent Order” button.
-> Example: 8px, 10px.
19. Recent Order Button Left/Right Padding
-> Specifies the left and right (horizontal) spacing (padding) inside the “Recent Order” button.
-> Example: 12px, 15px.
20. Reorder Button Color
-> Sets the background color of the “Reorder” button.
-> Example: #007bff for blue or #ffc107 for yellow.
21. Reorder Button Hover Color
-> Specifies the background color of the “Reorder” button when hovered over.
-> Choose a shade that signals interactivity.
22. Reorder Button Text Color
-> Defines the text color of the “Reorder” button.
-> Example: #ffffff for white text on a dark background.
23. Reorder Button Font Size
-> Adjusts the font size of the “Reorder” button text.
-> Example: 14px, 16px.
24. Reorder Button Text Hover Color
-> Sets the text color of the “Reorder” button when hovered over.
-> Ensure it is readable and complements the hover background color.
25. Reorder Button Top/Bottom Padding
-> Defines the top and bottom (vertical) spacing (padding) inside the “Reorder” button.
-> Example: 8px, 10px.
26. Reorder Button Left/Right Padding
-> Specifies the left and right (horizontal) spacing (padding) inside the “Reorder” button.
-> Example: 12px, 15px.
These style settings allow you to customize the design and layout of the “My Account” page, ensuring it aligns with your brand aesthetics and provides a user-friendly experience.