FINALLY. REWARDS You Deserve.

AstroPay App Phone Screen Showing Rewards

Every purchase gets you cash back, points and unlocks exclusive experiences that only AstroPoints can buy.

Open an account

Use your POints
Like a VIP Pass

Access unforgettable experiences and incredible rewards.

AstroMerch

Exclusive and unique merchandise

AstroTrips

Redeem your AstroPoints to book a trip

AstroExperience

Go to exclusive events

AstroCash

Astropoints

AstrosMeet

Meet and greet with Astros

SlickJS Slider Instructions

Step 1: Add head and body code to page settings.

In the Navigator, find the embedded code blocksHead Code (Delete After Copying) and Body Code (Delete After Copying)

Open the Head Code (Delete After Copying) embed, copy the code and place it in the Inside <head> tag custom code section of the page settings.
‍
Open the Body Code (Delete After Copying) embed, copy the code and place it in the Before </body> tag custom code section of the page settings.

Step 2: Connect CMS Collection to Slider (Optional)

Find the div block with class .slider06_component and add a Collection List inside of it.

Add the combo class slider06_wrapper slider-wrapperto the Collection List Wrapper

Add the combo class slider06_list slider-listto the Collection List

Add the combo class slider06_item slider-item the Collection Item

Find the existing div block with class .slider06_wrapper and delete it. (Your CMS Collection List now replaces this)

Step 3: Renaming Classes

We recommend to use {Finsweet Folders from the {Finsweet Chrome Extension to quickly update your class names for this section. Using the Folders tool, you can find and rename all instances of slider06 within the project.

Please make sure that the following combo classes stay applied to the specified elements:
• slider-wrapper is applied to the Collection List Wrapper or Div Block containing the slider-list and
• slider-list is applied to the Collection List or Div Block containing the slider-item
• slider-item is applied to the Collection Item or Div Block for each individual slide
• Optional: Delete slider06_arrows to remove the custom navigation arrow buttons.
• Optional: Use slick-current as a combo class on the slider-item to style the currently highlighted/focused slide.

Step 4: Style Away!

We recommend adding a slider06_contents div block to the slider-item and then add images, text, and custom styling as necessary to achieve the look you are going for.

Please note that some aspects of the design of the slider will come from the "settings" in the slider code, such has number of slides displayed at each breakpoint. If you are trying to make significant changes from the base structure of this slider, please make sure to review the different setting options that SlickJS offers.