For each element, there is a short guide on how to use it as well as a snippet of code. Copy the html snippet and paste it into a text editor, then follow the guide on how to customize the element. Copy that html snippet and paste it into your product page.

All of the elements below have been built using Bootstrap 4.0 standards and were designed to be easily implemented onto product pages, as well as any other pages, within a bootstrap supported Shopify site. As with most Shopify sites, the installed theme will dictate the styling and layout of elements dropped into a page. The elements in this documentation are no different, but by including the css within the source code of this documentation into your theme's stylesheet, most of the layout and element styling with be retained.

All of the snippets of code in this documentation have been made so that you will only need to initially edit the html. All of the fancy styling can come later when editing the css.

All of the elements in this documentation utilize the Bootstrap container-fluid class for the outside div. This allows the element to be as wide as the element it is within. So if your product page description is within a container or some type of non-full-width div, then the element that you drop in will only be that width. If that's what you are going for, then great! Otherwise, in order to have all of the elements span the full width of the browser window, you will need to adjust your product-template.liquid file so that the product description is outside of any containers.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Lorem Ipsum Dolor

Lorem Ipsum Dolor

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.

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

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.

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".