1. Open the Magento Admin -> Stores -> All stores and create a new store view for the store

Name: The language of the store view (For example "Hebrew")

Code: The name of the store + "Kiosk" + the language (For example "BeerShevaKioskHebrew") 

Status: Enabled


2. Open the Store -> Configuration -> Porto 3.2.5 -> Porto panel settings, Select the storeview you created for the kiosk, and Change the following settings:

Maximum Page Width: Full Width

Load Original Bootstrap: Yes

Load Original animate.css: Yes

Disable Lazyload for Product Images: Yes

Static Block ID: kiosk-header

Newsletter Block Title: empty*

Newsletter Block Text: empty*

Show Footer Top: No

Show Footer Middle: No

Show Footer Middle 2nd Row: No    

Show Footer Bottom: Yes

Copyright Text : empty*

Static Block Id(before copyright text):kiosk-footer

Show Alternative Product Image: No

Show Rating Stars: No

Show Action Links: No

Custom Block Id for Sidebar: empty*

Static Block Id for Sidebar Custom Block: empty*

Previous Link Text: empty* 

Next Link Text: empty* 

Show Prev/Next Product Links: No

Custom Social Icons: empty* 

Newsletter Popup - Enabled: Disable

Newsletter - Logo Image: Without

Show Google Map: No

Custom Style 1:

body { 
background-image:url(../../../media/wysiwyg/Babylon/Kiosk/main_kioks_bg.png);
align-items: center; 
width:100%; 
height:100%; 
background-position: center; /* Center the image */ 
background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ }

.page-header
{
background-color: transparent !important;
}

.logo, .panel.wrapper,
.page-header .nav-sections,
.header.panel > .header.links,
.page-header .block-search,
.nav-toggle,
.page-header .minicart-wrapper,
.page-wrapper > .breadcrumbs {
    display: none !important;
}
.custom-block { 
 position: static  !important;
height:auto  !important;
 width:100%  !important;
}

.modal-inner-wrap
{
background-color: transparent !important;
}

.fotorama__stage,
.product-image-container
{
  background-color: transparent;
}

.fotorama__stage__shaft,
.product-item-photo
{
border: none;
}

.product-item-details
{
    display: none;

}

.price
{
  color: white !important;
}

.modal-inner-wrap,
.fotorama__stage__shaft
{
background-color: transparent;
}

.product-item
{
 width: 300px !Important;
}

.product-info-main,
.product.media
{
    padding-top: 300px;
}
.kiosk-button.action-button.existing-card
{
    background-image: url(../../../media/wysiwyg/Babylon/Kiosk/Heb/existing_card.png) !important;
   background-size: cover;
    width: 160px !important;
    height: 120px !important;
    background-color: transparent;
    border: none;
  font-size: 0;
}
.kiosk-button.action-button.new-card
{
    background-image: url(../../../media/wysiwyg/Babylon/Kiosk/Heb/new_card.png) !important;
    background-size: cover;
    width: 160px !important;
    height: 120px !important;
    background-color: transparent;
    border: none;
  font-size: 0;
}

.fieldset
{
 width: 800px !important
}

.modal-popup.modal-kiosk-card-check._show
{
padding-top:800px;
}

.balance-wrapper
{
 background-color: rgba(17, 20, 34, 0.9);
 box-shadow: 0 0 36px rgb(255 0 231 / 75%);
}

.page-title,
.product-info-main
{
color:white  !important;
}


#pelecard-loader
{
    background-repeat: no-repeat;
    background-image: url(https://app.arcadespro.com/Static/Kiosk/swipe-credit-card.gif);
  background-size: 60%;
  background-position: center;
}

.modal-kiosk-card-check .image-placeholder
{
  background-image: none !important;
}

kiosk-card-check-popup-content
{
  width:400px !important;
  height: 1000px !important;
  background-color: rgba(17, 20, 34, 0.9) !important;
    box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}

.modal-kiosk-card-check .modal-inner-wrap
{
  width:400px !important;
  height: 1000px !important;
  background-color: rgba(17, 20, 34, 0.9) !important;
  background-image: url(https://app.arcadespro.com/Static/Kiosk/NFC_Card_Animation.gif) !important;
  background-repeat: no-repeat;
  background-size: cover;
    box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}

.modal-kiosk-card-check .modal-content
{
  background-color: transparent;
}


.catalog-product-view .loading-mask
{
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
       background-image: url(https://app.arcadespro.com/Static/Kiosk/please_wait_payment.gif);
  background-size: 600px 600px;
  background-position: center;
  background-color: rgba(17, 20, 34, 0.9) !important;
        box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}

.loading-mask
{
  display:none;
}

.cms-index-index #home-button-header
{
display:none;
}

.pelecard-payment-index #back-button-header
{
display:none;
}

.pelecard-payment-index #home-button-header
{
display:none;
}

.card-pickup
{
  height: 800px; 
  width: 100%;
  align:center;
  background-repeat: no-repeat;
        background-image: url(https://app.arcadespro.com/Static/Campaigns/Banners/card-pickup.gif);
  background-size: 354px 600px;
  background-position: center;
}

.balance-wrapper
{
  background-color: rgba(17, 20, 34, 0.9);
        box-shadow: 0 0 36px rgb(255 0 231 / 75%);
}

#error-panel
{
  background-color: rgba(17, 20, 34, 0.9) !important;
        box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
  padding:20px;
}

#error-panel .error-message
{
  color: white;
  font-size: 300%;
}

Empty* = The field should be empty without any text


3. Open Store -> Configuration -> General -> Web, Change the scope to the storeview of the kiosk, and Change the "CMS Home Page" to Babylon Kiosk Home page


4. Open the Content -> Configuration, Change the Theme of the kiosk storeview to "    ArcadesPro Babylon Park"



5. Open the Arcades:Pro -> Kiosk Management



6. Click on Add New Kiosk and set the following settings:

Client ID: 24

Location Admin Description: The kiosk location in the branch
Kiosk Number: The shop number of the pelecard pinpad (According the file - https://docs.google.com/spreadsheets/d/1-Qb23Uq7x3QbTfBbxGxVmiPY4Dl4fw49r5XpEZVCA1Y/edit#gid=0)

Store View: The storeview that you created

Dispenser Port: 3

Timer: 60


7. Open System -> Cache Management and Flush the Magento Cache


8. Open Magento Admin -> Store -> Configuration -> Sale -> Payment methods , Change the scope and set the following settings in pelecard payment method

Enabled: Yes
Terminal Number:
API User

API Password

Automatic Payment Selection: Yes

Postcode: The Postcode of the store (For taxes)