How to Add Slider Revolution 7 to Your Theme (OS 2.0 App Block)

This step-by-step guide walks you through importing a professional Slider Revolution template, customizing it in the SR7 editor, and adding it to your Shopify store using Online Store 2.0 (OS 2.0) App Blocks.

Prerequisites

• Slider Revolution 7 installed in your Shopify store.
• An Online Store 2.0 compatible theme (e.g., Dawn, Sense, Spotlight, Horizon, Impulse, Prestige).

Part 1: Choose & Install a Template

• Step 1: Open the Templates Library
• In your Shopify Admin, navigate to Apps > Slider Revolution.
• Click Templates from the top navigation bar (or click Browse Templates on your dashboard).

• Find a template that fits your store design (e.g., Hover Morph Effect Hero Collection). Hover over it and click the **+ (Plus)** icon:

Step 2: Install the Template

In the template requirements dialog, review the required add-ons and click Install Template:

Part 2: Customize Your Content in the SR7 Editor

Step 3: Open the Installed Module

Once installed, the template appears under Your Modules. Click the module card (or the edit pencil button) to open the SR7 Visual Editor:

Step 4: Select a Layer to Edit

1. In the top bar, click the Layers panel icon.
2. Select the layer you want to edit (e.g., a button or headline layer):

Step 5: Update Your Text & Save Changes

1. In the right sidebar under TEXT, click the text field and enter your personalized copy (e.g., change "Explore More" to "Shop Now"):
2. In the top right toolbar, click the Unsaved button (it will switch to Saved once changes are written to the cloud):

Part 3: Publish & Copy Your Slider Shortcode

Step 6: Click "Publish"

In the top right toolbar, click the Publish icon (the upload arrow):

Step 7: Copy the Shortcode & Redirect to Theme Editor

The Slider published modal will appear:

1. Click Copy shortcode to copy the unique identifier (e.g., Hover-Morph-Effect-Hero-Collection) to your clipboard:
2. Click Add block in Theme Editor. You will automatically be redirected to the Shopify Theme Customizer for your live theme:

Part 4: Enable App Embed & Save (Crucial Step!)

Step 8: Switch to "App embeds"

In the left vertical icon toolbar of the Theme Customizer, click the App embeds icon (the third icon):

Step 9: Toggle "Slider Revolution" to ON

Locate the Slider Revolution embed toggle and switch it ON:

[!IMPORTANT]
Why is this required?
If the App Embed is turned off, the browser cannot load the Slider Revolution JavaScript engine, and the section may display raw code placeholders or blank space. Toggling it ON activates the animation scripts across your storefront.

Part 5: Add the Slider Block in Shopify Theme Customizer

Step 10: Click "Add section"

In the left sidebar of the Theme Customizer, scroll to where you want the slider to appear (e.g., between the Header and Footer) and click Add section:

Step 11: Select the "Apps" Tab and Choose "General Slider"

1. In the popup section menu, switch to the Apps tab.
2. Under Slider Revolution, click General Slider:

Step 12: Paste Your Slider Shortcode

1. In the left settings panel for the newly added General Slider block, click into the Slider Shortcode field:
2. Paste your copied shortcode (e.g., Hover-Morph-Effect-Hero-Collection). The live preview window will instantly begin rendering the slider:

Step 13: Save Your Theme

In the top right corner of the Shopify Theme Customizer, click the Save button:

Congratulations! Your Slider Revolution 7 module is now fully installed, customized, and embedded into your Shopify theme.

Troubleshooting & Tips

• Slider showing unformatted text or brackets? Make sure you completed Step 12 and saved your theme. The App Embed must be enabled for animations to execute.
• Want to change position on the page? In the Theme Customizer sidebar, click and drag the General Slider section up or down to place it anywhere on your page (e.g., directly below the header as a Hero banner).
• Responsive preview: Use the device switcher at the top of the Shopify Theme Customizer (Desktop, Mobile) to verify how the slider renders across different screen sizes.

Updated on: 03/09/2026