Skip to content
Pepinby SHIN

Guide

YOYAKU — Setup Guide

Start accepting bookings in four simple steps.
Follow the screenshots from initial setup through advanced features.

⏱ Estimated setup time: about 10 minutes

Basic Setup

Basic setup

1

Load your store location

YOYAKU Home screen with the Load locations button highlighted in red

Import your existing Shopify store location into the app without entering it again.

  1. Click “Home” in the left menu.
  2. Click “Load locations” in the top-right corner, highlighted in red above.
  3. The import is complete when your store name appears.

Your store must already be listed under Settings → Locations in Shopify admin.

How to confirm

Setup is complete when the store name (location name) appears on the Home screen.

2

Add staff and rooms

Staff & rooms screen showing registered resources and booking rules

Add the staff, rooms, or spaces that customers can book.

  1. Click “Staff & rooms” in the left menu.
  2. Click “+ Add new.”
  3. Enter a name and choose a type: staff, room, or equipment.
  4. After adding the resource, use “Set schedule” to configure available dates and times.

⚠ Important

Availability will not appear in the booking calendar until a schedule is set. Always configure the schedule after adding a staff member.

💡 Use a customer-friendly name, such as “Alex,” “Meeting Room A,” or “Studio 1.”

💡 If one staff member works at several locations, switch locations and set a schedule for each one.

How to confirm

Setup is complete when the resource appears under “Staff & rooms” with its schedule configured.

3

Set booking menus and policies

Add booking menu screen with duration, buffer time, and cancellation deadline settings

Configure the services each staff member offers and customize the booking rules.

⚠ Important

The booking calendar will not appear on a Shopify product page until its booking menu is assigned to a resource. Make sure the menu and resource are connected.

Booking menu

On each staff details screen, choose “Add menu” and connect a Shopify product. You can configure the menu name, duration, buffer time, and cancellation deadline separately.

Booking rules (shared settings)

  • Time-slot interval: for example, every 15 or 30 minutes
  • Buffer time: extra time between bookings
  • Cancellation deadline: how far in advance customers can cancel
  • Lead time: the minimum time before a customer can make a booking

📍 Location: “Staff & rooms” in the side menu

How to confirm

Setup is complete when the menu appears on the selected resource details screen under “Staff & rooms.”

4

Add the booking calendar to your store

Adding the Booking Calendar block in the Shopify theme editor

Add the booking calendar to a product page from the Shopify theme editor.

  1. In Shopify admin, open Online Store → Themes.
  2. Click “Customize.”
  3. Product page (product template)Open this template. The block cannot be installed on home or collection pages.
  4. Under “Add block,” choose “Booking Calendar.”
  5. Click “Save” to finish.

⚠ The calendar does not appear in the editor preview

The booking calendar is intentionally hidden in the theme editor preview. Save your changes, then use “View store” or open the publishedproduct pageto verify it.

Storefront booking calendar showing date and staff selection

This is how the calendar appears after installation. Customers can choose a date, time, and staff member.

How to confirm

Setup is complete when the booking calendar appears on the storefront preview or live page.

✓

Setup complete!

Your basic setup is now complete.
When a customer books through the calendar, the booking appears in the admin booking list in real time.

First, confirm the storefront display

  1. Click “View store” in the top-right corner of Shopify admin.
  2. Open theproduct pagewhere you want to accept bookings.
  3. Confirm that the booking calendar appears.

If it does not appear, open “If the calendar does not appear.”

Next, make a test booking

Make a test booking from the product page and confirm that it appears in the admin booking list. This lets you experience the full customer flow.

Next, explore the features that help you get more from YOYAKU.

Troubleshooting

When the booking calendar does not appear

If setup is complete but the calendar is missing from the product page, work through these common causesin order. Start with A and continue downward. Most cases are resolved by one of checks A through D.

The booking calendar is intentionally hidden in the theme editor preview. It is designed to run on the live storefront your customers visit.

  1. Click “Save” in the theme editor.
  2. Click “View store” in the top-right corner.
  3. On the live storefront, open theproduct pagewhere you want to accept bookings.

The most common point of confusion

A blank preview does not mean installation failed. The calendar can be hidden in the editor and still appear correctly on the live storefront.

The booking calendar checks whether the product has an assigned resource. Without that connection, the calendar remains hidden even when the theme block is installed.

  1. Open “Staff & rooms” in the side menu.
  2. Open the details screen for the staff member or room.
  3. Choose the Shopify product under “Add menu.”
  4. Set the duration and other options, then save.

Review Step 3: Set booking menus and policies

The Booking Calendar block is registered by the theme app extension specifically for aproduct template. It cannot be added to the home page, collection pages, or standard pages.

How to check

In the theme editor page selector, choose a product page or product template before using “Add block.” The block does not appear as an option on other templates.

The booking calendar works through the product page Add to cart form (/cart/add). Without this form, the calendar cannot start.

⚠ Unsupported cases

  • Themes heavily customized to remove or hide the cart button
  • Products configured with cart functionality disabled

Shopify standard themes such as Dawn and Horizon work without extra changes. If you use a custom theme, confirm that the product page shows an Add to cart button.

If the calendar is still missing after checks A through D, use the browser developer tools for more detail.

  1. Open the product page where the booking calendar is missing.
  2. Right-click the page and choose “Inspect,” or press F12on Windows or Option + Command + I）
  3. In the panel, check the Console tab for red errors and the Network tab for failed requests.

If you cannot isolate the issue, include the product page URL, theme name, and a developer-tools screenshot when emailing support@pepin.studio . We will investigate and reply as soon as possible.

Advanced

Advanced features

Collect a deposit or prepayment

Prepayment plan screen configured to collect 20 percent

Collect part of the price at booking instead of the full amount. Deposits can help reduce no-shows.

How to configure it

  1. Open “Store & prepayment settings” in the side menu.
  2. Choose “+ Add new” to create a plan.
  3. Set a percentage, such as 20%, or a fixed amount, such as ¥3,000.
  4. Choose the products where the plan applies.

Example

For a ¥10,000 service with a 20% deposit: collect ¥2,000 at booking and ¥8,000 on the day.

Customer portal — Let customers manage their bookings

Customer portal showing the booking list and cancellation controls

The customer portal gives customers a dedicated place to review and cancel their bookings.

What customers can do

  • Review bookings with confirmed, processing, or canceled status
  • Cancel a booking before the cancellation deadline
  • Sign in with a Shopify customer account

Requirement

To use the customer portal, enable customer accounts under Settings → Customer accounts in Shopify admin.

Customer portal URL

https://your-store.myshopify.com/apps/booking/mypage

The portal becomes available automatically after a customer signs in, reducing booking-related support requests.

Frequently asked questions

Start with “If the calendar does not appear” and work through the five common causes in order, including the expected behavior in the theme editor preview.
Bookings appear after checkout is completed. A “Processing” status can mean the customer has not completed payment yet.
Open “Staff & rooms,” select the staff member, then choose “Set schedule.” Edit an individual date on the calendar or configure multiple dates in bulk.
The Pro plan supports multiple locations. Staff and schedules can be managed separately for each store.

Start using YOYAKU

Start with a 7-day free trial.
Install YOYAKU from the Shopify App Store.

Try 7 days free

Questions? Contact support@pepin.studio and we will be happy to help.