Ciwi
Back to topic
Spark playbook scenarios · Spark: AI Store Assistant

Plan responsive layouts for key device sizes

Most sessions now arrive on narrow screens, but the templates in use were arranged for a desktop width. In this case, the immediate task is to plan responsive layouts for key device sizes. The workflow should produce a page template and batch creation specification, with each preview verified against the merchant's own page data.

Topic
Page Layout and Bulk Creation
Target keyword
shopify responsive page builder
Copyable AI prompt

A prompt you can drop directly into Spark

First replace every [bracketed] placeholder with real store scope and constraints, then add any actual records or data you have, and paste it into your preferred AI assistant or Spark agent. Spark will follow this page's workflow to produce structured output and verification steps.

ai-prompt.txt
Act as a Shopify operations specialist.
Help me plan responsive layouts for key device sizes.
My store context is [describe the business, products and target audience].

My scope is [specify the affected products, pages, customers or reporting period]. Use these inputs: [the page data behind each template, the templates in use, the sections a page cannot lose, the device sizes the merchant's visitors use from narrowest to widest, and the publication scope]. Arrange each layout so content order, controls and key information survive at the narrowest and widest size in that set, moving a section's position rather than dropping it when space runs short, and record the size at which each layout was checked.
Return a page template and batch creation specification for the specified task.
Show the relevant evidence or before-and-after examples and explain how I can verify the result.
If essential data is missing, ask for it and mark unsupported conclusions as unknown.
Do not invent metrics, product claims or customer facts.
For any publication, message, account or store change, use only connected tools within my explicitly authorized scope and report success only after verification; otherwise provide the draft or proposed steps.
Use in Spark
How to solve

A recommended resolution workflow

Split the work into input, judgment, and deliverable phases. Verify each step's output before moving to the next.

01

Step 1

Collect the page data behind each template, the templates in use, the sections a page cannot lose, the device sizes the merchant's visitors actually use from the narrowest to the widest, and the publication scope for the rebuild.

02

Step 2

Arrange each layout so content order, controls and key information survive at the narrowest and widest size in that set, moving a section's position rather than dropping it when space runs short, and record the size at which each layout was checked.

03

Step 3

Deliver a page template carrying the responsive rules and the batch creation specification, preview every page in scope at each named size and compare the content present at the narrowest size with the desktop version, then list any control or section that disappears.

FAQ

Common questions when running this scenario

Cover decision rules, frequent misunderstandings, and required inputs so the team aligns on prerequisites before execution.

Which sizes must the layout cover?

The sizes the merchant's visitors actually use, checked from the narrowest to the widest in that set, because a layout verified at one width hides the point where it breaks; sizes outside the set are noted as untested rather than assumed to behave like their nearest neighbour.

Can section order differ on a phone?

It can, as long as every section present on desktop is still reachable on a phone, since reordering is what keeps a key control within reach; dropping a section to save space is not allowed unless the merchant's rules permit it, and any such drop is listed in the deliverable.

How is a record without an image handled?

The template defines a fallback for a record with no image so the section still renders, because a broken asset leaves a gap the layout was never designed for; records that fall back are listed so the merchant can supply the asset, and the page is not held back for a missing image alone.

Related scenarios

Continue with adjacent or same-topic scenarios

Start with scenarios under the same topic, then expand into cross-topic matches suggested by similarity.

Next step

Want these AI scenarios embedded directly into daily operations?

Ciwi Spark builds Shopify-native AI tools and agents around the workflows merchants actually run: research, ads, translation, and customer support. Stop rewriting the same prompts by hand.

Open Spark product pageBack to Spark scenario library