Adding a short video to your store can boost brand awareness, increase visitor engagement, and attract more customers.
This document will guide you on how to customize Video to enhance your online store and engage your audience.
You can access a Video by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Video.
You can configure some general options for the Video section below:
Color scheme: Allows you to select a color theme for the video section
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
To add a Video player block, click the Add block button (plus icon ➕) under the Video section > In the Blocks tab, select Video player.
You can configure some general options for the Video player block below
Video height: Customize the height of the video will appear on desktop.
+ Adapt to video: Each video will adjust its height based on the video being shown.
+ Lanscape wide (16:9): Video is set to standard landscape aspect ratio – 16:9
+ Fill screen height: The video will expand to fill the full height of the screen.
+ Fixed height: You can set a custom height (in pixels) for the video.
Fixed height: Lets you set a specific pixel value for the video height when "Fixed height" is selected.
Mobile video height: Controls how the video height is displayed on mobile devices.
Mobile fixed height: Lets you set a specific pixel value for the video height on mobile devices when "Fixed height" of "Mobile video height" is selected.
Play video on loop: When turned on, the video restarts automatically after finishing.
Video: Upload or select the main video (used for desktop view).
URL: Allows you to embed a video from an external source like YouTube or Vimeo by pasting the video link here.
This section only appears if no Shopify-host video is uploaded. Shopify warns that using external video may negatively impact site performence.
Cover image: Lets you upload or select a thumbnail/preview image that displays before the video is played. Recommended size: 3200 x 1600px in .jpg format, the image can cut a little bit off one of the edges.
Select: Upload an image from your device.
+ Explore free images: Choose from Shopify’s built-in free image library.
Video alt text: Used to describe the video for screen readers, helping visually impaired users understand the video content.
You can configure some general options for the Section header below:
Use custom maximun width: Use can enabled/disabled this option to use custom maximum width. When enable allows you to set a custom maximum width for the section header in pixels. When disabled, the content will use the default width defined by the theme.
Maximum width: When “Use custom maximum width” is enabled, you can use the slider or type a number (e.g., 400 px) to limit the width of the section header content.
Alignment: This option controls the horizontal alignment of Section header. Options included like Left, Center, Right align.
You can edit a Heading block using the following options:
Heading: This box is where you input the main headline. You can format the text using bold, italic, link ...
Heading size: Sets the size of the heading, H0 > H1 > H2 > H3 > H4 > H5 > H6 (H0 is the largest)
Heading tag: Sets the HTML tag of the heading, which does affect SEO. Ex: use H1 for the main headline of a page (each page should only have one H1).
Uppercase: Toggle this on to automatically convert the heading to ALL UPPERCASE letters. When off, the heading appears as typed.
You can edit a Text block using the following options:
Text: This is where you enter the main message or headline that appears on the slide. You can format the text using bold, italic, link icon, text alignment etc...
Color: Choose between the primary or secondary color styles defined by your theme for the text.
Size: Choose the font size for your text. Options typically include like small, medium, large, extra large, double extra large, four extra large, six extra large.
Hide on the mobile: When enabled, this text will not appear on mobile devices. This can help simplify the mobile layout if space is limited.
You can edit a Subtext block using the following options:
Text: Enter the subtext that appears above the main heading on the slide. This is usually used for a short label or category.
Font: There are two font styles you can choose from: body and heading.
Size: Choose the size of the subtext from small or medium
Color: Select the text color
+ Primary: Uses the theme’s primary color.
+ Secondary: Uses the secondary color style defined in your theme settings.
Uppercase: Toggle this on to automatically convert the subtext to ALL UPPERCASE letters. When off, the text appears as typed.
You can edit a Icon block using the following options:
Icon: Choose a default icon from the built-in icon library (e.g., Box).
Custom image icon: Upload your own custom icon image (e.g., PNG or JPG) by clicking Select, or browse free image libraries.
Custom SVG icon: Paste SVG code here to use your own vector icon. You can find SVG icons at websites like Remixicon or Tabler Icons.
Icon height: Adjust the icon size (in pixels) for desktop devices.
Tablet icon height: Adjust the icon size (in pixels) for tablet devices.
Mobile icon height: Adjust the icon size (in pixels) for mobile devices.
Color: Choose the icon color like Primary or secondary
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
You can edit a Spacer block using the following options:
Space: Adjusts the amount of space (in pixels) on desktop screens.
Table space: Defines the amount of space for tablet devices, ensuring responsive spacing.
Mobile space: Sets the spacing specifically for mobile screens.
