Storefront

do1983
(@do1983)

5 years, 6 months ago

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

(@andrewmrobbins)

5 years, 6 months ago

@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>

animesaulo

(@animesaulo)

5 years, 6 months ago

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.

Plugin Author

andrewmrobbins

(@andrewmrobbins)

5 years, 6 months ago

@animesaulo

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

Thread Starter

do1983

(@do1983)

5 years, 6 months ago

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.

Tags