Skip to main content

App block instruction

Overview

XO Story provides scripts to enable app blocks and app embed blocks that are supported in all Shopify themes, so you can show your stories on any page of the store’s theme.

Video tutorial

Watch this tutorial on how to use the XO Story app block and show your stories on the store in a few simple steps.

How to activate and add XO Story app block to your theme

  1. From the onboarding, choose the theme you want to add the app block
  2. Go to Theme, then click on the Customize button of the theme
Theme customize
  1. Enable XO Story in the App embed

  2. Add a section of app block into the theme through Sections

How to reorder the XO Story app block on your theme

  1. Once added, select the Apps section with the selector on the left.

  1. Drag and drop the section where you like to set the app block on your theme.

How to configure the XO Story app block settings on your theme

  1. Select the XO Story app block to show the settings

  2. Configure the following settings of the app block

  • Container width (px): The width of the app block on the theme

  • Padding top (px): The space to the top of the app block

  • Padding bottom (px): The space to the bottom of the app block

How to deactivate the XO Story app block on your theme

  1. Inside the theme customizer, go to Apps embed

  2. Click on the button to deactivate the app block

You will then see the app block not visible on your theme.

How to remove the XO Story app block on your theme

  1. Select the XO Stories app block to show the settings

  2. Click on the Remove block button to remove the app block from section.