Erica Pierce

We created a custom module for our client ErgoScience with an e-commerce look: http://www.ergoscience.com/functional-capacity-evaluation-equipment

It allows them to display all of their suggested equipment with a photo, title, description, price and link for purchase. We put it in a flexible column so they can change, reorder, add or delete any entries on their own with no coding knowledge. It is adjusted to float the image to the top on mobile. 

I think it could be repurposed for any HubSpot user who wants a "shop" look and links to an outside vendor.

Fields Set-Up in Custom Module Template View:

Page Editor Screens:

Live Preview:

CUSTOM MODULE MARK-UP:

<hr>

<div>

<div class="equipimage">

    <!-- Each of the fields filled out by the marketer is available under a HubL variable called "widget." -->

  {% if widget.equipment_photo.src %}

        <!-- Show the selected photo. -->

        <img class="" src="{{ widget.equipment_photo.src }}" alt="{{ widget.equipment_photo.alt }}">

    {% endif %}

    <div style="clear: both"></div>

</div>

<div class="equipinfo">

  <div>

  <div style="float:left; text-align: left;"><p class="equipprodname">{{ widget.product_name }}</p></div>  

  <div style="float:right; text-align: right;"><p class="equipprodprice">{{ widget.price }}</p></div>  

  </div> <br><br>

   <div style="float: none; margin-bottom: 40px; text-align: left!important" class="specialequipbutton">{{ widget.product_description_cta }}</div>

   <div style="clear: both"></div>

</div>

<div style="clear: both"></div>

</div>

CSS STYLES:

.equipprodname {font-weight: bold; text-transform: uppercase; color: #511b6b;}

.equipprodprice {font-weight: bold; color: #999c19}

.equipimage {float: left; width: 25%; margin-top: 25px; margin-right: 15px; margin-bottom: 15px;}

.equipinfo {float: left; width: 70%; }

.specialequipbutton a {background: #afb924!important;

border: none;

border-radius: 0;

font-family: "Neris", sans-serif!important;

font-style: italic!important;

background-image: none;

text-shadow: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

padding: 5px 15px 7px 15px!important;

font-size: 1em!important;

color: white!important;}

.specialequipbutton a:hover {background: #a0a920!important;

border: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

color: white!important;}

@media (max-width: 695px) {.equipimage {float: none; width: 100%; margin-top: 35px; text-align: center;} .equipinfo {float: none; width: 100%; margin-top: 0px}}