How to change design settings on your online store

Changing the design settings in your Pre-Order Hero app allows you to customize the design of the Pre-Order button on your online store. You can change the text, color, tooltip, and borders according to your preference. Follow the steps below to learn how:

STEP 1. In your Pre-Order Hero app, click the Settings drop-down arrow and choose General Settings.

STEP 2. Scroll down to the Design Settings section.

STEP 3. Click the Pre-Order Button tab to set text and designs for the Pre-Order button.

STEP 4. In the Button text field, enter your preferred text for the Pre-Order button. Its default text is Pre-Order but you can change it to anything you want. In this example, we change Pre-Order to Pre-Buy.

STEP 5. Choose the background, text, and border colors for your Pre-Order button. In this example, we choose the color blue for the background and border, and white for the text.

You can take a peak of the Pre-Order button that you have created in the preview section.

STEP 6. Increase or decrease the text size, border width, and border radius of your Pre-Order button by dragging the slider either to the left or right, depending on your preference.

STEP 7. Click the Pre-Order Button Hover tab to set colors for the Pre-Order button when you hover the mouse over it.

STEP 8. Choose the button hover color, text color, and border color by clicking on the drop-down arrows. In this example, we choose a lighter shade of blue for the hover and hover border colors and dark blue for the text. This means that the Pre-Order button will turn to a lighter shade of blue when your mouse hovers over it and the text turns from white to dark blue.

You can take a peak of the button hover for your Pre-Order button when you hover the mouse over it in the preview section.

STEP 9. Click the Tooltip tab.

STEP 10. In the Tooltip Text field, enter a phrase or sentence that you would want to appear when the mouse hovers over the Pre-Order button. In this example, we use Buy now to be the first to get a pair as soon as it's available! 

STEP 11. In the Tooltip position field, choose the position for the tooltip. In this example, we choose Bottom. This means the tooltip will appear below the Pre-Order button as soon as the mouse hovers over it.

STEP 12. Choose a tooltip color, tooltip text color, and tooltip border color. In this example, we choose a lighter blue shade for the tooltip and border colors, and dark blue for the text.

You can take a peak of the tooltip when you hover the mouse over the Pre-Order button in the preview section.

STEP 13. Increase or decrease the text size, border width, and border radius of the tooltip by dragging the slider either to the left or right, depending on your preference.

STEP 14. Click Save Settings.

Your changes in the design settings will now be visible on the product pages of your online store.

Still need help? Contact Us Contact Us