Puzzled Image Banner

To add this section, please follow below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Puzzled Image Banner".

Section settings

General

Settings	Meaning
Section Width	Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).
Padding Container Full Width	Determine the left and right spacing of the Full Width layout.

Section

Settings	Meaning
Heading	Enter in the heading for the section.
Heading Font Size	Determine the font size of the heading on Desktop.
Font Size Mobile	Determine the font size of the heading on Mobile.
Font Weight	Select the font weight of the heading
Heading Color	Apply a color to the heading of the section.
Heading Margin Bottom	Determine the bottom spacing of the section title.
View all	Enter the text for the "View all" link.
View All Link	Set URL for the "View all" to redirect to if the "Redirect To URL" is selected.
View All Font Size	Determine the font size of the "View all".
View All Font Weight	Select the font weight of the "View all"
View All Color	Apply a color to the "View all" of the section.
View All Margin Top	Determine the top spacing of the "View all".
Select Image	Select/Upload image for the "Content".
Image Text	Enter in the text for the "Content".
Image Text Font Size	Determine the font size of the text on Desktop
Image Text Font Size on Mobile	Determine the font size of the text on Mobible
Image Text Font Weight	Select the font weight of the text
Image Text Color	Apply a color to the text of the "Content".
Link	Enter the text for the link.
Link Text	Set URL for the "Link" to redirect to if the "Redirect To URL" is selected.
Link Font Size	Determine the font size of the "Link" on Desktop.
Link Font Size Mobile	Determine the font size of the "Link" on Mobile.
Font Weight	Select the font weight of the "Link"
Link Color	Apply a color to the "Link" of the section.
Image Behavior	Select animation for images

Block Left

Settings	Meaning
Content 1
Select Image	The image for the content 1 of the left block.
Image Text	The text on the image of the content 1.
Image Text Font Size	The font size of the image text.
Image Text Font Size on Mobile	The font size of the image text on mobile.
Image Text Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Image Text Color	The color of the image text.
Link	The URL that you want the content 1 block to link to.
Link Text	The text that displays on the link.
Link Font Size	The font size of the link.
Link Font Size Mobile	The font size of the link on mobile.
Font Weight	Select the font weight of the link. The options are: Normal Medium Semi bold Bold Bolder Black
Link Color	The color of the link.
Content 2
Select Image	The image for the content 2 of the left block.
Image Text	The text on the image of the content 2.
Image Text Font Size	The font size of the image text.
Image Text Font Size on Mobile	The font size of the image text on mobile.
Image Text Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Image Text Color	The color of the image text.
Link	The URL that you want the content 2 block to link to.
Link Text	The text that displays on the link.
Link Font Size	The font size of the link.
Link Font Size Mobile	The font size of the link on mobile.
Font Weight	Select the font weight of the link. The options are: Normal Medium Semi bold Bold Bolder Black
Link Color	The color of the link.

Block Right

Settings	Meaning
Content 1
Select Image	The image for the content 1 of the right block.
Image Text	The text on the image of the content 1.
Image Text Font Size	The font size of the image text.
Image Text Font Size on Mobile	The font size of the image text on mobile.
Image Text Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Image Text Color	The color of the image text.
Link	The URL that you want the content 1 block to link to.
Link Text	The text that displays on the link.
Link Font Size	The font size of the link.
Link Font Size Mobile	The font size of the link on mobile.
Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Link Color	The color of the link.
Content 2
Select Image	The image for the content 2 of the right block.
Image Text	The text on the image of the content 2.
Image Text Font Size	The font size of the image text.
Image Text Font Size on Mobile	The font size of the image text on mobile.
Image Text Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Image Text Color	The color of the image text.
Link	The URL that you want the content 2 block to link to.
Link Text	The text that displays on the link.
Link Font Size	The font size of the link.
Link Font Size Mobile	The font size of the link on mobile.
Font Weight	Select the font weight of the image text. The options are: Normal Medium Semi bold Bold Bolder Black
Link Color	The color of the link.

Animation

Settings	Meaning
Image Behavior	Select animation for images: None: Disable animation. Ambient movement: The image moves gently around within the image container. Zoom in on scroll: Zoom in on images when scrolling down and vice versa

Spacing Top

Settings	Meaning
Desktop	Determines the spacing of the section from its top sections on Desktop.
Tablet	Determines the spacing of the section from its top sections on Tablet.
Mobile	Determines the spacing of the section from its top sections on Mobile.

Spacing Bottom

Settings	Meaning
Desktop	Determines the spacing of the section from its bottom sections on Desktop.
Tablet	Determines the spacing of the section from its bottom sections on Tablet.
Mobile	Determines the spacing of the section from its bottom sections on Mobile.