Redesigning from a Clone of Your Live Site

If your organization has the in-house resources to implement design with CSS and JavaScript, our custom services team can create a clone of your live website to be used as a "sandbox" for updating the visual design. 

How does it work?

1. Clone – Submit a support ticket with your request to our custom services team. Then, we'll make an anonymized copy and prepare it by stripping out legacy design code.

Our team strips out all CSS and design related JavaScript from these areas below:

• Admin > Design > CSS
• Admin > Design > Custom Classes
• Admin > Design > JS
• Admin > Settings > HTML Embed > Header HTML
• Admin > Settings > HTML Embed > Footer HTML

3. Rebuild – Once the clone is set up, your team can use a combination of the native tools in the Design Builder plus custom CSS and JavaScript to build your new design.

• Use Design Builder to get the design started
  • Design Builder
    
    
• Add CSS as needed
  • Design Customization with CSS
  • How to use the --ls-ratio CSS Variable
  • Custom Classes
  • Customizing the Header with CSS
  • Using Custom Font Files
  • Using @font-face with Google webfonts
  • div IDs & Pagetypes
  • Preview your work and publish it LIVE
  • Replacing an Image

• Section layouts and third party services vs CSS changes

3. Migrate Changes to Live Site – When your changes are done, you can migrate the new design from the clone to the live site. 

• Admin > Design > Options > Download Design (Live Version)
  Here you can download the current live version of the design from the clone. This includes, design choices from the design builder, custom CSS from the screen.css file, custom classes, as well as any JavaScript added to the JS tab in the design. 
  
  
• NOTE: Any changes to site structure (ex: new sprockets, sections, page layouts, content, or code added to site header) will NOT automatically be copied over with the design. You must keep track of those changes to the clone and manually recreate those on the live site.