Skip to main content

Using the new integrated block editor in ShopFactory - Knowledgebase / Pages and Products - ShopFactory Help Center

Using the new integrated block editor in ShopFactory

Authors list

The biggest new feature in ShopFactory 12/14 is the new integrated block editor. You can create great looking page content and product descriptions just by dragging content blocks onto your page and editing them. 

Below you will find the information on how to update the existing link for Google maps and Youtube content placeholders 

A. Updating the Google map code (block #59, #36, #37)

In your Contact page, you can now use a block content with the embedded map in it.

- At the left tree menu, select "Contact" page and click on EDIT PAGE

- Drag block #59 into the description section to add the map

- Click "Edit link" 

- Open your default browser i.e. Google Chrome 

- Open up the Google Maps site and locate your address 

- At the left column, you will see a "Menu" icon - click on it

- Select "Share or embed map"

(Alternatively, you can see quick links on the left column, click on SHARE icon)


- This brings up the popup box - select EMBED A MAP tab

- Select "COPY HTML"

(or do a "Select all" within the code and press CTRL+C)

- Go back to ShopFactory editor and paste the embed code in the link box (press CTRL+C)

- Click OK

- Click Finish


B. Updating the Youtube video embed code

You can now insert a block content with the embedded Youtube video i.e. block #38 or #43.

- At the left tree menu, select the page you want to insert a Youtube video -> click on EDIT PAGE

- Drag block #38 or #43 into the description section to add the placeholder

- Click "Edit link" for the sample YouTube content

- Now, open your default browser i.e. Google Chrome 

- And go to YouTube site

- Click on the SHARE icon

- Select the "COPY" button to copy the link to clipboard

- Go back to ShopFactory editor

- Paste the Youtube link into the linkbox

- Click OK

- Click Finish

- Save and preview your shop


C. Using the Custom HTML Code content block (#38 ID: sfx-code2)

You can now insert a 3rd party snippet in the Custom HTML content block 

- At the left tree menu, select the page you want to insert a Youtube video -> click on EDIT PAGE

- Drag block #38 into the description section to add the placeholder


Sample 1: Inserting a Youtube embed code 

- Go to YouTube page and click on the SHARE icon

- Select the "EMBED" button then select ALL and copy to clipboard

- Go back to ShopFactory editor

- Paste the YouTube embed code into the Custom HTML box

- Click OK

- Click Finish

- Save and preview your shop in external browser


Sample 2: Inserting an MP4 embed code 

You can also embed your own mp4 video in this dialog -

Note: Change highlighted texts accordingly i.e. change the src URL to your own link.

<video width="640" height="480" controls preload="none">

   <source src="http://example.com/mytestfile.mp4" type="video/mp4">

   Your browser does not support the video tag.

</video>


D. Inserting a GIF animated  image in a content block

- Prepare your GIF image size according to the content block you are using 

- Copy the GIF image to the shop MEDIA folder in this location:

<shop folder>\Runtime\contents\media

- In ShopFactory, select the page/product and click on EDIT PAGE/EDIT PRODUCT

- Drag one of the content blocks into the description section. 

In this example, we use block  #13 (ID: g03) a 2-column content block with image on the right 

***Note that you can also insert an MP4 video instead of a GIF animated image here.

- Drag the sample content into the description area and click the < > (View Source) button to open the source code

- Manually edit the source image location with the correct filename 

src=”../media/<gif image filename>

Make sure you don’t accidentally remove the “quotes” in between the image file path/location. 





- Click OK -> Finish

- Save and publish your shop again.


E. Adding an Instagram Post content block (#77 ID: sfx-instagrampost)

You can now add the embed code from your Instagram Post. When you visit an Instagram photo or video page on your desktop web browser, you’ll see the share button on the right side of your photo. Click the button to see the embed code. Copy the block of text it gives you and paste it into your website. 

- At the left tree menu, select the page you want to insert an Instagram Post -> click on EDIT PAGE

- Drag block #77 into the description section 

- Open your Instagram page and select a Post

- Click on the SHARE (...) icon

- Select the "EMBED" option and click on Copy Embed Code

- Go back to ShopFactory editor

- Paste the Instagram embed code into the dialog box

- Click OK

- Click Finish

- Save and preview your shop in external browser