Timeline Showcase

Author: Charlotte Tran 184 views

This Timeline Showcase element will walk you through the process step-by-step so you can display how the product in your store is being made or how the product’s story unfolds. More than that, you might describe the history of your shop from the inception to the present and what objectives you have for the near future.

As you can see, we can use this element in a variety of situations like those mentioned above. If you follow along, we’ll demonstrate how to do so.

Settings

  • Layout: We can set the layout with Horizontal Alternating, Horizontal Standard, Vertical Separated, or Vertical Side.
  • Point style: You can alter the layout’s focal point to provide your customers with plainly visible information such as Date or Icon.
  • Example site: From the time part, you can alter the layout options like Point Icon, Image, Style, Title, Date, Text, and Add items.
  • Basic options: You may build up the rest of the Timeline with The number of columns, Prev Icon-Next Icon, and Appearance Animation.
Video Demonstration Of The Content Settings

Design

  • Item Content: You can modify the Border, Box shadow, Border-radius, Inner padding, and Outside padding among options.
  • Thumbnail: The Width, Max Width, Height, and Image fit options allow you to change the thumbnail’s size. For the Normal and Hover effects, you may additionally adjust the Opacity, CSS Filter, Box Shadow, Border, Border Radius, and Spacing.
  • Date/ Title/ Content: After filling in the details for Date, Title, and Content, allow you to customize the design. Alignment, Typography, Text Color, Text Gradient, Text Shadow, and Spacing are mostly just the design variables that you can change.
  • Line: The Line settings then The Thickness, Normal Color, and Active Color can all be modified.
  • Point: With the Border Radius, and Color option, you can alter the point’s style. The Normal/Hover/Active effect’s Width and Height are included.
  • Navigation icon: Finally about Size, Rotate is the last Design configuration option.
Video Demonstration Of The Design Settings

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.