Online Store Page Settings Management

To access Online Store Page Settings:

  • In the Site Editor, hover over the left sidebar and click Pages:

  • Find Store, and click the Settings icon on the right:

  • Manage Page, SEO, Layout, View and Design tabs.

Connect/Disconnect Store

  • Use the toggle at the top of the Store page settings to connect/disconnect Online Store:

Please Note: Upon disconnecting, the Store page will be hidden from the Navigation Menu and will be inaccessible on the live site. All product/catalog widgets will also be removed from the pages.

Page Tab

Page Settings allow you to configure basic information about your store page, including:

  • Page Name: The internal name of the page.
  • URL: The page's address.
  • Hide Page: Click the Hide Page button to remove the page from the navigation menu. Hidden pages can still be accessed through links and appear in the Hidden section at the bottom of the Pages panel. You can also hide a page in the Menu section of the Pages panel if at least one other page is hidden.
  • Unhide Page: Click the Unhide Page button to show the page in the navigation menu. You can also drag and drop the page to any location within the Menu section.

SEO Tab

SEO Settings allow you to optimize your store page for search engines. You can manage:

  • Title: The title will be displayed in the browser tab.
  • Description: A summary of the page's content.
  • Social Share Image: Set an image that will appear on a thumbnail when the page is shared on social media platforms.
  • Show Page in Search Results: Control whether the page is visible on the website and in search engines.

Layout Tab

Layout Settings determine the overall appearance of your store page. You can choose from different layout formats and customize their appearance.

  • Layout Format Options: Choose between Grid, List, and Masonry.
  • Total Rows: Set the number of rows displayed on the page.
  • Products Per Row: Specify the number of products in each row (Grid layout only).
  • Margin: Set the margin around the product catalog.
  • Product Spacing: Adjust the spacing between product cards.
  • Compact: Change the card appearance for a more compact look (List layout only).
  • Divider: Add or modify a divider between product cards (List layout only).
  • Categories: Enable a dropdown menu to filter products by category.
  • Sort: Enable a dropdown menu to sort products by various criteria (newest, oldest, price, featured, name).

View Tab

View Settings control the appearance of individual product cards. You can customize which information is displayed and the card's visual style.

  • Image Aspect Ratio: Set the image aspect ratio (not available for Masonry layout).
  • Switches: Determine which product information is displayed on the card (Badges, Product Name, SKU, Price, Excerpt).

Badges. The toggle enables the On Sale, Sold Out, and Few Left badges for your Online Store.

Please Note: The Few Left badge automatically shows when less than ten items are in stock.

  • Button Settings: Turn on the toggle to display the button and configure its appearance and behavior (Text, Width, On-Click action).

Design Tab

Design Settings allow you to customize the color scheme and visual style of your store page. You can manage:

  • Catalog Background: Set the background color of the product catalog.
  • Catalog Border: Adjust the color and size of the catalog border.
  • Card Background: Set the background color of product cards.
  • Card Border: Adjust the color and size of the card border.
  • Hover Effects: Configure visual effects when hovering over product cards (Show Additional Images, Highlight Border, Highlight Background, Highlight Shadow).

Please Note: No effects are applied if the toggle is turned off.