1.4K Messages
•
262.9K Points
How do I enable Design Mode in Storefront?
Design Mode will allow you to change the look and text of your store without having to use HTML and CSS. To enable this feature, within your store, please follow the steps below.
1.) Login to your store's control panel.
2.) Click on the Design tab in the upper right.
![designtabmui.png designtabmui.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designtabmui-0c3f84bc-85c1-4723-84bc-8fa4260660ae-459397755.png)
3.) Click on the Design Mode tab.
![designmodetabmui_001.png designmodetabmui_001.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodetabmui_001-5753160c-506c-460d-9690-fd8aa6b01c33-1848975962.png)
4.) Click on the Open my Store in Design Mode button.
![opendesignmodemui.png opendesignmodemui.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/opendesignmodemui-bebc0f01-389a-49db-9995-bb72e89d7b15-1160051215.png)
5.) You should now see a Design Mode bar like the one below. By default the Toggle button should be highlighted Orange. This means you can adjust titles, text, and drag and drop panels. Your cursor will change to a cross cursor
when you know you can drag a panel into another position. Hold down your left mouse button on the panel you wish to move and drag it to the position you'd like it in. You will see some diagonal blue lines appear on the page letting you know you can place that panel in that position.
![designmodewindowtoggle.png designmodewindowtoggle.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodewindowtoggle-a24d7f8a-7d61-40e7-9891-afbed67d8978-1123268896.png)
6.) If you click the Toggle button it will temporarily toggle you out of design mode so you can navigate your store normally.
![designmodewindownt.png designmodewindownt.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodewindownt-4307dd69-3df1-4d4f-9c8b-0affe98982bb-303111982.png)
NOTE: if you want to leave design mode simply click the Disable button.
7.) When you are done making changes to your store, click the Save button.
1.) Login to your store's control panel.
2.) Click on the Design tab in the upper right.
![designtabmui.png designtabmui.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designtabmui-0c3f84bc-85c1-4723-84bc-8fa4260660ae-459397755.png)
3.) Click on the Design Mode tab.
![designmodetabmui_001.png designmodetabmui_001.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodetabmui_001-5753160c-506c-460d-9690-fd8aa6b01c33-1848975962.png)
4.) Click on the Open my Store in Design Mode button.
![opendesignmodemui.png opendesignmodemui.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/opendesignmodemui-bebc0f01-389a-49db-9995-bb72e89d7b15-1160051215.png)
5.) You should now see a Design Mode bar like the one below. By default the Toggle button should be highlighted Orange. This means you can adjust titles, text, and drag and drop panels. Your cursor will change to a cross cursor
![crosscursor.png crosscursor.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/crosscursor-13c3979b-bb28-46e1-a811-f13ac392ab86-471751633.png)
![designmodewindowtoggle.png designmodewindowtoggle.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodewindowtoggle-a24d7f8a-7d61-40e7-9891-afbed67d8978-1123268896.png)
6.) If you click the Toggle button it will temporarily toggle you out of design mode so you can navigate your store normally.
![designmodewindownt.png designmodewindownt.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodewindownt-4307dd69-3df1-4d4f-9c8b-0affe98982bb-303111982.png)
NOTE: if you want to leave design mode simply click the Disable button.
7.) When you are done making changes to your store, click the Save button.
![designmodesavemui.png designmodesavemui.png](https://prod-content-care-community-cdn.sprinklr.com/18625bcc-2014-418f-a6bf-35b74df5be9f/designmodesavemui-0b47f65b-03c8-490c-bc34-3fc386cc737b-844676958.png)
No Responses!