How to style your product page
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 for another store, kindly click on Switch Store
In this page, the left side column is where you can choose to show/hide some features and restyle product page, while the right side column is where you can style color of label and button of product page
Disable Gallery & live preview: use original gallery from Shopify theme instead. The product image will not stay in place (sticky) when the customer scrolls down.
Load gallery immediately: use to load gallery on every load. If disabled, Teeinblue's gallery with live preview only show up when customers start personalizing
Show only one Mockup image: always show one mockup image, even when you have more than one mockup images.
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
Choose to hide compared price or saving amount.
Hide option if there's only one value: Works for Color and Size if there's only one option to choose.
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.
Hide Preview button: When enabled, the Preview Button will be hidden.
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.
Hide Quantity input:
Show "Confirmation box": customers are required to check the box in order to add to cart.
Hide "Buy now" button: The Buy Now button will be hidden.
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.
Hide gallery navigation button on mobile: Customers can swipe to change image.
Disable sticky buttons: Customers will need to scroll to the bottom of the personalization form to see the Preview & Add to cart button.
Hide product description by app: Hide the product description taken from product base. You can use the description section of your theme instead.
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.
Styling color of label and button of product page with color hex picker.
In this page, the left side column is where you can choose to show/hide some features and restyle product page, while the right side column is where you can style color of label and button of product page
Show/hide features
Gallery & Mockup:
Disable Gallery & live preview: use original gallery from Shopify theme instead. The product image will not stay in place (sticky) when the customer scrolls down.
Load gallery immediately: use to load gallery on every load. If disabled, Teeinblue's gallery with live preview only show up when customers start personalizing
Show only one Mockup image: always show one mockup image, even when you have more than one mockup images.
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:
Choose to hide compared price or saving amount.
Variant options:
Hide option if there's only one value: Works for Color and Size if there's only one option to choose.
Personalization Form:
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.
Preview button:
Hide Preview button: When enabled, the Preview Button will be hidden.
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.
ATC button:
Hide Quantity input:
Show "Confirmation box": customers are required to check the box in order to add to cart.
Hide "Buy now" button: The Buy Now button will be hidden.
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.
Hide gallery navigation button on mobile: Customers can swipe to change image.
Disable sticky buttons: Customers will need to scroll to the bottom of the personalization form to see the Preview & Add to cart button.
Extras:
Hide product description by app: Hide the product description taken from product base. You can use the description section of your theme instead.
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.
Color:
Styling color of label and button of product page with color hex picker.
Updated on: 15/08/2024
Thank you!