What do I need to know about Cell Width while creating Widgets?

Cell Width offers a myriad of options that gives you control over how your widgets appear across all devices. 

Cell Width Percentage (%)

Widgets can share a preview of the next product in the widget, or not. For example, if you want to remove this "sneak peak":

• Get 4 across by setting the width to 25%
• 3 across by 33%
• 2 across by 50% and etc.

Be sure to view these options for mobile devices, too. By setting the percentage, the widget will be determined across devices proportionally.

Pro tip: Using %, your widget will essentially look the same on mobile web. 

Above: Cell Width 25%

Above: Cell Width 50%

Cell Width Pixel (px)

Pro tip: Match the Cell Width Pixels to the custom dimension field up top and enter your blogs dimension here. This will prevent surprises when you embed the widget onto your blog!

Using pixels, the mobile experience will conform to keep the pixels you've set. This means that images will usually render in a larger format, than if they are set by %. 

How can I create 1, 2, & 4 Column Widgets?

Our widgets don't have "iframes" (containers), allowing you more control of your widgets. It's important to know the container size of your widget to have this control!

 

Find your blog's container size

Pro tip: Know the container size that you’re embedding your widgets into and enter it into the preview field! 

• In Chrome, right-click on your blog page
• Select Inspect

• Select the "Select an Element" cursor

• Hover over the element of your blog, you'll see something similar to 724 x 33 appear

• Use that first number for your custom container width

 

Pro tip: If you want to restrict the size of the widget, simply add this code (and replace the px with the desired width) in addition to the current embed code:

<div style="max-width: 250px; margin: 0 auto;">

Different Scenarios

Scenario 1: How to make 4 column Widget

4-column widget without side carets 

• be sure to have at least 4 products selected
• Rows: Auto
• Cell Width: 25% 

4-column widget with side carets 

• Rows: 1
• Cell Width: 25% 

Test across different devices, and enter your blog's custom container width if needed

Embed on blog or share link! 

Scenario 2:  How to make a 1-column widget

• Cell Width: the width of your blog’s container
• Rows: Auto 

Pro Tip: Need to center your widget? Add this code to do so! (250px is just an example--you should have this be your container's width)

<div style="max-width: 250px; margin: 0 auto;">

Here's where to add the code: 

Scenario 3: How to make a 2-column widget

2-column widget with side carets (horizontal scroll)

• Cell Width: 180px
• Rows: 1

2-column widget without side carets (all products displayed at once)

• Cell Width: 180px
• Rows: Auto