LTK and ShopStyle widget sizing guide

LTK Shop the Post widgets and ShopStyle Product Widgets are responsive to the containers in which they are embedded. This means that as long as the widget you build is as at least as wide as the container you’re placing it in, it will automatically reduce in width if a user is looking at the widget on a smaller device (like a mobile phone). With this in mind, you should generally size your widgets to match the width of your post or page column. 

Let's use our Hayes theme as an example. 

With Hayes, your full-width layout posts are 850px in width, so you can size your shopping widgets at this size as well. If you paste a widget into the body of your post, it’ll automatically resize on a mobile device to appear smaller. If you opt to use a post layout featuring a sidebar and embed that same shopping widget at 850px, the widget would automatically resize to 780px (the width of that particular layout). The same is true if you paste your widget code into our Shop the Post plugin fields; the widget will automatically resize to fit the smaller container that is featured on the Home Page.

A NOTE ABOUT WIDGET APPEARANCE:

We are often asked how to make widgets look similar to those in our demos, with larger product images. In both LTK and ShopStyle, users are able to not only set the width of the widget (discussed above), but also the size of the product image thumbnail. On the LTK Creator platform, this is designated with the setting  Image Width, and in ShopStyle, it's controlled by the Product Cell Width. Play around with the latter to achieve a look you love. ShopStyle users also have control over how many items appear per slide, with the Columns setting. Where applicable, our demos all feature LTK widgets, and we tend to size our product images at 125-150px, which makes the products appear a little bigger than the default.

LTK / SHOPSTYLE WIDGET SIZE GUIDES

BARTON

  • Posts and pages: minimum 850px 
  • Interstitial features: 900px (LTK); 1200px (ShopStyle)

HAYES

  • Posts and pages: minimum 850px 
  • Interstitial features: 900px (LTK); 1200px (ShopStyle)

PEARL

  • Posts and pages: minimum 750px 
  • Interstitial features: 900px (LTK); 1200px (ShopStyle)

RANIA

  • Posts and pages: minimum 780px 
  • Interstitial features: 900px (LTK); 1040px (ShopStyle)

PRESIDIO

  • Posts and pages: minimum 720px 
  • Interstitial features: 900px (LTK); 1100px (ShopStyle)

MIRAMAR

  • Posts and pages: minimum 850px 
  • Shopping Widget feature: 900px (LTK); 1150px (ShopStyle)

BREVIER

  • Posts and pages with sidebar: minimum 700px
  • Posts and pages with no sidebar: minimum 900px

ARCHER

  • Posts and pages: minimum 800px