• Topic 主题 トピック Topic Topic
  • Sign in

Advanced Component Library

Advanced Component Library is an app that provides a diverse range of decoration components with rich styles and powerful configuration capabilities. These components can be added to any theme, enhancing the display of your store.

This article will explore this app’s functionality and how to set it up, ending with a dedicated FAQ section. 


In This Article




Use Scenarios

  • When you prefer a page display component but can’t find the component in your current theme, you can install the advanced component library.
  • When you want to set personalized text, buttons, backgrounds, and spacing for some components separately, you can add and use the advanced components.

Core Highlights

  • Rich variety: The advanced component library offers a wide range of component types, including the image-text display, video, product showcase, tag display, timeline, file downloads, blogs, and navigation, covering the majority of page display scenarios.
  • Abundant choices: The advanced component library provides a total of more than 30 advanced components.
  • Compatibility with all themes: The advanced component library is designed to be compatible with all themes.
  • Powerful configuration options: you can customize the functionality and style of components in great detail. You can adjust the layout and style down to the element level, providing a high level of detail. You can also apply advanced settings such as rounded corners and shadows to elements like images, buttons, and videos.



How to Use the Advanced Component Library

Here are the steps to start using this app.

  1. Go to the App Store, search for Advanced Component Library, and install it.
  2. You’ll be redirected to the SHOPLINE App Store page, where you can install the app.
    Screenshot 2024-06-14 at 10.23 1.png

  3. After the installation, go back to the theme editor and click Advanced component library.
  4. Select a component category, and then select a specific component under the category to add to your website.
  5. Edit the component. This involves editing functional configuration options as well as styling elements such as text and buttons.




Q: If I adjust the background and font colors in the theme, can the components in the advanced component library automatically follow the theme settings?

A: No, we currently don’t support automatic syncing with theme settings. However, the component library itself allows for font and color settings that can be consistent with any theme settings. We recommended maintaining consistency with the theme style to ensure overall page coherence.


Q: Can components from the component library be added to pages other than the homepage?

A: Yes, they can be added to other pages based on the theme itself, rather than the component library. For example, in the OS2.0 theme, components can be added to all pages except the checkout page. In the 1.0 Pro theme, components can be added to the homepage, list page, product detail page, blog page, blog collection page, and custom pages. However, in the 1.0 theme, components can only be added to the homepage.


Q: What is the difference between padding and margin in the layout settings?

A: Padding can be understood as the space within the component itself (the height of the top and bottom of the component). Margin refers to the space between components. In some scenarios, a negative margin can be set, allowing two components to overlap each other and achieving a personalized splicing design.

Have more questions? Submit a request