Opulent - OS2.0
  • What is Opulent theme?
  • Support Policy
  • Getting Started
    • Install Opulent Theme
  • Add Custom code/CSS correctly
  • Integrate Shopify Review apps
  • Mega Menu
  • Update Opulent theme
  • GLOBAL SECTION
    • Announcement Bar
  • Age verifier pop-up
  • Header
  • Footer
  • Mobile sticky bar
  • Scaling logo
  • THEME SECTIONS
    • Before/ After image slider
  • Blog Posts
  • Countdown timer
  • Custom content
  • THEME SETTINGS
    • General settings
  • Advanced
  • Animations
  • Badges
  • Article Card
  • Cart settings
  • Checkout
  • Color & Color schemes
  • Currency format
  • Drawer & pop-up
  • GDPR settings
  • Integrated apps
  • Integration
  • Product card
  • Product inventory
  • Product options desgin
  • Production option swatches
  • Social sharing
  • Search
  • Section
  • Typography
  • COLLECTIONS & PRODUCTS
    • Product page
      • Custom product templates
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommendations
  • Product description
  • Collection page
    • Collection template
    • Collection sections
  • OTHER PAGES
    • 404 page
    • Blogs
    • Cart & Checkout
    • Password
  • ❓FAQs
    • Add a gift wrap option to my cart
    • Add custom badges to my product card
    • Add recipient fields to my gift card product
    • Add/ Remove Social icons in footer
    • Customize search results
    • Hide sections on mobile/ desktop view
    • Install demos
    • Remove the tax-included information in product page
    • Set up Filters for the collection pages
    • Set up local pickup
    • Why did I check the show account icon option but don’t see it appear?
Powered by GitBook
On this page
  • How to enable page transistions
  • How to set up the page animation

Animations

A guide to add animations your page

PreviousAdvancedNextBadges

Last updated 11 months ago

Settings for Animations are available on Opulent theme ✨

How to enable page transistions

Steps:

  1. In the theme editor (Customize), click Theme settings.

  2. Navigate to the Animations section.

  3. Click the checkbox Enable page transition.

  4. Click Save.

The page transition feature exhibits a loading spinner during the page loading process, thus enriching the user experience and captivating web visitors' interest.

You have the option to configure the size and color of the loading spinner icon for the page transition.

You can also upload your own Custom logo for the page-loading effect.

Square-sized images are recommended.

How to set up the page animation

Steps:

  1. In the theme editor (Customize), click Theme settings.

  2. Navigate to the Visible in the view section.

  3. Select your Animation type and adjust the animation duration.

  4. Click Save.

When readers navigate up and down the site, the animation, if activated, activates as soon as the element enters the viewport. Incorporating a touch of animation during the loading process can inject some excitement, captivate users, and draw their attention.