Shopify/uk: Difference between revisions

From SimplyBook.me
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;">обліковому запис..."
FuzzyBot (talk | contribs)
Updating to match new version of source page
Line 4: Line 4:


Наш віджет iFrame дозволяє підключити веб-сайт Shopify до SimplyBook.com і дати можливість вашим клієнтам бронювати послуги прямо з веб-сайту як з ПК, так і з мобільних пристроїв. Це рішення зробить процес бронювання більш зручним і простим.
Наш віджет iFrame дозволяє підключити веб-сайт Shopify до SimplyBook.com і дати можливість вашим клієнтам бронювати послуги прямо з веб-сайту як з ПК, так і з мобільних пристроїв. Це рішення зробить процес бронювання більш зручним і простим.


;Як встановити
;Як встановити


<div class="mw-translate-fuzzy">
: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. Перейдіть до <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>
[[File:Shopify customize theme.png|border|center]]
[[File:Shopify customize theme.png|border|center]]
Line 32: Line 32:
[[File:Shopify widget result.png|border|center]]
[[File:Shopify widget result.png|border|center]]
<br><br><br><br>
<br><br><br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
: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>
[[File:Select html.png|border|center]]
<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>
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<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>
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
: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
[[File:Insert html to shopify side.png|border|center]]
<br><br>
:8. As the result you will see how the booking widget looks like right away.
[[File:Shopify widget result.png|border|center]]
<br><br><br><br>
</div>

Revision as of 08:04, 1 July 2025

Якщо ви користуєтеся Shopify і хочете додати можливість бронювання на свій веб-сайт, ми маємо для вас ідеальне рішення!


Наш віджет iFrame дозволяє підключити веб-сайт Shopify до SimplyBook.com і дати можливість вашим клієнтам бронювати послуги прямо з веб-сайту як з ПК, так і з мобільних пристроїв. Це рішення зробить процес бронювання більш зручним і простим.

Як встановити
1. Перейдіть до «Інтернет-магазин» -> «Теми» -> «Налаштування» у вашому обліковому записі Shopify.



2. Виберіть розділ, який ви хочете редагувати, зліва або додайте новий.



3. Виберіть «Додати власний вміст».



4. Натисніть «Додати вміст» і виберіть «Налаштований HTML»



5. Перейдіть до свого облікового запису SimplyBook.me -> Налаштування -> Налаштування віджетів бронювання -> Віджет iFrame



6. Налаштуйте дизайн на свій смак і потреби, отримайте код віджета.



7. Скопіюйте весь код із спливаючого вікна та вставте його в поле HTML на стороні Shopify. За необхідності налаштуйте ширину контейнера. Збережіть зміни



8. В результаті ви відразу побачите, як виглядає віджет бронювання.





4. Click on Add content and select Custom HTML



5. Navigate to your SimplyBook.me account -> Settings -> Booking widgets settings -> iFrame widget



6. Adjust the design to your taste and needs, get widget code.



7. Copy the whole code from the popup and insert it to HTML field on Shopify side. Adjust container width if necessary. Save the changes



8. As the result you will see how the booking widget looks like right away.