Enhancing Your Store App with Custom Tools in Shopper App

SHOPLINE now supports enhanced customization for your store app, giving you greater control over the appearance and functionality of your app pages. By creating custom components and web pages, you can tailor your store app experience to better reflect your brand and meet your business needs.

This guide will walk you through the supported page types, configuration methods, and how to add custom components using the theme editor.

Supported Customization Methods and Applicable Pages

To meet various display needs across different scenarios, SHOPLINE offers two flexible page customization tools: Custom Components and Custom Pages. Each serves a different purpose, and they can be used together to achieve a more complete app experience.

Custom Components

Custom components allow you to insert customized content blocks into specific pages. When creating a component, you must specify a target page. You can later add the component to other supported pages via the code editor or theme editor. Supported pages include:

• Home page
• Product details page
• Shopping bag
• Quick add panel
• Custom page

Custom Web Pages

Custom web pages are used to create standalone pages, such as promotional landing pages or brand story pages. Once published, the content goes live immediately without requiring additional configuration in the theme editor.

To display a link or button to the custom page on another page, you can embed the entry using a Custom Component, allowing smooth navigation and content integration across different parts of your store. Alternatively, you can configure it as a redirect page using Deep Links.

Creating Custom Components and Web Pages

You can manage all your custom components and web pages directly in the SHOPLINE admin panel. The creation and editing processes are centralized in a single interface to ensure consistency and efficiency.

To access the customization settings, go to Shopper App > App Settings > Custom development in your SHOPLINE admin. On this page, you’ll see two tabs: Custom blocks and Custom web pages, each corresponding to a different customization feature.

Creating a Custom Component

1. In the Custom blocks tab, click Create a custom block in the upper-right corner.
   
2. In the Settings panel on the right, fill in the following details:

• • Block name: Name the component for easy identification and future management.
  • Block description (optional): Provide a brief description if needed.
  • Assigned page: Select the pages where you want the custom component to appear.
    

    Note: You must assign the component to at least one page to save or publish it. You can return to the code editor later to assign additional pages or add the component using the theme editor.

• • Block preview image: Upload an image that will serve as the component preview. 

3. In the code editor, write your custom code using HTML, CSS, or JavaScript.
   
4. In the right panel, switch to the Preview tab to see how the component will appear on the storefront.
   
5. Click Save to save the component for further editing. If you insert the component into a page at this stage, it will display an In dev. label. Once the development is complete, click Publish to make the component live and display it properly on the page.
   

After creating a custom component, refer to the next section of this article to learn how to add it using the Theme Editor.

Creating a Custom Web Page

1. In the Custom web pages tab, click Create a custom web page in the upper-right corner.
   
2. In the Settings panel on the right, enter the page name and optionally add a description.
   
3. In the code editor, write your custom code using HTML, CSS, or JavaScript.
   
4. In the right panel, switch to the Preview tab to see how the page will appear on the storefront.
   
5. Click Save to store the page for future editing, or click Publish to make it live.
   

Adding Custom Components in the Theme Editor

Once you’ve created and published a custom component, you can add it to the supported pages on your store’s frontend using the theme editor.

1. From your SHOPLINE admin panel, go to Shopper App > App Design and click Design to open the theme editor.
   
2. In the theme editor, navigate to the page where you want to insert the custom component. (In this example, we’ll use the Home page.)
   
3. In the left-side panel, click + Add component, switch to the Custom tab, and select the custom component you want to add. Alternatively, click + Create a custom block to go to the code editor and create a new custom component.
   
4. Adjust the position of the component by dragging it within the page layout as needed.
   
5. Click Save to save your changes for further editing, or click Publish > Publish to live App to make the changes live immediately.
   

Tips and Best Practices 

To ensure your custom components and web pages deliver the best possible experience, keep the following tips in mind: 

Maintain design consistency and brand alignment 

Use fonts, colors, and spacing that align with your store’s overall branding. A cohesive design builds trust and provides a smoother browsing experience for shoppers. 

Optimize layouts for mobile devices 

Ensure your custom components are fully responsive and display properly across different screen sizes, providing a smooth and user-friendly in-app experience.

Keep performance in mind 

Avoid excessive use of heavy scripts or large images, which can slow down page load times. Efficient, clean code not only improves performance but also enhances SEO and overall user experience.