oh, hello there!
Welcome to the Marketfleet Enhanced Product Page documentation.
About this documentation
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
text-center-w-bg-img
To change the background image, place your image url in between the ()'s on line 1 where it says place_your_img_here. The recommended image size is 1800px by 1000px.
To change headline text, drop your text in on line 6. To change body text, drop your text in on line 9.
If you'd like to make the text dark, change the class text-light on line 1 to text-dark. There is a slight black overlay on the bg img. You can change this to a white overlay by changing the class dark-overlay on line 2 to light-overlay.
If you'd like the block to be shorter in height, change the class padding-lg on line 3 to padding-md or padding-sm.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
text-center-w-bg-vid
Your video file must be uploaded to a server or FTP. You cannot use a youtube link. Place the file directory link in between the " " on line 4 where it says place_your_video_here.
Change the headline text, body text, text color (light/dark), overlay (light/dark) or element height just like you would for the text-center-w-bg-img element.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
text-center-w-bg-color
You can edit this element just like you would the previous ones, but besides the bg being an img, it is a solid color. In the case of this example, the bg color is white. Note the inline styling on line 1 that reads style="background-color: #ffffff;".
#ffffff is the hexadecimal color code for white. There are plenty of online hexadecimal color code pickers that you can use to generate the code for the desired color you want. Take your hexadecimal color code and place is after the : and before the ; on line 1.
Note the classes on line 4 and 7. The class text-center can be changed to text-left or text-right. The two elements below show what happens when you change this class.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
text-left-w-bg-color
Note how the classes on line 4 and 7 have been changed from text-center to text-left.
Also, note how the hexadecimal color code has been changed to #e9eff5 and the result this has on the bg of this element.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
text-right-w-bg-color
Same, same... class change for text alignment and bg color.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
2-col-center-bg-color
This element allows you to have two columns with a headline. The first column does not overflow to the second column. You will need to drop in two blocks of text, one for each column. The neat thing about this element is that it is responsive and will stack the two columns when on mobile.
Note that you change change the bg color, text alignment and text color (light/dark) just like in the previous elements.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
2-col-left-bg-color
Note how the class text-center has been changed to text-left on line 4, the class text-dark has been changed to text-light on line 1, and the bg color hexadecimal code has been changed.

See the Pen 2-col-left-bg-color by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
3-col-center-bg-color
Note how the class text-center has been changed to text-left on line 4, the class text-dark has been changed to text-light on line 1, and the bg color hexadecimal code has been changed.
h-break-sm is a small horizontal break
h-break-md is a medium horizontal break
h-break-lg is a large horizontal break
horizontal-breaks
The three elements above act as horizontal breaks that can be used to space out elements within your layout. They are shown with a dotted border so you can see the vertical height. The code below will not have the border or text in the center. The code below is showing the three elements. You can discern which ones are the small, medium and large by the classes h-break-sm, h-break-md and h-break-lg.

See the Pen horizontal-breaks by Matt (@mattjaynedesign) on CodePen.

3-img-collage-right
This element is a three image collage that utilizes bg imgs and the responsive column classes of Bootstrap. Drop your img urls into the ()'s where it reads place_large_img_here and place_smaller_img_here. Your images should be approximately 1500px by 1000px. Note how the two smaller imgs shift under the larger imgs on mobile.
Do not use infographics or product on white images for this element. This is specifically for large full bleed images.

See the Pen 3-img-collage-right by Matt (@mattjaynedesign) on CodePen.

3-img-collage-left
This element is very similar to the previous with the difference being that the smaller images are on the left hand side and that the order in which the div's are displayed shifts from desktop to mobile.
Changing the imgs is the same as you would for the previous element.

See the Pen 3-img-collage-left by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3-feature-callout
Place your feature imgs in between the ()'s where it reads place_img_here. The recommended img size is 400px by 400px.
For each feature, drop in your text for the feature and feature body text.

See the Pen 3-feature-callout by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur
4-feature-callout
Place your feature imgs in between the ()'s where it reads place_img_here. The recommended img size is 400px by 400px.
For each feature, drop in your text for the feature and feature body text.

See the Pen 4-feature-callout by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
img-on-bg-img
This element is designed to be used with a transparent .png img and operates as a place to show a large hero infographic.
Drop your transparent .png img url in between the ()'s where it reads place_transparent_png_here.
Drop your background img url in between the ()'s where it reads place_bg_img_here.

