Articles on: Store Settings
This article is also available in:

Product Page Settings

To edit Teeinblue's product page, go to Store Settings > Product Page Settings. Changes here only apply to the store you are currently logged in to. To change another store, use Switch Store first.



Some settings on this page only work with Campaigns by Product Base or SDK v1.


Continue reading this article to learn what each setting does.


📖 Table of Contents




Elements & Behaviors tab


In this tab, the left panel lets you turn features on or off, rearrange content blocks, and configure each feature. The right panel shows a live preview of your product page, so you can see your changes in real time.




  • Show Gallery & live preview: Show Teeinblue's live preview so customers see their personalization in real time. When this is off, the product page uses the original gallery of your Shopify theme.



  • Load gallery immediately: When on, Teeinblue's live preview gallery loads on every page visit. When off, your theme's default gallery shows first, and the live preview only appears after the customer starts personalizing.
  • Show only one Mockup image: Only show the first mockup image in the gallery, even when the product has several.
  • Zoom gallery: Let customers zoom in on the main image of the live gallery for a closer look. Choose a zoom method:
    • Hover/pinch to zoom: customers hover (desktop) or pinch (mobile) on the image to zoom in.
    • Click to view a larger image in a popup: customers click the image to open a larger version in a popup.


Zoom gallery works on desktop and Android. iOS has its own built-in zoom, so Teeinblue's zoom is not used there.


  • Show navigation numbers on gallery: Show a number for each mockup image in the gallery, so customers can move between images more easily.



  • Show only the assigned images of the selected variant: Only show the mockup images linked to the selected variant.
  • Display of Gallery's Thumbnails:
    • Static (exclude real-time change): thumbnails do not update with the customer's options.
    • Live preview (include real-time change): thumbnails update like the main gallery, but this makes the page heavier to load.
    • Hide thumbnails (only show the large image): thumbnails are hidden completely.



Price



  • Show Compare at Price: Show or hide the compare-at price. This only works with Campaigns by Product Base.



  • Show "Save" badge: Show or hide the badge that highlights how much the customer saves. You can show the discount as a percentage or as a currency amount. This only works with Campaigns by Product Base.



  • Position of Price: Choose where the price block is displayed. There are 3 options:



  • Show custom info below price: Add extra information below the price, such as tax details. Enter the message in Store Settings > Product Page Content.




Variant options


  • Hide option if there's only one value: Hide a variant option when it only has one available value.




Personalization Form



  • Form type (for Campaign by Shopify): This setting only applies to Campaigns by Shopify. Choose one of three styles for the personalization form.



The image below shows a Teeinblue product with the popup style:



  • Show options of the first template by default: Always show the options of the first template on the product page. When off, the form shows no personalization options until the customer selects a template. If there is only one template, it is selected automatically.



  • Search in Dropdown list of clipart sub-category name: Let customers search for a Clipart sub-category by name.



  • Search in Dropdown list of cliparts: Let customers search for a specific Clipart.



  • Sync customer's selection between same title options: Sync the customer's selections between Templates and Artworks. This applies to every option, in every template, that has the same Option title and Personalization type.



In the example above, the customer already picked red hair for the girl and a Golden Retriever for the dog in the first template. They do not need to pick them again in the second template.


  • Auto-select the first clipart when switching to a sub-category: When the customer switches to another sub-category, the first Clipart of that sub-category is selected automatically and replaces the previous one.



In this example, when the customer switches to the Long Hair category, its first Clipart is selected automatically.


  • Show form header: Show a custom header above the personalization form. Enter the header text in Store Settings > Product Page Content.



  • Use Teeinblue's Date Picker instead of the browser's: Replace the browser's default date picker with Teeinblue's date picker. The browser's default date picker supports multiple languages and formats based on the customer's browser. Only switch to Teeinblue's date picker in rare cases.
  • Use Teeinblue's Time Picker instead of the browser's: Replace the browser's default time picker with Teeinblue's time picker, which looks the same on every device and follows your product page styling. You can read more in the Clock Face feature.
  • Enable Reposition on main gallery: Let customers reposition supported Layers directly on the main gallery, instead of using the Reposition button. This only works on desktop. On mobile, customers still use the popup. For text, repositioning starts when the customer types in the text field. You can read more in Text Reposition feature.



  • Auto-zoom to the text when focusing on text input: When the customer clicks into a text field, the preview zooms in on that text, so small text is easier to read while typing.


  • Enable Clear all for text options: Show an X icon inside text fields, so customers can clear everything they typed in one click instead of deleting it character by character. This is off by default.



The icon sits on the right side of the text field and only appears once the field has text. If the character counter is on, it sits to the left of the X icon.


Clear all only works with text Layers whose input type is All characters. It does not show for Only numbers, Date picker, or Custom rules.


This is especially useful with Global Options. When a customer's text is synced from another product, they can clear it in one click and type something new.



