Skip to main content
All CollectionsWidgetsShopping Enhancers
How to Use the Page Transition Widget?
How to Use the Page Transition Widget?

A guide on how to use the Page Transition widget.

Diane Eunice Narciso avatar
Written by Diane Eunice Narciso
Updated over a week ago

What is a Page Transition Widget?

The Page Transition Widget is a powerful tool that allows you to add dynamic page transitions to your website. These transitions can enhance the user experience and make your website more engaging and visually appealing.

Adding a preloader with your logo to your website can greatly improve the user experience. It gives users something to look at while the page is loading and reinforces your brand.

How Does the Page Transition Widget Work?

The Page Transition Widget works by animating the transition between pages on your website. This means that when a user clicks on a link to navigate to a different page, instead of the page simply loading, the transition widget will animate the change, creating a smooth and seamless transition between pages.

There are a variety of different transition effects that you can choose from, including fades, slides, and flips. You can also customize the duration and direction of the transition to fit the style of your website.

How to Enable/ Disable the Page Transition Widget?


Sign in to your Debutify Theme log-in portal at, and navigate to the add-ons section.


Choose your widget from the Add-ons menu, either by searching or filtering by category. Toggle the switch to enable or disable it.


When prompted to enable/disable a widget, click 'Enable' or 'Disable' to confirm your choice.

If the selected widget is not available in your current plan, you'll be prompted to upgrade. Click 'Upgrade' to proceed or 'Cancel' to continue without upgrading.

How to Manage Page Transition Settings?


Go to your Shopify Admin and select Online Store.


Select your Debutify Shopify theme and click on Customize.


Click on Theme Settings. Select Page Transition to open its settings.

You can add a free logo, insert an image from your device, or upload your SVG logo. To insert a free logo or an image from your device, tap Select Image. You can also adjust the logo width.


Add your desired image and hit Done.

Step 5

Click on Save to apply changes.

Did this answer your question?