Storefront

@do1983

Hey there, great questions!

Here is the main demo page for the Storefront shortcode: https://demo.wpshop.io/storefront-example

To apply the same layout as the demo page, add the below shortcode and HTML to your page:

Shortcode:

[wps_storefront dropzone_payload="#wps-storefront-dropzone-payload" dropzone_options="#wps-storefront-dropzone-options" dropzone_selections="#wps-storefront-dropzone-selections" dropzone_page_size="#wps-storefront-dropzone-page-size" dropzone_sorting="#wps-storefront-dropzone-sorting" show_featured_only="true" items_per_row="4" excludes="description" link_with_buy_button="true"]

HTML:

<style>

   .wps-row {
      display: flex;
      align-items: flex-start;
   }

   #wps-storefront-dropzone-options {
      width: 250px;
      position: sticky;
      top: 25px;   
   }

   #wps-storefront-dropzone-payload,
   #wps-storefront-dropzone-selections {
      flex: 1;
   }

   #wps-storefront-dropzone-selections {
      min-height: 80px;
      margin-top: -57px;
      display: flex;
      align-items: flex-end;
   }
    
   #wps-storefront-controls {
      width: 400px;
   }

   #wps-storefront-dropzone-payload {
      margin-top: 63px;
   }

   #wps-storefront-dropzone-page-size {
      margin-left: 30px;
   }

.wps-storefront-heading {
    margin-bottom: 15px;
}

#wps-storefront-dropzone-payload .wps-items-list {
    max-width: 860px;
    margin: 0 auto;
    margin-right: 0;
}
</style>

<section id="wps-storefront">

   <div class="wps-row">
      <div id="wps-storefront-dropzone-selections"></div>

      <div id="wps-storefront-controls">
         <div class="wps-row">
            <div id="wps-storefront-dropzone-sorting"></div>
            <div id="wps-storefront-dropzone-page-size"></div>
         </div>
      </div>
      
   </div>

   <div class="wps-row">
      <div id="wps-storefront-dropzone-options"></div>
      <div id="wps-storefront-dropzone-payload"></div>
   </div>

   <div class="wps-row">
      <div id="wps-storefront-dropzone-pagination"></div>   
   </div>

</section>

I’m on the same page as @do1983 .

I’d really love to see the storefront have the filters in a flyout sidebar the same way as the Shopping Cart flyout sidebar. That would really help prevent users from having to scroll all the way back up to select different filters. This would be especially better for mobile, given that the filters in the Demo Storefront get smushed on the side and extend really far down.

@animesaulo

I appreciate the valuable feedback! I’ve added this to my list of things to do.

Is it possible to get rid of the vendors box and also my products are displaying all of the variations as they are framed images. All of the various sizes are shown. I’d like to have just the main image and then the ability to click into the product for more detail and add to cart option. Is that possible.

Thanks for help so far. Is there a support email I can use perhaps.