Shopify/uk: Difference between revisions

Created page with "Наш віджет iFrame дозволяє підключити веб-сайт Shopify до SimplyBook.com і дати можливість вашим клієнтам бронювати послуги прямо з веб-сайту як з ПК, так і з мобільних пристроїв. Це рішення зробить процес бронювання більш зручним і простим."
Tags: Mobile edit Mobile web edit
 
Created page with ":1. Перейдіть до <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Інтернет-магазин»</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Теми»</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Налаштування»</span> у вашому <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">обліковому запис..."
Line 8: Line 8:
;Як встановити
;Як встановити


<div lang="en" dir="ltr" class="mw-content-ltr">
:1. Перейдіть до <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Інтернет-магазин»</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Теми»</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Налаштування»</span> у вашому <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">обліковому записі Shopify.</span>
:1. Please navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Online Store</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Themes</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Customize</span> in your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Shopify account.</span>
[[File:Shopify customize theme.png|border|center]]
[[File:Shopify customize theme.png|border|center]]
<br><br>
<br><br>
:2. Select the section you would like to edit on the left or add a new one.
:2. Виберіть розділ, який ви хочете редагувати, зліва або додайте новий.
[[File:Shopify add section.png|border|center]]
[[File:Shopify add section.png|border|center]]
<br><br>
<br><br>
:3. Choose to add <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom content.</span>
:3. Виберіть «Додати <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">власний вміст».</span>
[[File:Shopify select custom content.png|border|center]]
[[File:Shopify select custom content.png|border|center]]
<br><br>
<br><br>
:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add content</span> and select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom HTML</span>
:4. Натисніть <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Додати вміст»</span> і виберіть <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Налаштований HTML»</span>
[[File:Select html.png|border|center]]
[[File:Select html.png|border|center]]
<br><br>
<br><br>
:5. Navigate to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me account</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span>
:5. Перейдіть до свого <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">облікового запису SimplyBook.me</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджетів бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Віджет iFrame</span>
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
:6. Adjust the design to your taste and needs, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">get widget code.</span>
:6. Налаштуйте дизайн на свій смак і потреби, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">отримайте код віджета.</span>
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
<br><br>
:7. Copy the whole code from the popup and insert it to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">HTML</span> field on Shopify side. Adjust container width if necessary. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Save</span> the changes
:7. Скопіюйте весь код із спливаючого вікна та вставте його в поле <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">HTML</span> на стороні Shopify. За необхідності налаштуйте ширину контейнера. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Збережіть</span> зміни
[[File:Insert html to shopify side.png|border|center]]
[[File:Insert html to shopify side.png|border|center]]
<br><br>
<br><br>
:8. As the result you will see how the booking widget looks like right away.
:8. В результаті ви відразу побачите, як виглядає віджет бронювання.
[[File:Shopify widget result.png|border|center]]
[[File:Shopify widget result.png|border|center]]
<br><br><br><br>
<br><br><br><br>
</div>