Configuring Custom Page Covers in OS 3.0 Themes – SHOPLINE Help Center

To enhance the visual appeal of your store's search results and maintain brand consistency, SHOPLINE now supports Custom page cover for custom pages. By setting a unique cover image for your custom pages, you can ensure they stand out in predictive search and on the search result page, leading to higher customer engagement.

This article guides you through setting up featured images in the admin panel and displaying them on your storefront.

Custom Page Cover Features

Featured images offer a flexible way to manage the visual representation of your Custom pages across different storefront sections. Utilizing this feature ensures your custom content is professionally displayed in both search and page layouts.

Enhanced Search Experience: When customers search for keywords related to a Custom page, the Custom page cover will appear in the predictive search dropdown and the main search results.
Visual Consistency: Instead of a text-only link, customers receive a visual cue, making your custom content (e.g., Lookbooks, About Us, or Promotion pages) align with your brand's aesthetic.
SEO & Accessibility: Includes dedicated fields for ALT text to help search engines understand your image content and improve your store's overall SEO ranking.

Note: For more information on optimizing your images for search engines, please refer to "Adding an ALT Attribute to Images in the File Library".

Setting Up Custom Page Cover Features

Configuring a Custom page cover starts in the page management section of your SHOPLINE admin. This image serves as the "source" for search results and OS 3.0 theme blocks.

Method 1: From the Page Settings

This method sets a global cover that acts as the primary "source" for search results and all theme blocks.

From your SHOPLINE admin panel, go to Online store > Pages. Click the Create a page button to start a new page, or click the title of an existing Custom page you wish to edit.
In the right-hand sidebar, locate the Custom page cover area.
Click to upload an image from your device or select one from your File library.
- After selecting an image, you can click the Eye icon to preview how the cover will appear.
Once uploaded, you can manage the image by hovering over it:
- Change: Swap the current image for a different one.
- Delete: Remove the image from the page (a confirmation prompt will appear).
- ALT: Go to the File library to edit the image's alternative text for SEO and accessibility.
  
  Note: For detailed steps, please refer to "Adding an ALT Attribute to Images in the File Library".

Method 2: From the OS 3.0 Theme Editor

This method allows you to upload or override covers while designing your store layout, with the flexibility to set different images for desktop and mobile.

Go to Online Store > Design > My theme. Select a compatible OS 3.0 theme (e.g., Fashion) and click Design to enter the editor.
In the theme editor, navigate to any page where you want to display the content (e.g., the Home page). In the left-hand sidebar, click + Add component and select Custom page section.
Under the Custom page section, click the Cover image block. In the settings panel on the right, you can upload or select images for:
- Desktop cover: The image displayed on larger screens.
- Mobile cover: A specific image optimized for vertical mobile screens.
  
  Note: Uploading a new image here will only affect the current section. It will not sync back to or overwrite the global image set in the Custom page settings.
Click Save to apply the changes.

Technical Specifications & Limitations

To ensure optimal performance and SEO indexing, please keep the following technical requirements and theme restrictions in mind.

Image Requirements:
- Supported Formats: JPG and PNG.
- File Size: Must be under 4MB.
- Recommended Dimensions: 1200px x 1600px.
Theme Availability: This feature is supported by all official SHOPLINE OS 3.0 themes, except for the Bottle theme.
Data Persistence & Display Logic:
- Global Data Sharing: The cover image set in the Custom page settings is stored within the page's core data. This means the image will automatically sync and remain available even if you switch between different OS 3.0 themes.
- Section-Specific Overrides: If you upload a specific cover image directly within the Theme editor section, this image is tied to that specific theme's configuration. If you switch themes, you will need to re-select or re-upload the image for that section in the new theme.
Developer Customization: For other OS 3.0 themes (e.g., Bottle) or custom themes, developers can manually display this image by accessing the featured_image Sline object. This object includes alt, src, height, and width attributes.
Search Indexing: Custom URLs for these pages are also indexed, meaning keywords found in the URL can trigger the display of the featured image in search results.