---
title: "How to update your store's design with AI"
source: https://storeconnect.com/articles/news/how-to-update-your-stores-design-with-ai
type: article
format: markdown
site: StoreConnect — Customer Commerce built natively on Salesforce
site_index: https://storeconnect.com/llms.txt
docs_index: https://support.storeconnect.com/llms.txt
note: Append .md to any page or article URL on this site to get its Markdown form.
---
# How to update your store's design with AI

<div style="padding:56.25% 0 0 0;position:relative;margin-bottom:2rem;"><iframe src="https://player.vimeo.com/video/1228987593?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="How to update store design with AI"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

This is the Steve's Emporium homepage as it stands, but Steve wants it refreshed for the new season, new brand colors, as well as the products and text adjusted on the page. So let's use our AI agent to make this change for us.

## Before you start

If you haven't already connected an AI agent to your StoreConnect store, then see the [help video on how to do this](https://youtu.be/kesuY29stt8){:target="_blank"} first.

## Verify the store and environment

My agent is already connected to the store via MCP, but being connected isn't the same as being safe to act. So the first thing to do is verify which store and which environment it's connected to. Once this is confirmed, then I can ask for a change.

## Set the overall style brief

For the first prompt, I'll describe what I want the overall style to be like, as well as anything to avoid. This initial brief then gets saved to the store rather than just the conversation, so that anytime later, this outline can be referred to again automatically by the agent, and so keeps all future change requests consistent with the overall look.

The agent will then make the required changes to the store's global CSS and fonts.

## Change the page layout

Next, we'll then ask for the layout change.

A StoreConnect page is made up of layered content blocks, and it's with these the agent makes the adjustment. No Liquid and no template editing is required.

## Preview the result

Once the change has been built, it'll then render and show us a preview link, and here's the result. Same products, same copy, same store with new colors, new type, and a genuinely different shape to the page.

## Review the staged content change

And every one of these edits are staged into a single content change, so it can be viewed as one complete before and after. But none of this is live yet.

Once we confirm we're happy with this, the agent will push this into StoreConnect as a content change with a status of review.

## Approve and publish

To publish this now, a user with authority to approve then opens the record, reviews the individual changes, and if happy, sets the content change status to published.

And that's how fast and easy it is to update your store's design using an AI agent.

[Learn more at storeconnect.com/ai](https://storeconnect.com/ai)


<section class="color-block animate-group --slide-in-up | py-22 px-(--gutter) bg-ocean text-center" id="SC-ContentBlockContainer-v3-ask-us-your-toughest-questions" data-cb="v3-ask-us-your-toughest-questions" data-on-view="animate">

  <div class="color-block__section | w-full max-w-2xl">
      <header class="mb-6">
        <h2 class="animate-group__target | w-full max-w-2xl text-5xl font-extrabold">Ready to streamline your website, eCommerce and POS?</h2>
      </header>

    
      <div class="copy copy--simple animate-group__target | delay-200">
        <p>Schedule a demo with the team today.</p>

      </div>
    
  </div>
    <div class="color-block__section | max-w-full flex gap-4 justify-center flex-col items-center">
      
    </div>
    <footer class="color-block__section | mt-8 w-full max-w-2xl">
      <a class="button button--white" href="/book-demo">
        Book a demo
      </a>
    </footer></section>

---

## Follow StoreConnect

- [Email Newsletter](https://storeconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://storeconnect.com/partners)
- [Become a Partner](https://storeconnect.com/become-a-partner)
- [News](https://storeconnect.com/articles/news)
- [Events](https://storeconnect.com/articles/events)
- [Live Events](https://storeconnect.com/live-events)
- [Feature Comparison](https://storeconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://storeconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

## Machine-readable

- [Site index for agents](https://storeconnect.com/llms.txt): curated map of this site in llms.txt format
- [Documentation index for agents](https://support.storeconnect.com/llms.txt): full technical and product documentation map

Every page and article on this site has a Markdown rendering: append `.md` to its URL.

Continue in Markdown: [Home](https://storeconnect.com/home.md) · [How we compare](https://storeconnect.com/how-we-compare.md) · [Partners](https://storeconnect.com/partners.md) · [Become a partner](https://storeconnect.com/become-a-partner.md)

---

StoreConnect — https://storeconnect.com/articles/news/how-to-update-your-stores-design-with-ai