App settings
On the menu tab, click on Settings to go to** the Settings** page. From the page, you will see 2 sections:
Theme setup: This section allows you to configure various settings related to the theme, such as enabling apps, setting the form height, and customizing the desirable action for the product options.
Preview section: This section shows how the product options will appear in your store. It includes options to preview the text, dropdown list, radio buttons, checkboxes, and color swatches.
Theme setup:
In this section, you can activate the app on the current theme of your store. You just need to click on the "Enable app in current theme" button, and you'll be redirected to the theme editor page.
Learn more on how to enable app in the current theme
In this section, you can adjust global styles that apply to all product options added by the app, including:
- Form height: Choose to show the full height or set a maximum height (which will require scrolling within the form).
- Deselect action: Choose to show a "Deselect" button or allow customers to click again to deselect.
- Show selected option value on option label: This option only works for Dropdown, Inline button, Checkbox, Radio button, Color swatches, and Image swatches fields.
- Form Style: You can choose how you'd like the form to be presented to customers. There are 4 available form styles to consider:
Direct form on page (no trigger button)
Expand/Collapse form with trigger button: You can also customize the trigger button's text, background color, hover background color, text color, hover text color, border color, and hover border color.
Open form in the popup (with trigger button)
Open form in the popup (without trigger button) - replace Add to Cart button: You can customize your Add to Cart button's text, background color, hover background color, and text color.
- Field title color: You can set your preferred color of the field titles via the color hex.
- Selected option border color: You can set the border color of the selected option.
In this section, you can enter your Character limit warning, Minimum number warning, and Maximum number warning messages.
If you would like to hide the text "Limit {{ MAX_LENGTH }} characters" or "0/100" on your storefront, feel free to reach out to our support team.
You can change the "True" and "False" values of the toggle (instead of "On/Off"). For example, the True and False values can be set to "Yes/No" for the cart/checkout page.
You can change the "Checked" and "Unchecked" values of the checkboxes (instead of "checked/unchecked"). If you would want to show only checked options on the cart/checkout/order page, feel free to let our support team know.
You can change the display of the Color Swatch as: Circle Thumbnail, Square Thumbnail, or show the option value name (color 1, color 2, color 3).
In this section, you can change the image size on the product page and show the option value name. Let us know if you would love to change the images' shape on your storefront ;)
You can change the text and styles of various buttons related to the photo upload functionality, such as the Upload photo button, Uploading photo button, Re-upload photo button, and more.
In the Preview section on the right side, you will see your changes reflected.
If you would like to show the add-on message in your store's languages, please enter your preferred message in the "Add-on price warning message" field. The {{ PRICE }} is the amount of the add-on price, so please do not remove it.
You can also change the Add-on price message's text color, background color, and border color displayed on your storefront. If you would like to hide this message, you can uncheck the "Show add-on price warning message" option.
Add add-on price to product price (Not working with popup form.)
Combine add-on items to main item on Cart and Checkout page. Kindly check our instruction here for more information regarding this feature
If you enable the "Hide option value on storefront if the linked add-on is unavailable" option, the option value that has an out-of-stock, deleted, or deactivated add-on product will be hidden on your storefront.
In this section, you can configure the behavior of the Add to Cart button, such as redirecting to the cart, redirecting to the checkout, or staying on the same page.
You can also hide or change the Success response message and the Error message when required fields are empty.
Additionally, you can show the quantity box and delete button for add-on products on the cart page. Please check our guidelines here for more information on this feature.
Load scripts on all pages: This setting helps our app integrate better with the CartDrawer.
Show widget on quickview: Feel free to contact our support team if this setting doesn't work with your store's quickview functionality.
Save customization data: If disabled, all selected options and input data on the product page will be reset after reloading.
If you have any further questions or need assistance, please don't hesitate to share them with us at support@tepo.app or use the in-app live chat. We're happy to lend a hand 🤩
Theme setup: This section allows you to configure various settings related to the theme, such as enabling apps, setting the form height, and customizing the desirable action for the product options.
Preview section: This section shows how the product options will appear in your store. It includes options to preview the text, dropdown list, radio buttons, checkboxes, and color swatches.
1. General
Theme setup:
In this section, you can activate the app on the current theme of your store. You just need to click on the "Enable app in current theme" button, and you'll be redirected to the theme editor page.
Learn more on how to enable app in the current theme
In this section, you can adjust global styles that apply to all product options added by the app, including:
- Form height: Choose to show the full height or set a maximum height (which will require scrolling within the form).
- Deselect action: Choose to show a "Deselect" button or allow customers to click again to deselect.
- Show selected option value on option label: This option only works for Dropdown, Inline button, Checkbox, Radio button, Color swatches, and Image swatches fields.
2. Style Settings
- Form Style: You can choose how you'd like the form to be presented to customers. There are 4 available form styles to consider:
Direct form on page (no trigger button)
Expand/Collapse form with trigger button: You can also customize the trigger button's text, background color, hover background color, text color, hover text color, border color, and hover border color.
Open form in the popup (with trigger button)
Open form in the popup (without trigger button) - replace Add to Cart button: You can customize your Add to Cart button's text, background color, hover background color, and text color.
- Field title color: You can set your preferred color of the field titles via the color hex.
- Selected option border color: You can set the border color of the selected option.
3. Single & Multi-line text
In this section, you can enter your Character limit warning, Minimum number warning, and Maximum number warning messages.
If you would like to hide the text "Limit {{ MAX_LENGTH }} characters" or "0/100" on your storefront, feel free to reach out to our support team.
4. Toogle
You can change the "True" and "False" values of the toggle (instead of "On/Off"). For example, the True and False values can be set to "Yes/No" for the cart/checkout page.
5. Single checkbox
You can change the "Checked" and "Unchecked" values of the checkboxes (instead of "checked/unchecked"). If you would want to show only checked options on the cart/checkout/order page, feel free to let our support team know.
6. Color Swatch
You can change the display of the Color Swatch as: Circle Thumbnail, Square Thumbnail, or show the option value name (color 1, color 2, color 3).
7. Image Swatch
In this section, you can change the image size on the product page and show the option value name. Let us know if you would love to change the images' shape on your storefront ;)
8. Upload Photo
You can change the text and styles of various buttons related to the photo upload functionality, such as the Upload photo button, Uploading photo button, Re-upload photo button, and more.
In the Preview section on the right side, you will see your changes reflected.
9. Add-on Price
If you would like to show the add-on message in your store's languages, please enter your preferred message in the "Add-on price warning message" field. The {{ PRICE }} is the amount of the add-on price, so please do not remove it.
You can also change the Add-on price message's text color, background color, and border color displayed on your storefront. If you would like to hide this message, you can uncheck the "Show add-on price warning message" option.
Add add-on price to product price (Not working with popup form.)
Combine add-on items to main item on Cart and Checkout page. Kindly check our instruction here for more information regarding this feature
If you enable the "Hide option value on storefront if the linked add-on is unavailable" option, the option value that has an out-of-stock, deleted, or deactivated add-on product will be hidden on your storefront.
10. Cart Settings
In this section, you can configure the behavior of the Add to Cart button, such as redirecting to the cart, redirecting to the checkout, or staying on the same page.
You can also hide or change the Success response message and the Error message when required fields are empty.
Additionally, you can show the quantity box and delete button for add-on products on the cart page. Please check our guidelines here for more information on this feature.
11. Advanced settings
Load scripts on all pages: This setting helps our app integrate better with the CartDrawer.
Show widget on quickview: Feel free to contact our support team if this setting doesn't work with your store's quickview functionality.
Save customization data: If disabled, all selected options and input data on the product page will be reset after reloading.
If you have any further questions or need assistance, please don't hesitate to share them with us at support@tepo.app or use the in-app live chat. We're happy to lend a hand 🤩
Updated on: 21/11/2024
Thank you!