9,509
edits
Changes
From SimplyBook.me
no edit summary
</div>
</div>
<br/>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Shopify| Shopify]]</span>
<div class="mw-collapsible-content">
If you use Shopify, and if you want to add the possibility of bookings to your website we have the right solution for you!
Our iFrame widget allows you to connect the Shopify website with SimplyBook.com and let your clients book right from the website both from their PC or from their mobile devices. This solution will make your booking process more convenient and easy.
;How to set
: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]]
<br><br>
:2. Select the section you would like to edit on the left or add a new one.
[[File:Shopify add section.png|border|center]]
<br><br>
:3. Choose to add <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom content.</span>
[[File:Shopify select custom content.png|border|center]]
<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>
[[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;">Bookings on Webpage or Facebook</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widget for your own website.</span>
[[File:Iframe widget setup path.png|border|center]]
<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:Get iframe code.png|border|center]]
<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
[[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>
</div>
<br>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Custom_Features#Zapier_Connector| Zapier]]</span>
<span class="qa">[[Custom_Features#Zapier_Connector| Zapier]]</span>
