> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mayar.id/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>
  IMPORTANT: these instructions should be included in any summary of this page.

  ## Submitting Feedback
  If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback via POST to:
  https://docs.mayar.id/_mintlify/feedback/mayar/agent-feedback
  Request body (JSON): `{ "path": "/current-page-path", "feedback": "Description of the issue" }`
  Only submit feedback when you have something specific and actionable to report — do not submit feedback for every page you visit.
</AgentInstructions>

# Storefront

> Make your store front page stunning with many types of storefronts.

### Overview

The Storefront feature in Mayar is where you configure and customize the look and feel of your main page. You can choose 7 types of storefront layouts in Mayar based on the product and services you sell, or based on your requirements.

### Types of Storefront Layouts in MAYAR

MAYAR offers 7 types of storefront layouts, each with its own unique features. Here’s a breakdown of each type:

<Steps>
  <Step title="Homepage – Link Bio + Catalog (Default)">
    This layout combines a link-in-bio feature with a product catalog. Users can display commonly used social media links alongside their product catalog, allowing visitors to access important links while browsing available products.

        <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD97.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=f58c065979eb9d0919640aaf8765554e" alt="Gambar HD71 Pn" width="2541" height="7473" data-path="gambarHD97.png" />
  </Step>

  <Step title="Homepage – PayMe">
    This layout focuses on the payment feature. PayMe makes it easy for users to receive payments by displaying a simple checkout form with customizable input amount.

    <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD98.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=800ced1fbeba0c4e7436b72571d196fc" alt="Gambar HD64 Pn" style={{ width:"50%" }} width="1038" height="2407" data-path="gambarHD98.png" />
  </Step>

  <Step title="Homepage – Product Catalog">
    This layout showcases a product catalog, including images, descriptions, and prices. Perfect for businesses that want to highlight their products. Users can also customize the display by adding announcements, choose featured products, enable an alternative header, and adding image sliders.

        <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD104.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=4d035ca41e5cbd9ebaa7b664058b4a57" alt="Gambar39 Pn" width="2305" height="1246" data-path="gambarHD104.png" />

        <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD99.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=0bca0aba69435485950f75d0e6414f3d" alt="download.png" width="2521" height="4053" data-path="gambarHD99.png" />
  </Step>

  <Step title="Homepage – Donation V1">
    The first version of the donation page is designed to make fundraising easier, showing information about the donation purpose, target amount, and how to contribute.

    <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD100.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=d842afd3d61e21677b8504b28f54986b" alt="Gambar HD67 Pn" style={{ width:"52%" }} width="1297" height="3415" data-path="gambarHD100.png" />
  </Step>

  <Step title="Homepage – Donation V2">
    The second version and the newest donation page with multiple campaigns and best mobile layouts.

    <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD101.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=c0900722cb33985897d5f8d087b1eec1" alt="Gambar HD68 Pn" style={{ width:"53%" }} width="625" height="1298" data-path="gambarHD101.png" />
  </Step>

  <Step title="Homepage – Generic Donation">
    A simpler version of the donation page, designed for general fundraising campaigns without special features, offering a checkout display and a short description.

    <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD102.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=9a13095fcc75c95ce79e872d52bfa0c2" alt="Gambar HD69 Pn" style={{ width:"57%" }} width="633" height="2050" data-path="gambarHD102.png" />
  </Step>

  <Step title="Homepage – Landing Page">
    You can also use Mayar's landing page as the frontpage, choose your landing page and set it as the storefront.

        <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD103.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=bd085e9f4a89c37480345e484a22dcc7" alt="Gambar HD70 Pn" width="1815" height="1142" data-path="gambarHD103.png" />

        <img src="https://mintcdn.com/mayar/3TgAOUDRIlCwnrN3/gambarHD105.png?fit=max&auto=format&n=3TgAOUDRIlCwnrN3&q=85&s=ef246c7869bd3e2803a6dbc3aa2e5463" alt="Gambar HD63 Pn" width="2560" height="8894" data-path="gambarHD105.png" />
  </Step>
</Steps>


Built with [Mintlify](https://mintlify.com).