Video with products section

The video section is a flexible section that gives you the ability to display a YouTube or Vimeo video on your shop, and optionally a list of products that can be related to the video.

Section settings

Heading: Set a title for this section (optional).

Sub-heading: Set a sub-heading for this section. This is optional.

Heading alignment: Choose whether you want the heading and sub-heading of this section to be left or center aligned.

Cover image: Select a cover image for your video. Note that for optimal performance all videos in Tokyo are deferred media (meaning that they will load on request, when the user attempts to play them), so a cover image is highly advised at all times.

URL: A YouTube or Vimeo URL. You can simply paste either the link from your browser’s bar or the URL that YouTube or Vimeo gives when attempting to share a video.

Description: This field will add a description on the video for screen readers. It is highly recommended you fill this in to improve your shop’s accessibility.

Product list

Position on desktop: The position of the product list (on desktop viewports). Left or right.

Heading: The heading of the product list.

Sub-heading: The sub-heading of the product list.

Products: Select the products you want to appear in the list.

Layout

Container width: Select either “Wide” or “Full” for the section’s container width. Choosing “Wide” extends the section a few pixels beyond the page’s boundaries on the left and right, whereas “Full” expands the section to cover the entire width of the viewport. This setting is designed to work along with a color scheme that contrasts the base background (i.e. Accent colors or Background 2).

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.