Layout and spacing changes can dramatically improve your store's look and feel. Here's how to adjust them with Clyro.
Understanding Layout Changes
Layout changes affect how elements are arranged on your page. This includes:
- •Column arrangements (1, 2, 3, 4 columns)
- •Content width (full-width, contained, narrow)
- •Element positioning (centered, left-aligned, right-aligned)
- •Grid configurations for products and collections
Example Layout Commands
"Show 4 products per row on desktop"
"Make the hero section full width"
"Center the footer content"
"Stack the product gallery vertically on mobile"
Understanding Spacing
Spacing controls the whitespace around and between elements:
- •Padding: Space inside an element (between content and border)
- •Margin: Space outside an element (between elements)
- •Gap: Space between items in a grid or flex container
Example Spacing Commands
"Add more space between sections"
"Reduce the padding in the header"
"Increase the gap between product cards"
"Make the hero section taller"
"Add breathing room around the footer content"
Responsive Layouts
Clyro can make changes that only apply to specific screen sizes:
"On mobile, show 2 products per row instead of 4"
"Hide the sidebar on tablet and smaller"
"Make the header sticky only on desktop"
Tip: Always check your changes on mobile, tablet, and desktop using the preview device toggles.
Common Layout Patterns
Product Grids
- •Desktop: 3-4 products per row
- •Tablet: 2-3 products per row
- •Mobile: 1-2 products per row
Content Sections
- •Two-column layouts for text + image
- •Three-column layouts for features
- •Single-column for focused content
Spacing Best Practices
- •Consistency: Use similar spacing throughout your store
- •Hierarchy: More space around important sections
- •Breathing room: Don't crowd elements together
- •Mobile-first: Ensure adequate tap targets on mobile
Specific Areas to Adjust
Header
- •Logo size and position
- •Navigation spacing
- •Header height
- •Announcement bar padding
Product Pages
- •Image gallery layout
- •Product info spacing
- •Add to cart button position
- •Related products grid
Collection Pages
- •Filter sidebar width
- •Product card spacing
- •Pagination layout
Footer
- •Column arrangement
- •Link spacing
- •Social icons layout
- •Newsletter section width
Remember: You can always preview changes before applying them, and roll back if the result isn't what you expected.
Was this article helpful?