Relocate Floating Tab

New Member
2 0 0

Hello, I have integrated a floating tab from calendly and it works great. The only issue is that the widget is being covered by the shopify help tab. 

 

Can anyone please tell me how to either relocate the floating tab from calendly or remove the shopify floating tab?

 

Website is ogephotography.com

 

Attached is a screenshot of the issue. Look at the bottom right corner. 

Capture.PNG

0 Likes
Highlighted
Excursionist
47 5 6

Go to the theme code editor and open theme.liquid file
copy the following css code

<style>
    .toggle-shopify-chat { bottom: 100px !important; }
</style>

and paste it right before the closing head tag which looks like this

</head>

this css rule should left the chat button 100px from the bottom and leave enough space for the other widget

H. Azzam
0 Likes
New Member
2 0 0

Thank you for you response. No sir. I followed the instructions precisely but it did not work. I would prefer to center the Calendly widget. This is a page that I created (not a product page). Here is what my html editor currently looks like.

 

'<div style="text-align: center;"><b>Golden Isles Professional Real Estate Photography</b></div>
<div style="text-align: left;"><b></b></div>
<div style="text-align: left;">Great marketing as a real estate agent starts with good quality listing photos. <b><br></b>
</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;">Oge Photography offers quality and affordability! Awesome listing photos is the number one investment for any realtor.  We all know the power of a great first impression. Our listings photos will give you the advantage over your competition and get your phone ringing!</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;">There is no extra charge for subdivision amenities. Subdivision amenities is included in the base price. We also offer twilight, sunrise, and sunset photos at request.</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;">We use single exposure as well as manual HDR  (High Dynamic Range) blending to capture the beauty of the full color spectrum. Manual HDR blending allows us to capture every detail that typically is lost in regular photography due to over/under exposures. </div>
<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/hdr-photography_480x480.jpg?v=1566104564" alt="" width="407" height="271" style="display: block; margin-left: auto; margin-right: auto;"></div>
<div style="text-align: left;">-</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: center;">We also provide complimentary sky replacement with all orders!</div>
<div style="text-align: left;">
<img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/2_9deb4d03-705b-4127-ab53-0b7dd6f34b56_240x24..." alt="Golden Isles Real Estate Photography. Commercial and REsidential. Book your appointment here. " width="240x240" height="240x240" style="float: none; display: block; margin-left: auto; margin-right: auto;"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/2_aed7b14b-311f-4738-bf83-307a3686f33a_240x24..." alt="Golden Isles Real Estate Photography. Commercial and Residential. Book your appointment now!" width="240x240" height="240x240" style="float: none; display: block; margin-left: auto; margin-right: auto;">
</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: center;"><strong></strong></div>
<div style="text-align: center;"><strong>~Showcase~</strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: center;"><strong></strong></div>
<div style="text-align: center;"><strong></strong></div>
<div style="text-align: center;"><strong>Exterior Photos</strong></div>
<div style="text-align: left;">
<img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/1_7aa0d408-7321-4fe9-8a99-d92581f53cfa_480x48..." alt="Golden Isles Real Estate Photography" width="228" height="171"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/1_9a8c9e8f-f0c0-4f63-9e05-dbd3e4dfe1dc_480x48..." alt="Golden Isles Real Estate Photography" width="229" height="171"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/2_480x480.jpg?v=1563499440" alt="Golden Isles Real Estate Photography" width="230" height="173"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/6_1_480x480.jpg?v=1563499046" alt="Golden Isles Real Estate Photography" width="232" height="173"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/37_480x480.JPG?v=1563499329" alt="Golden Isles Real Estate Photography" width="231" height="173"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/34_480x480.JPG?v=1563498742" alt="Golden Isles Real Estate Photography" width="231" height="173"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/3_480x480.JPG?v=1563498618" alt="Golden Isles Real Estate Photography" width="232" height="174">
</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;">-</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: center;"><strong>Interior Photos</strong></div>
<div style="text-align: left;"><strong><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/10_4add8789-6b65-4705-b7c3-9edbe1cdb641_480x4..." alt="Golden Isles Real Estate Photography" width="235" height="176"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/13_480x480.jpg?v=1563499195" alt="Golden Isles Real Estate Photography" width="235" height="176"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/8_a60046d7-2124-4c2f-9474-2484ed0170cc_480x48..." alt="Golden Isles Real Estate Photography" width="236" height="174"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/10_480x480.jpg?v=1563499180" alt="Golden Isles Real Estate Photography" width="232" height="174"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/8_2_480x480.jpg?v=1563499252" alt="Golden Isles Real Estate Photography" width="233" height="176"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/8_39e31fcb-8144-42d4-a955-e480f71bec21_480x48..." alt="Golden Isles Real Estate Photography" width="236" height="176"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/18_480x480.JPG?v=1563499505" alt="Golden Isles Real Estate Photography" width="237" height="175"></strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: center;"><strong>Amentities</strong></div>
<div style="text-align: left;"><strong><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/40_480x480.JPG?v=1563499628" alt="Golden Isles Real Estate Photography" width="237" height="179"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/35_480x480.JPG?v=1563499592" alt="Golden Isles Real Estate Photography" width="239" height="179"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/27_480x480.jpg?v=1563499721" alt="Golden Isles Real Estate Photography" width="237" height="178"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/30_480x480.JPG?v=1563499841" alt="Golden Isles Real Estate Photography" width="237" height="178"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/29_480x480.JPG?v=1563499832" alt="Golden Isles Real Estate Photography" width="237" height="178"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/37_090d3527-10cd-400c-b883-bd40224a1f05_480x4..." alt="Golden Isles Real Estate Photography" width="237" height="178"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0059_480x480.jpg?v=1566102619" alt="Golden Isles Real Estate Photography" width="240" height="180"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0113_480x480.jpg?v=1566102836" alt="Golden Isles Real Estate Photography" width="240" height="180"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0119_480x480.jpg?v=1566102847" alt="Golden Isles Real Estate Photography" width="239" height="179"></strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: center;"><strong>Land/Lots</strong></div>
<div style="text-align: left;"><strong><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0133_480x480.jpg?v=1566102926" alt="Golden Isles Real Estate Photography" width="246" height="183"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0137_480x480.jpg?v=1566102939" alt="Golden Isles Real Estate Photography" width="245" height="184"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/Subdivision_Photos_4_480x480.jpg?v=1566103168" alt="Golden Isles Real Estate Photography" width="246" height="181"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/DJI_0142_480x480.jpg?v=1566102952" alt="Golden Isles Real Estate Photography" width="231" height="180"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/Subdivision_Photos_1_480x480.jpg?v=1566103151" alt="Golden Isles Real Estate Photography" width="250" height="186"><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/Subdivision_Photos_6_480x480.jpg?v=1566103131" alt="Golden Isles Real Estate Photography" width="247" height="185"></strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: center;"><strong>Pricing</strong></div>
<div style="text-align: left;"><strong><img src="https://cdn.shopify.com/s/files/1/0261/5237/0269/files/PRICING_4c8d7a28-dff6-40c8-a646-122002a3397b_..." alt="" style="display: block; margin-left: auto; margin-right: auto;"></strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong>Invoices will be sent to the corresponding email on file. Please be sure that your email address is entered accurately. </strong></div>
<div style="text-align: left;"><strong>-</strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: left;"><strong></strong></div>
<div style="text-align: center;">
<!-- Calendly badge widget begin -->
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
Calendly.initBadgeWidget({ url: 'https://calendly.com/ogephotography1', text: 'Book Your Shoot Here!!!', color: '#00a2ff', textColor: '#ffffff', branding: false });
// ]]></script>
<!-- Calendly badge widget end -->
</div>

0 Likes