# How to create a Landingpage

We'll create a dedicated landingpage [like this example](https://clawcrane.myshopify.com/pages/landingpage-example-1) - don't worry, it's not that hard. 😊 Of course the guide assumes that you have already completed a basic setup of [Claw Crane](https://apps.shopify.com/claw-crane) and it is set to "enabled".

![](https://4285537577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA6yODvL23IO5LVDay8%2F-MB3yEZOObYrfRyhpreU%2F-MB3zQvHMbqwzP7qcPiH%2Fimage.png?alt=media\&token=8958da88-9c57-42c1-9a94-7c37df0f8fdc)

### Step 1: Create a Page or Blogpost in Shopify

![](https://4285537577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA6yODvL23IO5LVDay8%2F-MB3yEZOObYrfRyhpreU%2F-MB3z0qJlLjGc1D2I7z8%2Fclawcrane%2C%20landingpage%20-%2000%20create%20page.gif?alt=media\&token=c5025efd-649f-4998-84a1-91daf7a8ad23)

### Step 2: Copy the template for the landingpage

Copy the code from the blue box below (you can use the "copy" button in the top-right of the box).

```



<link rel="stylesheet" type="text/css" href="https://s3.app.secretbakery.io/sal-gitbook-assets/lp1.css" />
      
            <div class="sal-landing-card">
              <div class="sal-landing-header">
                  <img src="https://s3.app.secretbakery.io/sal-gitbook-assets/clawcrane_landingpage_banner_1.png">
              </div>
              <div class="sal-landing-content">



                <h2>
                  
                  Win cookies!
                
                </h2>


                Hey, want to win some cookies?! Due our anniversary week we're giving away free cookies to the brave and lucky.
                
                
                <div class="sal-landing-button-wrapper">
                    <div class="sal-landing-button claw-animation-shake claw-link-start-interaction"
                    style="background-color: #FF084E; color: #FFFFFF;">



                        I'm feeling lucky



                    </div>
                </div>
                    

              </div>
            </div>
```

### Step 3: Switch the Shopify editor to "HTML View"

![](https://4285537577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA6yODvL23IO5LVDay8%2F-MB40ss_vZ1SOvSMnPOo%2F-MB43Q1C48grmMWZ-yAm%2Fclawcrane%2C%20landingpage_%2002%20switch%20html%20view.gif?alt=media\&token=1d2dcd25-8cb2-4639-bd33-5942833d71bb)

### Step 4: Paste the code & change the text

Now just paste the template code from before. You'll maybe also want to adjust some of the text like `I'm feeling lucky` , `Win cookies!` or`Hey, want to win some cookies?!`.

![](https://4285537577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA6yODvL23IO5LVDay8%2F-MB44d_fzeee6b5W5MBF%2F-MB47xgAGQPHZ196-zgS%2Fclawcrane%2C%20landingpage%20-%2004%20paste%20and%20modify.gif?alt=media\&token=11934bf2-a3d9-48dd-8548-de1646bcbdac)

After that hit "Save" and you're done. Whoohoo! 😁🎉 Click on `View on your online store` to see your new landingpage.

#### Does your layout break after editing the text?

This is due to the Shopify editor removeing some of the template code from above.

* Switch back to HTML code.
* Paste the following code at the very top.

```
<link rel="stylesheet" type="text/css" href="https://s3.app.secretbakery.io/sal-gitbook-assets/lp1.css" />
```

### Step 5: Disable Greeter Icon (optional)

Since now you have a dedicated landingpage, you might not want to have the Greeter icon all around your store. You might want to [disable it entirely](https://clawcrane-docs.secretbakery.io/restrict-to-specific-pages#option-2-disable-the-greeter-icon-and-use-langingpages-starter-buttons) or [restrict it to specific pages](https://clawcrane-docs.secretbakery.io/restrict-to-specific-pages#option-1-restrict-to-specific-pages).

![Optional: Disable Greeter Icon](https://4285537577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA6yODvL23IO5LVDay8%2F-MBUGkiDcD4RPHO4ZHPW%2F-MBUHSTdd36Pvp7vzVQs%2Fimage.png?alt=media\&token=9ffc6395-a1be-46d7-8b79-8136f2f8e6f4)