Title: Storefront
Last modified: November 10, 2020

---

# Storefront

 *  [do1983](https://wordpress.org/support/users/do1983/)
 * (@do1983)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/storefront-5/)
 * Hi, I just purchased the pro plugin. I find the storefront shortcode produces
   an ugly store front. I’m not good with CSS or php. Is there any easy way to make
   my storefront a bit slicker looking.
 * For example the sort by tags, vendor types have grey boxes around them, and it’s
   all in one column. How would you change that colour? How would you get rid of
   the smaller preview images and only have one image for the product.
 * Is there any demo pages with the shortcode used so we can see what we get?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [andrewmrobbins](https://wordpress.org/support/users/andrewmrobbins/)
 * (@andrewmrobbins)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/storefront-5/#post-13644485)
 * [@do1983](https://wordpress.org/support/users/do1983/)
 * Hey there, great questions!
 * Here is the main demo page for the Storefront shortcode: [https://demo.wpshop.io/storefront-example](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>
       ```
   
 *  [animesaulo](https://wordpress.org/support/users/animesaulo/)
 * (@animesaulo)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/storefront-5/#post-13645520)
 * I’m on the same page as [@do1983](https://wordpress.org/support/users/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.
 *  Plugin Author [andrewmrobbins](https://wordpress.org/support/users/andrewmrobbins/)
 * (@andrewmrobbins)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/storefront-5/#post-13654727)
 * [@animesaulo](https://wordpress.org/support/users/animesaulo/)
 * I appreciate the valuable feedback! I’ve added this to my list of things to do.
 *  Thread Starter [do1983](https://wordpress.org/support/users/do1983/)
 * (@do1983)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/storefront-5/#post-13699764)
 * 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.

Viewing 4 replies - 1 through 4 (of 4 total)

 The topic ‘Storefront’ is closed to new replies.

 * ![](https://ps.w.org/wpshopify/assets/icon.svg?rev=2740857)
 * [ShopWP](https://wordpress.org/plugins/wpshopify/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpshopify/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpshopify/)
 * [Active Topics](https://wordpress.org/support/plugin/wpshopify/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpshopify/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpshopify/reviews/)

## Tags

 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [look](https://wordpress.org/support/topic-tag/look/)
 * [products](https://wordpress.org/support/topic-tag/products/)

 * 4 replies
 * 3 participants
 * Last reply from: [do1983](https://wordpress.org/support/users/do1983/)
 * Last activity: [5 years, 10 months ago](https://wordpress.org/support/topic/storefront-5/#post-13699764)
 * Status: not resolved