The layout settings let you control how your size chart content (table, images, and text) is arranged on desktop and mobile. By choosing the right layout, you ensure shoppers can view and understand sizing information clearly, no matter which device they use.
Prerequisites
- SmartSize app installed and connected to your Shopify store
- A size chart created (open any chart to edit)
Step 1: Access layout settings
- In Shopify, go to Apps → SmartSize → Size charts and open a chart.
- Scroll to the Layout on desktop and Layout on mobile sections.
Step 2: Choose a desktop layout
On desktop, you can decide how the different components (table, images, text) are arranged side by side.
- Table | image | text – places the size table first, followed by the image and then the text.
- Other orderings are available depending on your design preferences.
Tip: Use a layout where the table remains the main focus, and supporting elements (images or instructions) are placed logically alongside it.
Step 3: Choose a mobile layout
On mobile, the chart is displayed in a single column for readability.
- The components (table, image, text) stack vertically.
- You can choose their order (for example: Table first, then Image, then Text).
Step 4: Preview your layout
- Click Show preview at the top of the editor.
- Switch between desktop and mobile views using the preview icons.
- Confirm that the chart looks clear and easy to navigate on both devices.
Step 5: Save
Click Save in the save bar to record your changes.
Expected Result
Your size chart will display with the chosen component order on desktop and mobile. Shoppers can easily follow the table, images, and text in a logical flow across all devices.
Additional Information
- Layout settings only control the order of components, not their size.
- On desktop, components are shown side by side; on mobile, they stack vertically.
- You can adjust width settings separately in Size chart width to further customize the desktop view.
Troubleshooting
- Layout not changing: confirm you selected a different order and clicked Save.
- Content appears cramped on desktop: try widening the chart under Size chart width.
- Images not displaying well on mobile: use center alignment or resize them before upload.
Need Help?
If you have questions, contact our support team at team@smartsize.io