Product Page Settings
To edit Teeinblue's product page, go to Store Settings > Product Page Settings. This edit is only applied for one current log-in store, if you want to change the style or the function for another store, kindly click on Switch Store
Note: Some settings on this page are only compatible with Campaigns by Product Base or SDK v1.
Please continue reading and we will explain in detail what these settings do.
In this tab, the left-side panel provides controls to enable or disable specific features, rearrange content blocks, and configure individual feature settings. The right-side displays a live preview of the product page, allowing you to visualize changes in real time.
Show Gallery & live preview: Enable Teeinblue’s live preview to display customizations in real time. When this option is disabled, the product page will revert to using the original gallery provided by your Shopify theme.
Load gallery immediately: When enabled, Teeinblue’s live preview gallery loads on every page visit. If disabled, the live preview appears only after the customer begins personalizing. Until then, the default gallery from your Shopify theme will be displayed on initial load.
Show only one Mockup image: Always show one mockup image, even when you have more than one mockup images.
Zoom Gallery: Lets customers zoom in on the main image in the live gallery for a closer look.”
Show navigation numbers on gallery: Displays numbered indicators for each mockup image in the gallery, making it easier for customers to navigate through them.
Show only the assigned images of the selected variant:: When enabled, the gallery will display only the mockup images linked to the selected variant, helping customers see the most relevant visuals.
Display of Gallery's Thumbnails:
- Static (exclude real-time change): not update customer's options
- Live preview (include real-time change): update same as main gallery, but causes heavy load
- Hide thumbnails (only show the large image): hide the thumbnail completely
Show Compare at Price: Show/Hide the compare price
Show "Save" badge: Show or hide the badge that highlights customer savings. You can choose to display the discount as a percentage or as a currency amount.
Position of Price: Choose how the Price blocks are displayed. You can choose between these 3 options:
Show custom info below price: Add extra information, such as tax details, below the price. You can enter the custom message through the Product Page Content settings.
Hide option if there's only one value: Choose to hide variant options when there is only one available value.
Form type (for Campaign by Shopify): This setting applies only to Campaign by Shopify. Select how the personalization form will be displayed, choosing from one of three available styles.
The following image is an example of Teeinblue product in popup style:
Show options of the first template by default: Always show the first template default option on product page. If disabled, form will not show personalization options until customers select a template. If there's only one template, it will be selected automatically.
Enable this feature to keep your form short
Search in Dropdown list of clipart sub-category name: Allows Customers to search for Clipart Category's name.
Search in Dropdown list of cliparts: Same as above. This option allows Customers to search for a particular Clipart file.
Photo Reposition on Mockup Let customers reposition their uploaded photo directly on Mockup. If disabled, photo reposition works on Artwork. You can read more about this feature here.
Sync customer's selection between same title options Syncs Customers' selection between different Templates/Artworks. This will be applied for all other options (in all templates) having the same Option title and Personalization.
In the example above, if the Customers have already selected the red hair option for the girl, and the Golden Retriever for the Dog on the first template, they will not have to do it again for the second template.
Auto-select the first clipart when switching to a sub-category: When buyers switch the sub-category within a group of categories, the first clipart from the newly selected sub-category will be automatically chosen, replacing the previous clipart.
In this example, when the Customers switch to the Long Hair category, the first clipart is automatically selected.
Show form header: Display a custom header above the Customization Form. You can set the header text in the Product Page Content settings.
Show "Preview" button: Choose whether to display or hide the Preview button on the product page.
All mockups form gallery: All mockup images will be shown
Preview only artwork: When enabled, it shows only artworks in popup preview. If disabled, it shows entire gallery with mockups.
Show only the first mockup containing the correct printarea: In case you are selling Canvas with multiple sizes, only the first mockup images of the selected size variant will be shown.
Show Close text: Recommend to enable because the X button on top might be cut off on some screens.
Block Preview if required fields are empty: Customers must complete all required fields—including the confirmation checkbox—before they can preview the design
Show Quantity input: Displays a quantity selector on the product page. This option only works with Campaigns using the Product Base.
Show "Confirmation checkbox": Customers are required to check the box in order to add to cart.
Show "Buy now" button: Choose whether to display or hide the Buy Now button on the product page
Show ATC/Buy now button on Preview popup
Action for "Add to cart" button to Show response message
or Redirect straight to Cart page.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): You can ignore this setting. It is usually used for Developers to make the Teeinblue's ATC Button compatible with your Cart Drawer/Cart Counter
You can read more about this feature in detail here.
Show "Personalize" button on mobile: The "Personalize" button appears at the bottom of screen when the personalization form is not on the screen yet.
Click on it will scroll down to personalization form.
Show gallery navigation button on mobile: Displays arrow buttons on mobile devices, allowing customers to view between the images by tapping the arrows.
Show sticky buttons: Customers will need to scroll to the bottom of the personalization form to see the Preview & Add to cart button.
Show gallery’s thumbnails on mobile: When enabled, thumbnails are displayed below the main image on mobile. If disabled, only the main mockup image will be shown.
Show product description by app: Displays the product description using Teeinblue's description block instead of the Theme's. By default, the theme’s description is hidden. This setting only applies to Campaigns by Product Base.
Block inspecting clipart: Enable this setting to protect your clipart from web inspector.
Load scripts on all page outside of product page: Turn on to load customization image on cart drawer and other places.
In this tab, the left-side panel lets you customize the style of your product page, while the right-side shows a live preview so you can see your changes in real time.
These settings are designed to be straightforward and easy to use. Feel free to explore and adjust them to find the style that best fits your store.
Customize the appearance of the variant section, including options to style the color, border, and alignment to match your store’s design.
Customize the appearance of the personalization form, with options to adjust the color, border, alignment, number of clipart per row, and more, to align with your store’s design.
In this section, you can customize the overall theme of your Product Page. To keep the classic Teeinblue style, select Classic. For a fresh, modern look, choose Modern. If you’re using a Dark Mode theme, select Dark Mode.
Customize the appearance of the Add to Cart (ATC) button area, including options to adjust the color, change the layout, and more.
Customize the colors of various elements across your store to match your branding and design preferences
Note: Some settings on this page are only compatible with Campaigns by Product Base or SDK v1.
Please continue reading and we will explain in detail what these settings do.
Elements & Behaviors tab
In this tab, the left-side panel provides controls to enable or disable specific features, rearrange content blocks, and configure individual feature settings. The right-side displays a live preview of the product page, allowing you to visualize changes in real time.
Gallery & Mockup:
Show Gallery & live preview: Enable Teeinblue’s live preview to display customizations in real time. When this option is disabled, the product page will revert to using the original gallery provided by your Shopify theme.
Load gallery immediately: When enabled, Teeinblue’s live preview gallery loads on every page visit. If disabled, the live preview appears only after the customer begins personalizing. Until then, the default gallery from your Shopify theme will be displayed on initial load.
Show only one Mockup image: Always show one mockup image, even when you have more than one mockup images.
Zoom Gallery: Lets customers zoom in on the main image in the live gallery for a closer look.”
Show navigation numbers on gallery: Displays numbered indicators for each mockup image in the gallery, making it easier for customers to navigate through them.
Show only the assigned images of the selected variant:: When enabled, the gallery will display only the mockup images linked to the selected variant, helping customers see the most relevant visuals.
Display of Gallery's Thumbnails:
- Static (exclude real-time change): not update customer's options
- Live preview (include real-time change): update same as main gallery, but causes heavy load
- Hide thumbnails (only show the large image): hide the thumbnail completely
Price:
Show Compare at Price: Show/Hide the compare price
Show "Save" badge: Show or hide the badge that highlights customer savings. You can choose to display the discount as a percentage or as a currency amount.
Position of Price: Choose how the Price blocks are displayed. You can choose between these 3 options:
Show custom info below price: Add extra information, such as tax details, below the price. You can enter the custom message through the Product Page Content settings.
Variant options
Hide option if there's only one value: Choose to hide variant options when there is only one available value.
Personalization Form
Form type (for Campaign by Shopify): This setting applies only to Campaign by Shopify. Select how the personalization form will be displayed, choosing from one of three available styles.
The following image is an example of Teeinblue product in popup style:
Show options of the first template by default: Always show the first template default option on product page. If disabled, form will not show personalization options until customers select a template. If there's only one template, it will be selected automatically.
Enable this feature to keep your form short
Search in Dropdown list of clipart sub-category name: Allows Customers to search for Clipart Category's name.
Search in Dropdown list of cliparts: Same as above. This option allows Customers to search for a particular Clipart file.
Photo Reposition on Mockup Let customers reposition their uploaded photo directly on Mockup. If disabled, photo reposition works on Artwork. You can read more about this feature here.
Sync customer's selection between same title options Syncs Customers' selection between different Templates/Artworks. This will be applied for all other options (in all templates) having the same Option title and Personalization.
In the example above, if the Customers have already selected the red hair option for the girl, and the Golden Retriever for the Dog on the first template, they will not have to do it again for the second template.
Auto-select the first clipart when switching to a sub-category: When buyers switch the sub-category within a group of categories, the first clipart from the newly selected sub-category will be automatically chosen, replacing the previous clipart.
In this example, when the Customers switch to the Long Hair category, the first clipart is automatically selected.
Show form header: Display a custom header above the Customization Form. You can set the header text in the Product Page Content settings.
Preview button:
Show "Preview" button: Choose whether to display or hide the Preview button on the product page.
All mockups form gallery: All mockup images will be shown
Preview only artwork: When enabled, it shows only artworks in popup preview. If disabled, it shows entire gallery with mockups.
Show only the first mockup containing the correct printarea: In case you are selling Canvas with multiple sizes, only the first mockup images of the selected size variant will be shown.
Show Close text: Recommend to enable because the X button on top might be cut off on some screens.
Block Preview if required fields are empty: Customers must complete all required fields—including the confirmation checkbox—before they can preview the design
ATC button:
Show Quantity input: Displays a quantity selector on the product page. This option only works with Campaigns using the Product Base.
Show "Confirmation checkbox": Customers are required to check the box in order to add to cart.
Show "Buy now" button: Choose whether to display or hide the Buy Now button on the product page
Show ATC/Buy now button on Preview popup
Action for "Add to cart" button to Show response message
or Redirect straight to Cart page.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): You can ignore this setting. It is usually used for Developers to make the Teeinblue's ATC Button compatible with your Cart Drawer/Cart Counter
Addon Charge:
You can read more about this feature in detail here.
Mobile:
Show "Personalize" button on mobile: The "Personalize" button appears at the bottom of screen when the personalization form is not on the screen yet.
Click on it will scroll down to personalization form.
Show gallery navigation button on mobile: Displays arrow buttons on mobile devices, allowing customers to view between the images by tapping the arrows.
Show sticky buttons: Customers will need to scroll to the bottom of the personalization form to see the Preview & Add to cart button.
Show gallery’s thumbnails on mobile: When enabled, thumbnails are displayed below the main image on mobile. If disabled, only the main mockup image will be shown.
Extras:
Show product description by app: Displays the product description using Teeinblue's description block instead of the Theme's. By default, the theme’s description is hidden. This setting only applies to Campaigns by Product Base.
Block inspecting clipart: Enable this setting to protect your clipart from web inspector.
Load scripts on all page outside of product page: Turn on to load customization image on cart drawer and other places.
Styles & Colors
In this tab, the left-side panel lets you customize the style of your product page, while the right-side shows a live preview so you can see your changes in real time.
These settings are designed to be straightforward and easy to use. Feel free to explore and adjust them to find the style that best fits your store.
Variant section
Customize the appearance of the variant section, including options to style the color, border, and alignment to match your store’s design.
Personalization form
Customize the appearance of the personalization form, with options to adjust the color, border, alignment, number of clipart per row, and more, to align with your store’s design.
In this section, you can customize the overall theme of your Product Page. To keep the classic Teeinblue style, select Classic. For a fresh, modern look, choose Modern. If you’re using a Dark Mode theme, select Dark Mode.
ATC Buttons
Customize the appearance of the Add to Cart (ATC) button area, including options to adjust the color, change the layout, and more.
Colors
Customize the colors of various elements across your store to match your branding and design preferences
Updated on: 16/04/2025
Thank you!