This tutorial only applies if your theme is built for Online Store 2.0 experience & you are on professional plan of app. 


Recently Shopify announced app block extensions for themes which allow developers to extend themes in a way that protects theme code integrity and provides better app development and merchant experiences.


In order to embed FAQs at areas where your theme allows app blocks, firstly you need to make sure your theme supports app block extensions. App as a utility tool which can run a theme check for you. You can learn more about it in this tutorial.


1. Open your theme using online theme editor. (Themes > Current theme > Customize)


2. Navigate to template where you would like to embed FAQs. For this demo, we will be embedding FAQs on product page.


3. Click on "Add block" or "Add section" from left sidebar depending on where you would like to add FAQs. Once you scroll down, you should find "Apps" section where you can find our app name & then click on "Custom 


If you don't see our app in Apps section, that means your theme doesn't support app blocks yet!



4. You should see new block added on left side panel as well as on your theme editor screen.



5. On right hand side sidebar, you would be able to adjust various settings for optional header. Couple things to note about these stylings:

  • Some of it might not work depending on which template you are embedding FAQs on
  • Fonts are default Shopify fonts and its not possible to use your theme fonts. You can make use of custom CSS in app to override that if needed.
  • Header field is optional so you can remove contents from it if you don't want to show.


6. Last thing you need is FAQs embed code, copy embed code from app and paste it in desired area. If you don't know from where to get embed code then please follow this tutorial. FAQs embed code should look something like following:


<div class="ef-faqs-plus-app-cats-content" data-category="Pricing" id="ef-faqs-60eb616d16a2629f4bdfd8b0"></div>


If you would like to embed all FAQs instead of only certain categories, you can use following embed code.

<div id="ef-faqs-plus-app-content"></div>



7. Save changes and you should immediately see these FAQs on your storefront once you visit right product page. You can follow similar procedure to embed FAQs at other parts of your store.


As this is a new feature, please let us know if you run into any issues so that we can help.