https://help.simplybook.me/index.php?action=history&feed=atom&title=Shopify%2Ffr 2026-04-29T07:24:48Z Revision history for this page on the wiki MediaWiki 1.43.0 https://help.simplybook.me/index.php?title=Shopify/fr&diff=34501&oldid=prev 2025-07-01T08:09:17Z

<p>Created page with &quot;:7. Copiez tout le code de la fenêtre contextuelle et insérez-le dans le champ &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; du côté Shopify. Ajustez la largeur du conteneur si nécessaire. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Enregistrez&lt;/span&gt; les modifications. <a href="/index.php?title=File:Insert_html_to_shopify_side.png" title="File:Insert html to shopify side.png">border|center</a> &lt;br&gt;&lt;br&gt; :8. Vous verrez immédiatement à quoi ressemble le widget de réserv...&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:09, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l25">Line 25:</td> <td colspan="2" class="diff-lineno">Line 25:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:7. <ins style="font-weight: bold; text-decoration: none;">Copiez tout le </ins>code <ins style="font-weight: bold; text-decoration: none;">de la fenêtre contextuelle et insérez-le dans le champ </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">du côté </ins>Shopify. <ins style="font-weight: bold; text-decoration: none;">Ajustez la largeur du conteneur si nécessaire</ins>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Enregistrez</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">les modifications.</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:7. <del style="font-weight: bold; text-decoration: none;">Copy the whole </del>code <del style="font-weight: bold; text-decoration: none;">from the popup and insert it to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">field on </del>Shopify <del style="font-weight: bold; text-decoration: none;">side</del>. <del style="font-weight: bold; text-decoration: none;">Adjust container width if necessary</del>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Save</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">the changes</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:8. <del style="font-weight: bold; text-decoration: none;">As the result you will see how the booking </del>widget <del style="font-weight: bold; text-decoration: none;">looks like right away</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:8. <ins style="font-weight: bold; text-decoration: none;">Vous verrez immédiatement à quoi ressemble le </ins>widget <ins style="font-weight: bold; text-decoration: none;">de réservation</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/fr&diff=34499&oldid=prev 2025-07-01T08:09:15Z

<p>Created page with &quot;:4. Cliquez sur &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Ajouter du contenu&lt;/span&gt; et sélectionnez &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML personnalisé&lt;/span&gt; <a href="/index.php?title=File:Select_html.png" title="File:Select html.png">border|center</a> &lt;br&gt;&lt;br&gt; :5. Accédez à votre &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;compte SimplyBook.me&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;...&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:09, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16">Line 16:</td> <td colspan="2" class="diff-lineno">Line 16:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:4. <ins style="font-weight: bold; text-decoration: none;">Cliquez sur </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Ajouter du contenu</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">et sélectionnez </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML <ins style="font-weight: bold; text-decoration: none;">personnalisé</ins>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:4. <del style="font-weight: bold; text-decoration: none;">Click on </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Add content</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">and select </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Custom </del>HTML&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:5. <del style="font-weight: bold; text-decoration: none;">Navigate to your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me <del style="font-weight: bold; text-decoration: none;">account</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Booking </del>widgets <del style="font-weight: bold; text-decoration: none;">settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame <del style="font-weight: bold; text-decoration: none;">widget</del>&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:5. <ins style="font-weight: bold; text-decoration: none;">Accédez à votre </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">compte </ins>SimplyBook.me&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Paramètres</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Paramètres des </ins>widgets <ins style="font-weight: bold; text-decoration: none;">de réservation</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Widget </ins>iFrame&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:6. <del style="font-weight: bold; text-decoration: none;">Adjust the </del>design <del style="font-weight: bold; text-decoration: none;">to your taste and needs</del>, &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">get </del>widget <del style="font-weight: bold; text-decoration: none;">code</del>.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:6. <ins style="font-weight: bold; text-decoration: none;">Ajustez le </ins>design <ins style="font-weight: bold; text-decoration: none;">à votre goût et à vos besoins</ins>, <ins style="font-weight: bold; text-decoration: none;">puis </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">obtenez le code du </ins>widget.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes</div></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/fr&diff=34497&oldid=prev 2025-07-01T08:09:14Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:09, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Line 7:</td> <td colspan="2" class="diff-lineno">Line 7:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div class="mw-translate-fuzzy"&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Veuillez vous rendre dans &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Boutique en ligne&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Thèmes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Personnaliser&lt;/span&gt; dans votre &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;compte Shopify.&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Veuillez vous rendre dans &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Boutique en ligne&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Thèmes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Personnaliser&lt;/span&gt; dans votre &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;compte Shopify.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17">Line 17:</td> <td colspan="2" class="diff-lineno">Line 16:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:4. Cliquez sur &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Ajouter du contenu&lt;/span&gt; et sélectionnez &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML personnalisé&lt;/span&gt;[[File:Select html.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Select html.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:5. Accédez à votre &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;compte SimplyBook.me&lt;/span&gt; -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Paramètres&lt;/span&gt; -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Paramètres des widgets de réservation&lt;/span&gt; -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Widget iFrame&lt;/span&gt;[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:6. Ajustez le design à votre goût et à vos besoins, puis &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;récupérez le code du widget.&lt;/span&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:7. Copiez l'intégralité du code de la fenêtre contextuelle et collez-le dans le champ &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; du côté Shopify. Ajustez la largeur du conteneur si nécessaire. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Enregistrez&lt;/span&gt; les modifications</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Insert html to shopify side.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:8. Vous verrez immédiatement à quoi ressemble le widget de réservation.</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Shopify widget result.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;</div></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/fr&diff=34184&oldid=prev 2025-07-01T08:04:40Z