See the Pen img-on-bg-img by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
img-on-bg-color
This is exactly the same as the previous element. The only difference is that it no longer has a background-image: url(); property in the inline "style" attribute, but now has a background-color: #xxxxxx; property.

See the Pen img-on-bg-color by Matt (@mattjaynedesign) on CodePen.

large-fixed-img
This is a static img that will always run full width and will have the height auto generated based on a 2:1 ratio. Your image MUST be 2000px by 1000px. Place your img url in between the " "'s where it reads place_img_here.

See the Pen large-fixed-img by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
bg-img-left-text-right
Drop in bg img url and drop in text.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
bg-img-right-text-left
Same as the element above, but you will need to drop in the img url into two places. Once where it reads place_img_here and a second time where it reads place_img_here_again. This has to be done so that the img stacks on top of the text on mobile.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
img-left-text-right
This element is very similar to the previous two, but rather than the img acting as a bg, the image will be shown in full. This is very useful to show product on white photos and infographics. Drop your image url where the code reads place_img_here. The recommended image size is 700px by 700px and it is ideal to use a transparent png.

See the Pen img-left-text-right by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
img-right-text-left
Same as the element above, but you will need to drop in the img url into two places. Once where it reads place_img_here and a second time where it reads place_img_here_again. This has to be done so that the img stacks on top of the text on mobile.

See the Pen img-right-text-left by Matt (@mattjaynedesign) on CodePen.

large-video-w-bg-img
Drop in your youtube video url where it reads place_video_url_here. Drop in your bg img url here it reads place_img_here. You can also swap out the background-image: url(); property for a background-color: #xxxxxx; property if you'd prefer a bg color instead of a bg img.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
video-left-text-right
Drop in your youtube video url where it reads place_video_url_here.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
video-right-text-left
Drop in your youtube video url where it reads place_video_url_here and place_video_url_here_again.
Lorem ipsum dolor sit amet
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
9-feautre-icons
Drop in your img urls where it reads place_img_here. Transparent png's are recommended and the image size must be 200px by 200px or larger. Try to keep your feature body text around 45 characters or less.

See the Pen 9-feature-icons by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing.
6-feautre-icons
Drop in your img urls where it reads place_img_here. Transparent png's are recommended and the image size must be 200px by 200px or larger. Try to keep your feature body text around 45 characters or less.

See the Pen 6-feature-icons by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Consectetur dolor sit amet adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Consectetur adipiscing dolor sit amet elit.
details-text-and-bullets
Drop in your text as usual. You can add or remove the number of bullets by either adding another <li> ... </ li> or deleting one.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor
Lorem Ipsum Dolor Adipiscing Elit
Ipsum Dolor 100lbs
Do Eiusmod 13' x 32"
Lorem Ipsum Dolor Sed Do Adipiscing Elit
Dolore Magna Adipiscing Elit
Adipiscing Elit Lorem Ipsum Dolor
details-text-and-table
Drop in your text as usual. You can add or remove the number of table cell rows by duplicating or removing one of the <tr class="mid-cells">...</tr> and its contents.
Note: only add or remove the <tr>...</tr> elements that have the class "mid-cells". If you are adding a new table row, be sure to place is above the <tr>...</tr> element that has the class "bottom-cells".
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor
details-text-and-img
Drop in your text and img url as usual. Img size must be 600px by 600px.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor
34of these
24.5of those
18of those
34of these
details-text-and-features
Drop in your text and img url as usual. Imgs must be 200px by 200px or larger.
back-to-top
This button will take the user to the top of the product page. Place the code below at the end of your product page code.

You must also place <div id="top"></div> at the top of your product-template.liquid file.

See the Pen back-top-top by Matt (@mattjaynedesign) on CodePen.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Dincididunt ut labore et dolore magna aliqua.
back-to-top-example
Here is an example of how you can use the back-to-top button within other elements.

See the Pen back-to-top-example by Matt (@mattjaynedesign) on CodePen.

css-and-scripts
Place the css in your templates stylesheet and the script at the bottom of your product page template.

See the Pen css by Matt (@mattjaynedesign) on CodePen.

See the Pen scripts by Matt (@mattjaynedesign) on CodePen.