Upload photo


This section groups every setting for the Upload Photo Personalization Option. You can read more about that feature in Upload Photo feature.



  • Show re-upload photo button in photo popup: Show a Choose another image button inside the Photo Reposition and Photo Cropper popups, so customers can replace their photo without closing the popup first.



If the Upload photo option has an image effect, the Photo Reposition popup closes after the customer picks a new photo, applies the effect, then opens again. This does not apply to the Photo Cropper popup.


  • Photo Reposition on Mockup: Let customers reposition their uploaded photo directly on the mockup. When off, photo reposition works on the Artwork. This setting was previously in Personalization Form.



  • Allow buyers to choose previously processed images: Let customers pick a photo they already uploaded and processed, instead of uploading it again. Uploaded and processed images are kept for 72 hours, so customers do not lose them if they reload the page or edit their item after adding it to cart. Previous images are shown in a list that scrolls horizontally. This is on by default and works with every Upload photo option, not only those with Gen AI effects. This setting was previously in Personalization Form.



  • Auto-zoom to the uploaded photo: Let customers zoom in on their uploaded photo in the popup for a closer look. This helps when the Artwork is large and the photo looks small in the popup.



Preview button



  • Show "Preview" button: Show or hide the Preview button on the product page. You can choose what the preview shows:
    • All mockups form gallery: Show every mockup image.
    • Preview only artwork: Only show the Artworks in the preview popup. When off, the popup shows the whole gallery with mockups.
    • Show only the first mockup containing the correct printarea: Only show the first mockup of the selected size variant. This helps when you sell a product like Canvas in several sizes.
  • Show Close text: Show a Close text button in the preview popup. We recommend turning this on, because the X button at the top may be cut off on some screens.



  • Block Preview if required fields are empty: Customers must fill in all required fields, including the confirmation checkbox, before they can preview their design.



ATC button



  • Show Quantity input: Show a quantity selector on the product page. This only works with Campaigns by Product Base.



  • Show "Confirmation checkbox": Customers must tick the checkbox before they can add the product to cart.



  • Show "Buy now" button: Show or hide the Buy now button on the product page.



  • Show ATC/Buy now button on Preview popup: Show the Add to cart and Buy now buttons inside the preview popup.



  • Action for "Add to cart" button: Choose what happens after the customer clicks Add to cart. You can show a response message, or redirect them straight to the Cart page.



  • Notify "Shopify.onItemAdded" when new item added to cart (for developers): You can ignore this setting. Developers use it to make Teeinblue's Add to cart button work with your theme's cart drawer or cart counter.



Addon Charge


You can read more about this feature in Upsell your product design with Addon Charge.



  • Show addon price warning message: Show a message that tells customers about the extra charge. Shopify requires this message, so it stays on. To change it, contact Teeinblue Support.
  • Show addon price on options: Show the Addon Charge price next to options of type Dropdown, Inline Button, Checkbox, and Radio.
  • Add addon price to product price: Add the Addon Charge price directly into the product's main price on the product page. This works with all Shopify Markets.


Add addon price to product price only works with Campaigns by Product Base.



Mobile


  • Show "Personalize" button on mobile: Show a Personalize button at the bottom of the screen while the personalization form is not yet visible. Tapping it scrolls down to the form.



  • Show gallery navigation button on mobile: Show arrow buttons on mobile, so customers can tap to move between images.



  • Show sticky buttons: Keep the Preview and Add to cart buttons visible at the bottom of the screen. When off, customers need to scroll to the end of the personalization form to see them.



  • Show gallery's thumbnails on mobile: Show thumbnails below the main image on mobile. When off, only the main mockup image is shown.



Extras


  • Show product description by app: Show the product description with Teeinblue's description block instead of your theme's. The theme's description is hidden by default. This only applies to Campaigns by Product Base.



  • Block inspecting clipart: Protect your Clipart from being copied with the browser's inspect tool.
  • Load scripts on all page outside of product page: Load Teeinblue on pages other than the product page, so personalized images also show in the cart drawer and other places.
  • Enable skeleton loader: Show a loading placeholder while Teeinblue's form loads, instead of your theme's default content.



Styles & Colors tab


In this tab, the left panel lets you customize the style of your product page. The right panel shows a live preview, so you can see your changes in real time.


These settings are simple to use. Try different values to find the style that best fits your store.


Variant section


Customize the variant section, including color, border, and alignment.




Personalization form


Customize the personalization form, including color, border, alignment, number of Cliparts per row, and more.



You can also pick an overall theme for your product page. Select Classic to keep the classic Teeinblue style, Modern for a fresh, modern look, or Dark Mode if your store uses a dark theme.




ATC Buttons


Customize the Add to cart button area, including color, layout, and more.




Colors


Customize the colors of different elements to match your brand.


Updated on: 11/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!