<p>Updating to match new version of source page</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:04, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4">Line 4:</td> <td colspan="2" class="diff-lineno">Line 4:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Notre widget iFrame vous permet de connecter le site web Shopify à SimplyBook.com et de permettre à vos clients de réserver directement depuis le site web, aussi bien depuis leur PC que depuis leurs appareils mobiles. Cette solution rendra votre processus de réservation plus pratique et plus facile.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Notre widget iFrame vous permet de connecter le site web Shopify à SimplyBook.com et de permettre à vos clients de réserver directement depuis le site web, aussi bien depuis leur PC que depuis leurs appareils mobiles. Cette solution rendra votre processus de réservation plus pratique et plus facile.</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;div class="mw-translate-fuzzy"&gt;</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Veuillez vous rendre dans &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Boutique en ligne&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Thèmes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Personnaliser&lt;/span&gt; dans votre &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;compte Shopify.&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Veuillez vous rendre dans &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Boutique en ligne&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Thèmes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Personnaliser&lt;/span&gt; dans votre &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;compte Shopify.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l32">Line 32:</td> <td colspan="2" class="diff-lineno">Line 32:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:4. Click on &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Add content&lt;/span&gt; and select &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Custom HTML&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Select html.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:5. Navigate to your &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me account&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Settings&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Booking widgets settings&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:6. Adjust the design to your taste and needs, &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;get widget code.&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:7. Copy the whole code from the popup and insert it to &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Save&lt;/span&gt; the changes</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Insert html to shopify side.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:8. As the result you will see how the booking widget looks like right away.</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Shopify widget result.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</ins></div></td></tr> </table>

FuzzyBot https://help.simplybook.me/index.php?title=Shopify/fr&diff=33822&oldid=prev 2025-07-01T07:49:34Z

