Hero Banner Columns Slider Breadcrumbs Button HTML Image with Text Photo with Hotspots Image Tile Category Tile Product Tile Tabs Helper Classes Video Timer/Countdown Interrupters

Product slider with 6 slides

All Sliders

All sliders - Image and Text, Image Tiles, etc

Exception is the 3x Image with Tiles on homepage, etc.


mobile: 1.5 tiles shown, no dots or arrows

tablet (portrait): 2.5 tiles shown, no dots or arrows

desktop: 4 tiles shown, arrows only


disable Infinite loop

.slider-product-tile class is applied to slider

Reviews Slider

Add .slider-reviews to column container, use body-copy-m on text.

It's super sturdy and so far the surface of the e namel seems pretty scratch resistant with how much I keep my phone in my bookbag.

Shanon S.

Shark Bites Enamel

Shop

It's super sturdy and so far the surface of the enamel seems pretty scratch resistant with how much I keep my phone in my bookbag.


Shanon.S

Shark Bites Enamel

Hero Slider with rounded corners

PAP-796, PAP-794

  1. Image is flushed within the container
  2. Carousel dots can live outside of the module, with a -40px absolute bottom margin.
  3. Center Arrows and make sure they have a left/right of -24px
  4. Module has (optional) rounded corners class
  5. Optional background color from styleguide on column

Slider:

  1. Navigation style: Dots on all breakpoints
  2. Controls (i.e. arrows): Show Indicators Inside Desktop only
  3. Disable infinitte scroll

Slides: hero components

  1. Type: Half and Half
  2. Text placement: middle left
  3. Text width: 1/2
  4. Button style: primary

SUPPORT COMMUNITIES IN NEED

PopSockets has joined Partnership for a Healthier America (PHA) to celebrate the power of plants and support families in need. $5 from your PopGrip Plant purchase helps provide 14 servings of fresh high-quality fruits and veggies to neighborhoods just like yours.

Learn More About PHA

MORE ABOUT PHA

PHA supports many other changes to the food system, like devoting more production to nutritious crops and building more infrastructure to support produce. To help them in this important work, you can make a difference one meal at a time.

Learn More About PHA

Full Bleed Slider

PAP-3111

Please use the following configurations to create full bleed slider with updated design

  1. Choose single column layout
  2. Add slider component
  3. In Slider Style section choose newSliderDots from Pagination Style dropdown
  4. In Slider Style Section choose newSliderControl from Slider Controls Style dropdown
  5. For black arrows and indicators choose Dark from Controls Theme dropdown
  6. For White arrows and indicators choose Light from Controls Theme dropdown
  7. Enable these options in Phone configuration options
    • Display slider indicators on phones
    • Position slider controls on the inside of the slide
    • Display slider controls on phones
    • Choose 1 form the dropdown Number of slides to display on Phones
    • Choose 0% form the dropdown Show percentage of next slide
  8. Enable these options in Tablet configuration options
    • Display slider indicators on Tablets
    • Position slider controls on the inside of the slide
    • Display slider controls on Tablets
    • Choose 1 form the dropdown Number of slides to display on Tabets
    • Choose 0% form the dropdown Show percentage of next slide
  9. Enable these options in Desktop configuration options
    • Display slider indicators on desktop
    • Display slider controls on desktop, default is true for Desktop only
    • Position slider controls on the inside of the slider on desktops, default is true for desktop only
    • Choose 1 form the dropdown Number of slides to display on Desktop
  10. Add Image Tile component as Slides in the Slider component
  11. Choose 100% form Image Width option in Image Tile component.