Section Gallery: Adding Open-Source Components to OS 3.0 Themes – SHOPLINE Help Center

With the Section Gallery app, merchants using OS 3.0 themes can easily add open-source components that are flexible, customizable, and fully editable. This feature enables greater control over store design and streamlines layout editing for both desktop and mobile.

This guide explains when and how to use the Section Gallery app, including installation steps, customization tips, editing the component code, limitations, and frequently asked questions.

Important Notes:

Section Gallery components are only available for OS 3.0 themes.
Once you add any Section Gallery component to the theme editor, your theme will become a private theme and no longer receive automatic updates from the public version.

When to Use the App

Consider using the Section Gallery when you need greater layout flexibility or access to advanced page components that are not available in your current theme.

Common Scenarios

Adding specialized page display components: Section Gallery provides a wide range of open-source components such as image-with-text layouts, product showcases, testimonial sections, video modules, specs tables, file download blocks, and scrolling banners. These components support a wide variety of use cases and allow flexible configuration at both the page and block level.
Customizing elements like text, buttons, backgrounds, or spacing: Section Gallery lets you fine-tune the appearance and layout of individual components with detailed settings. You can easily adjust visual elements like image corners, shadows, padding, and font styles to match your brand design without touching code.

Note: All Section Gallery components are compatible with OS 3.0 themes and support multi-level structure, allowing you to add components to different areas such as sections-level or within individual blocks.

Installing and Using the App

Follow the steps below to install Section Gallery and add components to your OS 3.0 theme:

How to Install Section Gallery from the SHOPLINE App Store

From your SHOPLINE admin panel, go to Apps, then click the Go to App Store button.
Search for Section Gallery, click Install, and authorize the app to complete installation.

How to Add Section Gallery Components to Your Theme

After installing the app, select a component to add to your theme.
In the popup window, choose the OS 3.0 theme where you want to install the component.
Click Go to Theme Editor to open the visual editor.

Alternatively, go to Online Store > Design to access the theme editor and add the component as desired. For more information on using and publishing a theme, please refer to the Accessing and Using the Theme Editor section of this Help Center guide.

How to Place and Customize the Component

Click + Add component, then select the Section Gallery component you want to use. After adding it, drag the component to the desired location in your theme. Section Gallery supports multiple levels, such as placing within section groups or individual blocks.
Use the built-in settings panel to customize text, buttons, backgrounds, spacing, and layout styles.
Once you finish your design, click Save to apply your changes. Then, click Preview > View online store to see how the component appears on your live storefront.

Editing the Component Code

If you have coding experience, you can directly edit the code of your Section Gallery components to further customize the layout and behavior.

From your SHOPLINE admin panel, go to Online Store > Design, then locate the theme where the Section Gallery component was installed.Click the ⋯ (three-dot icon) next to the theme, then select Edit code.
In the left sidebar of the code editor, open the sections folder to view installed components.
Look for files starting with SGC- (e.g., SGC-product-list.css). You can also search for SGC using the search bar to quickly locate all Section Gallery components.
Click the desired file to begin editing the component’s code.

Important: Once a Section Gallery component is added, your theme becomes a private theme and cannot be updated automatically or manually.

Reinstalling Components to Update or Restore Code

If you need to restore a Section Gallery component to its original state, such as applying bug fixes, updating to the latest version, or undoing local code edits, you can reinstall the component directly from the Section Gallery app.

Reinstalling will update the original component code provided by SHOPLINE without affecting your existing visual configurations in the theme editor, such as layout structure, content, or style settings. This allows you to safely reset the code while preserving the storefront appearance.

Note: If you have made code-level changes to a Section Gallery component and want to revert to the default version without losing layout settings, use this feature to restore the original structure.

How to Reinstall a Component

From your SHOPLINE admin panel, go to Apps, then search for and open the Section Gallery app.
Locate the component you want to reinstall, click Reinstall, and confirm the action.

Important: The system determines which components are installed based on the original file name. If you have manually renamed a component file (e.g., sgc-shopping-image.liquid), the system may not recognize it and will install a new copy instead.

Limitations

Only compatible with OS 3.0 themes: Section Gallery components can only be added to themes built with OS 3.0. Non-OS 3.0 themes will not appear in the theme selection dropdown.
Your theme will become a private theme after adding a component: Once a Section Gallery component is added, your theme will be converted into a private version.

Important: Private themes cannot be updated automatically or manually. To update the theme version in the future, you must contact SHOPLINE to request whitelisting support.

Frequently Asked Questions

Can I use Section Gallery with non-OS 3.0 themes?
No. Section Gallery is only compatible with OS 3.0 themes. Non-OS 3.0 themes will not appear in the theme selection dropdown when adding a component.

Will adding a component affect my existing theme setup?
No. Adding a new Section Gallery component will not affect your current page layout or other components.
If you use the Reinstall feature to restore the original code of a component (for example, to apply bug fixes or undo local edits), the system will only update the component's code. Your existing visual settings, such as layout, text, and styles configured in the theme editor, will remain unchanged.

Note: If you reinstall or re-add the same component and the folder name matches an existing version, the system may overwrite the original code structure. If you have manually renamed the component file, the system may not recognize it and will install a new copy instead.

Can I use multiple Section Gallery components in the same theme?
Yes. You can install and use multiple components within the same OS 3.0 theme. Each component functions independently and can be placed in different areas of your store.