Ascent(English)
Contact usFAQsFree to install
English
English
  • Introduction
  • Support Policy
  • Refund Policy
  • Template Installation
  • FAQs
  • Global Settings
    • Layout
    • Colors
    • Typography
    • Breadcrumb
    • Animations
    • Section header
    • Product cards
    • Badges
    • Social media
    • Search behavior
    • Currency format
    • Cart settings
    • Favicon
    • Custom CSS
  • Header
    • Custom Mega Menu
    • Mobile Menu Obstruction by Third-Party Plugins
  • Side Drawer
    • Search Drawer
    • Shopping Cart Drawer
  • Sections
    • Seamless scroll
    • Announcement bar
    • Countdown
    • Collection thumbnails
    • Narrow banner image
    • Image banner
    • Video banner
    • Slideshow
    • Image with text
    • Image-text list
    • Rich text
    • Newsletter
    • Text with icons
    • Logo list
    • Contact form
    • FAQs
    • Multicolumn
    • Image comparison banner
    • Image hotspots banner
    • Map
    • Featured collection
    • Featured product
    • Collection list
    • Custom liquid
    • Composite display
    • Confetti trigger
    • Custom section header
    • Quote
    • Testimonials
    • Image gallery
    • Product compare table
    • Text lens zoom
    • Scroll image expand
    • Milestones
    • Team
    • Highlight features
    • Steps
    • Media wall
  • Popups
    • Event popup
    • Age verification popup
  • Footer
    • Custom Payment Icons
  • Tool bar
  • Pages
    • Product Collection Page
      • Create Subcategory
    • Main product
      • Gifts (Freebies)
      • Product Pre-order
      • Size Chart
      • Variant Images Group
      • Variant Samples
      • Complementary Products
      • Related Products
      • Sibling Products
      • In Box Products
      • Product A+ Page
      • Performance Indicator Bar
      • Delivery ETA
  • Others
    • Version Upgrade Notes
      • v2.2.1 (Current version)
      • v2.1.8
      • v2.1.7
Powered by GitBook
On this page
  • Feature Details
  • Usage Suggestions:
  • Further Learning:

Was this helpful?

  1. Global Settings

Custom CSS

This setting allows you to apply custom CSS styles to your entire online store, giving you finer control over the appearance and layout of the website.

Feature Details

  1. Scope of Impact:

    • Custom CSS will affect all pages of your website. Ensure the code is accurate and appropriate to prevent unintended changes or issues with other page elements.

  2. Add Custom Styles:

    • Enter your CSS code in the provided text box. The code will be added to the global stylesheet, affecting the styles of all pages. For example, you can customize the appearance of specific elements, such as changing button colors, adjusting font sizes, or adding rounded corners to borders.

    • Example code to make all elements with the .card class have rounded corners with a radius of 30 pixels:

      .card {
          border-radius: 30px;
      }

Usage Suggestions:

  1. Preview and Test: Before applying custom CSS to your live site, it's advisable to preview and test the code in a development or test environment. This ensures that the changes won't disrupt the page layout or negatively affect the user experience.

  2. Keep it Simple and Efficient: Write clean, efficient CSS code to avoid redundancy and conflicting styles. Keeping your CSS simple not only optimizes website performance but also makes it easier to maintain and update.

  3. Use Selectors Wisely: Apply specific CSS selectors to target only the elements you want to style. This prevents unintended changes to other elements across your site. For example, use class or ID selectors to limit the scope of your changes.

Further Learning:

  • If you're unfamiliar with CSS, consider learning some basic CSS concepts or exploring online resources for more information. You can click the “Learn More” link to access comprehensive guides on how to write and apply CSS effectively.

PreviousFaviconNextHeader

Last updated 2 months ago

Was this helpful?