> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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. --- ## 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). ![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_14m597b.png =900x510) * Find a template that fits your store design (e.g., *Hover Morph Effect Hero Collection*). Hover over it and click the \*\*`+` (Plus)\*\* icon: ![Select Template from Library](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_g6hf2n.png =900x511) --- ### Step 2: Install the Template In the template requirements dialog, review the required add-ons and click **Install Template**: ![Install Template](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_18rl258.png =550x471) --- ## 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: ![Open Module in Editor](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1omjyey.png =550x475) --- ### 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): ![Select Layer](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_61tam1.png =900x513) --- ### 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: ![Add Block in Theme Editor](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_q6v6ko.png =900x513) --- ## 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**: ![Toggle Slider Revolution App Embed ON](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1ntgubw.png =400x540) > [!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**: ![Select General Slider App Block](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_94geuu.png =600x490) --- ### 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: ![Paste Shortcode and Preview](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1jaauyq.png =900x536) --- ### 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.