Unlike the Settings tab, all of the Design tab's configurations are the same across all elements, these are settings to help you customize the look and feel, position, animation, and interactions of an element on the live page.
There are 9 sections in total: Visibility, Spacing, Background, Border, Shadow, Opacity, Position, Animations (Beta), and Flow Actions (Beta). Let’s take a deep dive into each section!
The Visibility section is used to hide an element from one or more particular views.
By default, an element is visible to all 4 different views (Desktop, Laptop, Tablet, and Mobile). By toggling the corresponding view in Visibility, you can decide exactly which view to show, and which view to hide the element.
Here's an example: If you want two different hero banners, one for Desktop/Laptop/Tablet and one for Mobile, you can toggle off Visibility on Mobile for the desktop banner, and do the same thing for the Visibility on Desktop, Laptop, and Tablet for the mobile version:
In the Spacing section, you can adjust all 4 dimensions of the Margin and the Padding.
Margin is the space outside of an element’s border
Padding is the space inside of an element’s border, between the content and the border itself.
You can also adjust the padding by dragging the cursor: Just move the mouse cursor to the edge of an element until you see it changes into a two-way arrow to start dragging.
For more details about the Margin and Padding, check out the video below:
The Background section allows you to change the background color using the color palette or fill it with a background picture.
Color: Choose a color from the color palette or input a hex color code in the box. You can get color codes from HTML Color Codes.
Picture: Click on the picture icon to switch to picture mode.
Next, hit “Upload Image” and upload the image from your device. If you have your image uploaded in Shopify Admin > Files, you can also input the URL of the image to the Image Src field.
Hit “More settings” to bring up more properties of the background:
- Background size
Cover: The background image will color the entire background of the element.
Contain: The background image will maintain its original size and the rest of the background will follow the color code set up in the color tab.
Adjust the position of the image in 9 different positions: top left, top-center, top right, middle left, middle-center, middle right, bottom left, bottom-center, bottom right.
You can also input values in the X-pos and Y-pos, or click and drag vertically to adjust position with pixel precision.
Background Repeat (For Contain background size only)
Repeat the background image to fill up the background in 3 styles: Fill, X-axis only, and Y-axis only.
By default, your image is set to the fourth option: No repeat.
Scroll: The background image scrolls with the page.
Fixed: The background image does not scroll with the page
Local: The background image will scroll with the element’s content.
For more information, please refer to this article: CSS background-attachment Property
Border Style: Choose from 4 available styles: Solid line, Dashed line, Dotted line, and No border.
Border Color: Choose from the color palette or use hex color code.
Border Width: Adjust the size of the border from 0 to 100 pixels.
Border Radius: This setting is to round the 4 corners. Adjust border roundness from 0 to 100 pixels by using the slide or input a value in the box.
You can further fine-tune the border’s size and radius one by one in “More settings”.
Drop Shadow: Display a drop shadow on the right and bottom edges of the element, as if the light shines from top left to bottom
Outer Shadow: Display a shadow on all 4 edges of the element, as if the light shines from above the element, right in the center.
Choose a color for the shadow in the color palette or use a hex color code.
- Shadow Type:
- Inset: Make the shadow looks like it’s coming from inside the element.
- Outset: Opposite to Inset, bring the shadow to the outer edges of the element.
- Shadow Angle: Turn the dial to determine the angle for the shadow
- Shadow Distance: Drag the slider or use the box to determine the distance between the shadow and the element itself (in pixels).
- Shadow Blur: Drag the slider or use the box to determine the blurriness of the shadow (in pixels).
- Shadow Size: Adjust the size of the shadow. The maximum is 100 pixels and the minimum is -100 pixels.
Adjust the opacity of the whole section. The smaller the value, the stronger the opacity.
You can set up an element in 3 positions:
Relative: When an element is put in the Relative position, its position is relative to its normal position.
Sticky to the screen: This position is also called fixed position in CSS language. This means the element will stay in place even if the page is scrolled.
Static: An element when put in static will render in order, as it appears in the document flow.
When Relative and Sticky to the screen is selected, you have additional settings for vertical and horizontal orientations.
Choose from 16 available animations for an element to make it stand out and grab more attention.
To add an animation, hit the “+” button. There are 6 conditions for an element: Mouse click, Mouse hover, Mouse leave, Scroll into view, While scrolling in view, and After page finish loading. You can choose all one or multiple conditions for an element.
After selection, click on the newly added condition to open its parameter:
- In the drop-down list, there are 16 animations, divided into two categories: Entrance and Stand in Place. Pick an animation here to start configuring it. Depending on the selected animation, it might an additional Direction or Flip settings. The ones they all share are Delay, Duration, and Trigger on. Additionally, All Stand In Place animations have an option to loop infinitely.
After setting up, you can click on the “View Animation” button to preview how the animation will look on the live page.
Flow Actions (Beta)
Use Flow Action to trigger an event on a selected element. Please check out this article for a comprehensive guide.
You can also check this video to for an overview of the Design Tab.
Check out more of your articles here, and for any further assistance you need, our GemPages Support Team is always here to help.