Product Feature in Mobile Editor

Product Feature allows you to add a product card to any page (except the Store page).

Click on the Product Feature and then click Edit to configure Product Settings:

View

  • Product Picker. Click the Select button to open the pop-up and select a product to display:

  • Image Aspect Ratio. Choose the image aspect ratio for product cards from the drop-down:

  • Switches. Configure what data will be displayed on the product cards:
    • Product Badges. Turn on the Badges toggle to enable the On Sale, Sold Out, and Few Left badges for your Online Store.
    • Product Name.
    • SKU.
    • Price.
    • Excerpt (short description of the product).

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

The data is taken directly from your store.

Button Settings

Button settings include several options:

  • Toggle to Show/Hide Button. Turn on the toggle to show the Button on a product card. Turn off the toggle to disable the Button and remove it from the card:

  • Button Text. Specify the text that will appear on the Button:

  • Button Width. Turn on the toggle to stretch the Button for the entire available width of the card:

  • Button On-Click Action: Choose which action should be performed when you click on the Button.
  • Buy Now: Opens cart with product added.
  • Add to Cart: Adds a product to the cart.
  • Open Product Page: Opens product page with product details.

Please Note: Clicking on a product card (for example, on a photo) will open the product page.

Design

  • Background. Set the background color of the product card by clicking the Color square:

  • Border. Adjust the color and size of the border around the product card:


  • Hover Effects. 

Setting the effect when you hover the mouse over the product card, the following options are available:

  • Show Additional Image
  • Highlight Border
  • Highlight Background
  • Highlight Shadow
  • If the toggle is turned off, no effects are applied.