Adding Elfsight widgets to your store

Adding Elfsight widgets to your store

We have added the amazingly beautiful and simple Elfsight widgets to Shopit to extend your store building experience. There are essentially 3 main places that a store owner would want them to appear:

Widget to appear Sitewide (floating, or header/footer)

Examples - these appear on every page of your site: 


WhatsApp chat widget added in a shopit store

countdown widget added in a shopit header

instagram feed widget added in a shopit footer


WhatsApp chat floating bubble


Countdown to a Sale in the Header


Instagram feed in the Footer


Additionally this widget could be a popup - such as Age Verification or Country (domain) Selection.

How to add to your store:
  1. Create your widget in Elfsight
  2. Copy the 2 lines of script code as given
  3. Go to Sales Channel > Design > Edit Template
  4. Open base.html.twig
  5. To add to the header, insert  between the <header> tags at the top of the code
  6. To add to the footer, insert between the <footer> tags at the bottom of the code
  7. To check your work: in a new tab, go to  Sales Channel > Design > Edit Website - this will show you the latest development version of the page (not  necessarily the live version which has a cache for another 10-12 minutes)
  8. Any issues, contact support@shopitcommerce.com

Widget to appear on a single page


Examples: this widget will only appear on one designated page

before after widget added on a shopit content page

instagram feed widget added on a shopit content page

google maps widget added on a shopit content page

  Home Page - Before/After Slider


Instagram feed on a Conte nt Page


Google Maps on Contact Us page


How to add:
  1. Create your widget in Elfsight
  2. Copy the 2 lines of script code as given
  3. Go to Sales Channel > Design > Edit Template
  4. Open the relevant page:
    1. Home
    2. Pages: About, Contact, Privacy Policy, Terms; Blog pages etc
    3. Click to edit the Body; then Source.
    4. Click where you want the script
    5. Add <div> script code here </div> 
  5. To check your work: in a new tab, go to Sales Channel > Design > Edit Website - this will show you the latest development version of the page (not necessarily the live version which has a cache for another 10-12 minutes)
  6. Any issues, contact  support@shopitcommerce.com
Note: If you want this widget on ALL content pages (NOT category, product, basket, checkout) you can add the code to page/detail.html.twig. To add to ALL Blog pages, add the code to blog/post.html.twig.

Widget to appear on a recurring page


Examples: this widget will on a recurring page of your choice : Categories, Products

ebay reviews widget added on a shopit category page

ebay reviews widget added on a shopit product page


 eBay reviews on a  Category Page


eBay reviews on a Product Page


How to add:
  1. Create your widget in Elfsight
  2. Copy the 2 lines of script code as given
  3. Go to Sales Channel > Design > Edit Template
  4. To add to all Category Pages, open product/ listing .html.twig
  5. To add to all Product Pages, open product/ detail .html.twig
    1. Click where you want the script
    2. Add  <div> script code here </div> 
  6. To check your work: in a new tab, go to Sales Channel > Design > Edit Website - this will show you the latest development version of the page (not necessarily the live version which has a cache for another 10-12 minutes)
  7. Any issues, contact  support@shopitcommerce.com

Note: You can make other edits to the Product Pages, by adding custom database fields - any data in the database can be pulled through automatically.