Advanced Component Library: Adding and Customizing Store Components

The Advanced Component Library offers a versatile collection of decorative components with rich styling options and powerful configuration capabilities. These components can be seamlessly integrated into any theme, enhancing the visual appeal of your store.

Use Cases and Key Features

When to Use the App 

Consider using the Advanced Component Library when:

• Needing a page display component that is not available in your current theme:
  Advanced Component Library offers over 30 advanced components, including image-text displays, videos, product showcases, tag displays, timelines, file downloads, blogs, and navigation modules. This variety covers most page display scenarios.
  
  
• Wanting to customize text, buttons, backgrounds, or spacing for individual components:
  You can fine-tune component functionality and style with detailed configuration options. The app allows for precise adjustments to layout and appearance, including effects such as rounded corners and shadows for images, buttons, and videos.

Feature Highlights 

• Comparison Image Display
  This component allows you to place two images side by side for visual comparison. It is suitable for displaying before-and-after effects, or highlighting differences between product variants. Common use cases include products with visible transformations, such as beauty items, cleaning products, or others where visual changes are relevant.

Upload the before-and-after images into the image fields. The component will display them side by side on your storefront, allowing customers to easily compare the visual differences.

• FAQ
  The FAQ component allows you to display a list of common questions and answers on your storefront. This helps customers quickly find information related to products, shipping, returns, or usage without needing to contact support.

• File Download
  The File Download component allows you to offer downloadable files on your storefront, such as product manuals, warranty information, or certificates. This is useful for products that require additional documentation or post-purchase support materials.
  
  
• Testimonials
  The Testimonials component allows you to showcase customer feedback on your storefront. You can display quotes, names, and other details from previous customers to share their experiences with your products or services. This component is useful for building credibility and helping potential buyers make informed decisions based on past customer satisfaction.
  
  After adding the Testimonials component and setting the details on the right panel, user reviews will be displayed on the storefront.

Installing and Using the App

To install the app, you can either search for Advanced Component Library in the SHOPLINE App Store or follow these steps to install it directly within your theme editor:

1. In your admin panel, go to Online Store > Design and click on the Design button to access the theme editor.
   
   
   
2. Click on Add component > Install advanced component library.
   
   
   
3. Once redirected to the installation page, click Install and authorize the app to complete the installation.
   

To use the installed app: 

1. Return to the theme editor and click Add component > Advanced component library.
   
   
   
2. Select a component category and choose a desired component within that category to add to your website.
   
   
   
3. Edit the component by configuring its functionality and styling elements such as text and buttons.
   
   
   

Frequently Asked Questions

1. Can I automatically sync settings in the Advanced Component Library with my theme's background and font colors?
   While automatic syncing is not currently supported, the component library allows for manual adjustments to font and color settings to match your theme. We recommend maintaining consistency to ensure a cohesive page appearance.
   
   
2. Can I add components to pages other than the homepage?
   Yes, you can. However, component placement depends on your theme. Some themes allow components on all pages except checkout, while others restrict them to specific pages. Refer to the "Theme Version Comparison Chart" for details.
   
   
3. What's the difference between padding and margin in layout settings?
   Padding refers to the space inside a component, between the component's content and its border, affecting its height and width. Margin, on the other hand, is the space outside the component, creating separation between it and other components. In some cases, negative margins can be used to make components overlap, allowing for custom design effects.