Block Shoppable Video - Revision history

An: /* Overview */

2025-07-09T07:20:08Z

Overview

← Older revision		Revision as of 07:20, 9 July 2025
Line 2:		Line 2:
	=== Overview ===		=== Overview ===

	The Shoppable Videos section (available with the Pro plan) lets customers quickly buy products featured in your videos. Just create a video slider with your uploaded videos and tag ~~multiple products~~ to each one. The main video will autoplay on all devices.		The Shoppable Videos section (available with the Pro plan) lets customers quickly buy products featured in your videos. Just create a video slider with your uploaded videos and tag a product to each one. The main video will autoplay on all devices.

	{{Note\|'''Useful Information''':		{{Note\|'''Useful Information''':

An: /* Overview */

2025-07-09T07:12:11Z

Overview

← Older revision		Revision as of 07:12, 9 July 2025
Line 7:		Line 7:
	Besides the Shoppable Video, Easy Content Builder offers five other block types for displaying videos:		Besides the Shoppable Video, Easy Content Builder offers five other block types for displaying videos:

	1. [[Block_Video\|Video]] section: ~~AAdd~~ horizontal and vertical videos to your Shopify pages by using uploads or video URLs, perfect for UGC, product launches, announcements, and product reviews. Supports TikTok, YouTube Shorts, Vimeo, and Instagram Reels for vertical videos.		1. [[Block_Video\|Video]] section: Add horizontal and vertical videos to your Shopify pages by using uploads or video URLs, perfect for UGC, product launches, announcements, and product reviews. Supports TikTok, YouTube Shorts, Vimeo, and Instagram Reels for vertical videos.

	2. [[Block_Video_Slider\|Video Slider]] section: Create a clean video slider or grid from your uploaded videos. When clicked, the videos will open in a modal.		2. [[Block_Video_Slider\|Video Slider]] section: Create a clean video slider or grid from your uploaded videos. When clicked, the videos will open in a modal.

An: /* Overview */

2025-07-09T07:12:00Z

Overview

← Older revision		Revision as of 07:12, 9 July 2025
Line 7:		Line 7:
	Besides the Shoppable Video, Easy Content Builder offers five other block types for displaying videos:		Besides the Shoppable Video, Easy Content Builder offers five other block types for displaying videos:

	1. [~~http://~~Block_Video Video] section: AAdd horizontal and vertical videos to your Shopify pages by using uploads or video URLs, perfect for UGC, product launches, announcements, and product reviews. Supports TikTok, YouTube Shorts, Vimeo, and Instagram Reels for vertical videos.		1. [[Block_Video\|Video]] section: AAdd horizontal and vertical videos to your Shopify pages by using uploads or video URLs, perfect for UGC, product launches, announcements, and product reviews. Supports TikTok, YouTube Shorts, Vimeo, and Instagram Reels for vertical videos.

	2. [[Block_Video_Slider\|Video Slider]] section: Create a clean video slider or grid from your uploaded videos. When clicked, the videos will open in a modal.		2. [[Block_Video_Slider\|Video Slider]] section: Create a clean video slider or grid from your uploaded videos. When clicked, the videos will open in a modal.

An: /* Video use cases */

2025-07-09T06:50:04Z

Video use cases

← Older revision		Revision as of 06:50, 9 July 2025
Line 20:		Line 20:

	Using a shoppable video slider with your locally hosted videos on your Shopify store is a great idea. You can tag products shown in each video, making it simple for customers to buy. It's perfect for featuring UGC, video reviews, or how-to tutorials to enhance product discovery and engagement.		Using a shoppable video slider with your locally hosted videos on your Shopify store is a great idea. You can tag products shown in each video, making it simple for customers to buy. It's perfect for featuring UGC, video reviews, or how-to tutorials to enhance product discovery and engagement.

			[[File:Ecb-shoppable-video-newsletter.png\|frameless\|800x800px]]

	See the shoppable video slider examples [https://easy-content-builder-demo.myshopify.com/pages/theme-section-video-20 here], [https://easy-content-builder-demo.myshopify.com/pages/theme-section-video-18 here].		See the shoppable video slider examples [https://easy-content-builder-demo.myshopify.com/pages/theme-section-video-20 here], [https://easy-content-builder-demo.myshopify.com/pages/theme-section-video-18 here].

An at 09:27, 4 July 2025

2025-07-04T09:27:55Z

An at 09:26, 4 July 2025

2025-07-04T09:26:42Z

← Older revision		Revision as of 09:26, 4 July 2025
Line 1:		Line 1:
	{{DISPLAYTITLE:Block: Shoppable Video}}		{{DISPLAYTITLE:Block: Shoppable Video Carousel}}
	=== Overview ===		=== Overview ===

An: /* Shoppable Video global settings */

2025-07-04T08:18:40Z

Shoppable Video global settings

← Older revision		Revision as of 08:18, 4 July 2025
Line 90:		Line 90:
	\|Set spacing between elements and their content.		\|Set spacing between elements and their content.
	\|}		\|}

			===Add other content blocks===
			You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.

			[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]

			{{Note\|See [https://easy-content-builder-demo.myshopify.com/pages/section-variations all content blocks] available that you can add to a section.\|reminder}}

An: /* How to add Shoppable Video section */

2025-07-04T08:15:32Z

How to add Shoppable Video section

← Older revision		Revision as of 08:15, 4 July 2025
Line 28:		Line 28:

	:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.		:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.
			:[[File:Ecb-section-setting-video.jpg\|frameless\|800x800px]]
	:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the [[Block_Video_Slider#How_to_add_Video_Slider_section\|Video Slider section]] instead of the Shoppable Video section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}		:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the [[Block_Video_Slider#How_to_add_Video_Slider_section\|Video Slider section]] instead of the Shoppable Video section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}

	*'''Step 2''': Add a '''Shoppable Video''' section and customize the settings according to your preferences.		*'''Step 2''': Add a '''Shoppable Video''' section and customize the settings according to your preferences.
			:[[File:Ecb-shoppable-video.jpg\|frameless\|800x800px]]

	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

An: /* Shoppable Video global settings */

2025-07-04T08:03:32Z

Shoppable Video global settings

← Older revision		Revision as of 08:03, 4 July 2025
Line 36:		Line 36:

	===Shoppable Video global settings===		===Shoppable Video global settings===
			{\| class="wikitable"
			\|+
			!Section Settings
			!Description
			\|-
			\|Items per row on Mobile
			\|Choose how many videos display per row on mobile devices.
			\|-
			\|Items per row on Tablet
			\|Choose how many videos display per row on tablets.
			\|-
			\|Items per row on Desktop
			\|Choose how many videos display per row on desktops.
			\|-
			\|Gap
			\|Set the space between items.
			\|-
			\|Center active slide
			\|Enable this to autoplay the center video as the main one; otherwise, the first video is used.
			\|-
			\|Vertical Alignment
			\|Align videos to the top or middle.
			\|-
			\|Show Navigation
			\|Toggle dot navigation on or off. Set it to Mobile Only to show dot navigation only on mobile.
			\|-
			\|Video Aspect Ratio
			\|Choose between horizontal or vertical formats.
			\|-
			\|Video
			\|Upload your chosen video.
			\|-
			\|Video Product
			\|Tag products related to the video content, allowing multiple tags per video.
			\|-
			\|Image Width (px)
			\|Set the product thumbnail width in pixels.
			\|-
			\|Image Height (px)
			\|Set the product thumbnail height in pixels.
			\|-
			\|Image Crop
			\|Cut out a part of the image: Top, Left, Bottom, Right, Center.
			\|-
			\|Image Border
			\|Set the image border - normal, rounded, circle, or pill.
			\|-
			\|Animation on Scroll
			\|This feature is only available for the Pro plan. It lets you apply different types of animation to elements within each section as you scroll down the page. Learn more about scrolling animations [https://posstack.com/blog/easy-content-builder-new-updates-mar-2023 here].
			\|-
			\|Margin
			\|Set spacing between elements and their content.
			\|}

An: /* How to add Shoppable Video section */

2025-07-04T07:57:45Z

How to add Shoppable Video section

← Older revision		Revision as of 07:57, 4 July 2025
Line 29:		Line 29:
	:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.		:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.

	:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the Video Slider section instead of the Shoppable Video section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}		:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the [[Block_Video_Slider#How_to_add_Video_Slider_section\|Video Slider section]] instead of the Shoppable Video section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}

	*'''Step 2''': Add a '''Shoppable Video''' section and customize the settings according to your preferences.		*'''Step 2''': Add a '''Shoppable Video''' section and customize the settings according to your preferences.

← Older revision		Revision as of 09:27, 4 July 2025
Line 2:		Line 2:
	=== Overview ===		=== Overview ===

	The Shoppable ~~Video~~ section (available with the Pro plan) lets customers quickly buy products featured in your videos. Just create a video slider with your uploaded videos and tag multiple products to each one. The main video will autoplay on all devices.		The Shoppable Videos section (available with the Pro plan) lets customers quickly buy products featured in your videos. Just create a video slider with your uploaded videos and tag multiple products to each one. The main video will autoplay on all devices.

	{{Note\|'''Useful Information''':		{{Note\|'''Useful Information''':
Line 25:		Line 25:
	===How to add Shoppable Video section===		===How to add Shoppable Video section===

	*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Shoppable ~~Video~~''' section.		*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Shoppable Videos''' section.

	:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.		:In this special section, you can specify multi-column layouts, enable full width, set the section's maximum width, choose a background color, and define global margins and padding, among other options.
	:[[File:Ecb-section-setting-video.jpg\|frameless\|800x800px]]		:[[File:Ecb-section-setting-video.jpg\|frameless\|800x800px]]
	:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the [[Block_Video_Slider#How_to_add_Video_Slider_section\|Video Slider section]] instead of the Shoppable ~~Video~~ section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}		:{{Note\|Note: If you want to add a video carousel next to the Add to Cart button on your product page, use the [[Block_Video_Slider#How_to_add_Video_Slider_section\|Video Slider section]] instead of the Shoppable Videos section. It provides a better viewing experience in a modal, especially on mobile devices.\|reminder}}

	*'''Step 2''': Add a '''Shoppable ~~Video~~''' section and customize the settings according to your preferences.		*'''Step 2''': Add a '''Shoppable Videos''' section and customize the settings according to your preferences.
	:[[File:Ecb-shoppable-video.jpg\|frameless\|800x800px]]		:[[File:Ecb-shoppable-video.jpg\|frameless\|800x800px]]

	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

	===Shoppable ~~Video~~ global settings===		===Shoppable Videos global settings===
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+