When adding or editing the advanced pages through SHOP Builder, you can flexibly adjust the padding between widgets to display the ideal distancing between images and products. With this tool you can make your website look more visually pleasing, hence offering customers a better online shopping experience.
In this article, you'll find
1. Types of padding
In the editing section on the left side of SHOP Builder, you can adjust the vertical, side, and all-side padding of the widget. Click the "desktop" or "mobile" icons to adjust the padding for the web and mobile versions respectively.
A. Padding types and descriptions
|
Padding type |
Description |
|
Widget Vertical Padding |
The widget's upper and lower paddings are adjustable for the web and mobile versions. |
|
Element Side Padding |
The element's left and right side paddings are adjustable for the web and mobile versions. |
|
Widget All-side Padding |
The widget's all-side paddings are adjustable for the web version. |
B. Example of padding adjustment
You can improve the visual consistency between different widgets by adjusting the padding of different widgets. For example, you can adjust the padding between the Gallery and Category widgets to 0 to create a visual harmony between the main image and the product.
An example of webpage display
2. Adjustable paddings for each widget
|
Widget |
Adjustable padding |
|
|
|
|
|
|
Read more
- Image with Text Widget | SHOP Builder
- Gallery Widget | SHOP Builder
- Text Widget | SHOP Builder
- Store Settings | SHOP Builder
- Announcement Bar / Header Settings | SHOP Builder
- Footer Setting | SHOP Builder
Comments