<p>Created page with &quot;;Comment définir&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:49, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Line 8:</td> <td colspan="2" class="diff-lineno">Line 8:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Comment définir</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:1. <ins style="font-weight: bold; text-decoration: none;">Veuillez vous rendre dans </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Boutique en ligne</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Thèmes</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Personnaliser</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">dans votre </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">compte </ins>Shopify.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:1. <del style="font-weight: bold; text-decoration: none;">Please navigate to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Online Store</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Themes</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Customize</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">in your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Shopify <del style="font-weight: bold; text-decoration: none;">account</del>.&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:2. <del style="font-weight: bold; text-decoration: none;">Select the </del>section <del style="font-weight: bold; text-decoration: none;">you would like to edit on the left or add a new one</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:2. <ins style="font-weight: bold; text-decoration: none;">Sélectionnez la </ins>section <ins style="font-weight: bold; text-decoration: none;">que vous souhaitez modifier à gauche ou ajoutez-en une nouvelle</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify add section.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify add section.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:3. <del style="font-weight: bold; text-decoration: none;">Choose to add </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Custom content</del>.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:3. <ins style="font-weight: bold; text-decoration: none;">Choisissez d'ajouter </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">du contenu personnalisé</ins>.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:4. <del style="font-weight: bold; text-decoration: none;">Click on </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Add content</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">and select </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Custom </del>HTML&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:4. <ins style="font-weight: bold; text-decoration: none;">Cliquez sur </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Ajouter du contenu</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">et sélectionnez </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML <ins style="font-weight: bold; text-decoration: none;">personnalisé</ins>&lt;/span&gt;<ins style="font-weight: bold; text-decoration: none;">[[File:Select html.png|border|center]]</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:5. <del style="font-weight: bold; text-decoration: none;">Navigate to your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me <del style="font-weight: bold; text-decoration: none;">account</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Booking </del>widgets <del style="font-weight: bold; text-decoration: none;">settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame <del style="font-weight: bold; text-decoration: none;">widget</del>&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:5. <ins style="font-weight: bold; text-decoration: none;">Accédez à votre </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">compte </ins>SimplyBook.me&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Paramètres</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Paramètres des </ins>widgets <ins style="font-weight: bold; text-decoration: none;">de réservation</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Widget </ins>iFrame&lt;/span&gt;<ins style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:6. <del style="font-weight: bold; text-decoration: none;">Adjust the </del>design <del style="font-weight: bold; text-decoration: none;">to your taste and needs</del>, &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">get </del>widget <del style="font-weight: bold; text-decoration: none;">code</del>.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:6. <ins style="font-weight: bold; text-decoration: none;">Ajustez le </ins>design <ins style="font-weight: bold; text-decoration: none;">à votre goût et à vos besoins</ins>, <ins style="font-weight: bold; text-decoration: none;">puis </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">récupérez le code du </ins>widget.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:7. <del style="font-weight: bold; text-decoration: none;">Copy the whole </del>code <del style="font-weight: bold; text-decoration: none;">from the popup and insert it to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">field on </del>Shopify <del style="font-weight: bold; text-decoration: none;">side</del>. <del style="font-weight: bold; text-decoration: none;">Adjust container width if necessary</del>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Save</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">the changes</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:7. <ins style="font-weight: bold; text-decoration: none;">Copiez l'intégralité du </ins>code <ins style="font-weight: bold; text-decoration: none;">de la fenêtre contextuelle et collez-le dans le champ </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">du côté </ins>Shopify. <ins style="font-weight: bold; text-decoration: none;">Ajustez la largeur du conteneur si nécessaire</ins>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Enregistrez</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">les modifications</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:8. <del style="font-weight: bold; text-decoration: none;">As the result you will see how the booking </del>widget <del style="font-weight: bold; text-decoration: none;">looks like right away</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:8. <ins style="font-weight: bold; text-decoration: none;">Vous verrez immédiatement à quoi ressemble le </ins>widget <ins style="font-weight: bold; text-decoration: none;">de réservation</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/fr&diff=33736&oldid=prev 2025-07-01T07:48:01Z

<p>Created page with &quot;Si vous utilisez Shopify et que vous souhaitez ajouter la possibilité de réserver sur votre site web, nous avons la solution qu&#039;il vous faut !&quot;</p> <p><b>New page</b></p><div>&lt;languages/&gt;<br /> Si vous utilisez Shopify et que vous souhaitez ajouter la possibilité de réserver sur votre site web, nous avons la solution qu&#039;il vous faut !<br /> <br /> <br /> Notre widget iFrame vous permet de connecter le site web Shopify à SimplyBook.com et de permettre à vos clients de réserver directement depuis le site web, aussi bien depuis leur PC que depuis leurs appareils mobiles. Cette solution rendra votre processus de réservation plus pratique et plus facile.<br /> <br /> <br /> ;Comment définir<br /> <br /> &lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;<br /> :1. Please navigate to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Online Store&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Themes&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Customize&lt;/span&gt; in your &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Shopify account.&lt;/span&gt;<br /> [[File:Shopify customize theme.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :2. Select the section you would like to edit on the left or add a new one.<br /> [[File:Shopify add section.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :3. Choose to add &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom content.&lt;/span&gt;<br /> [[File:Shopify select custom content.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;<br /> [[File:Select html.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :5. Navigate to your &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;SimplyBook.me account&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Settings&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Booking widgets settings&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;iFrame widget&lt;/span&gt;<br /> [[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]<br /> &lt;br&gt;&lt;br&gt;<br /> :6. Adjust the design to your taste and needs, &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;get widget code.&lt;/span&gt;<br /> [[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]<br /> &lt;br&gt;&lt;br&gt;<br /> :7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes<br /> [[File:Insert html to shopify side.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :8. As the result you will see how the booking widget looks like right away.<br /> [[File:Shopify widget result.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;/div&gt;</div>

Admin