How to Add and Customize a Parallax Block

Getting Started

The Parallax Block is an extremely detailed and customizable banner-like block with an active 3D-like background. You will also find that you are able to add layers of customizable text in the form of titles and subtitles. This block is a very attractive and eye-catchy way of grabbing the attention of customers. This page is dedicated to explaining how to add this block and begin customizing it.

Adding the Parallax Block

In order to add the Parallax block to your webpage, please follow these steps:

From your myShopify home page, select Online Store > Customize
On the customization side bar on the left of the page, scroll down to Add Section
From the Add Section selection, add Parallax Block
Following the addition, scroll up and find and select the Parallax Block section to begin your customization

Customizing the Parallax Block

Once you have selected the Parallax Block section, you are ready to begin customizations. In this section, you will notice several areas capable of being changed. These include:

Background Image
Section Top-Bottom Internal Spacing
Section Settings

Background Image

Within this section, you will further notice that you have the ability to add a banner image and adjust the text overlaying that banner image. You have the ability to add your banner image by selecting Select image. Please also be aware of the size of the image that you choose. You will notice instructions and recommendations for image size in this section. It will look something like this:

If you choose an image that is larger than the recommended size, the quality and visibility is very likely to suffer as a result. Please understand that this size recommendation is based on optimization across all potential viewing platforms (computer, smartphone, tablet, etc.)

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your logo. You can add up to 255 characters to this alt text feature

Following this, you will notice four more options centered on customization of the text overlaying your banner. You will find:

Background Color
Text Color 1
Text Color 2
Text Color 3

Background Color

This feature serves as a blanket color background if you have decided not to add an image banner. If you have selected an image to serve as your banner, then the background color will not matter and will not be visible.

Text Colors

These three categories allow for your store to adjust the colors of the text that you overlay over the banner. You can manually find a color or you can use HEX color codes if you known the specific colors you wish to use. We recommend playing around with these features so as to create an intentional customization fit for your shop.

Section Top-Bottom Internal Spacing

This section focuses on spacing for the text present within the Parallax block. You have a customizable cline with variables between 0 and 200. We recommend playing around with the spacing and padding in order to find the setting that best fits your banner text.

Section Settings

In your section settings, you'll find a wide array of customizable text boxes. These include:

Text Position
Parallax Offer Title
Parallax Title
Parallax Subtitle
Start Date
End Date
Button Label
Button Link

Text Position

Here, you will have a drop down menu with three options: Left, Right, Center. These placements indicate on which side of your banner text will appear. We recommend playing around with these features to find the style and position that best suits your design and purpose

Parallax Offer Title

This section is dedicated to the title of a specific Parallax Box. In terms of appearance and use, there is no change. This is a simple feature allowing for you to distinguish between many potential parallax blocks on your page.

Parallax Title

This is the title that will appear on your parallax banner. Please note that you also have the extended opportunity to further edit this text through use of code input here.

Parallax Subtitle

This is the subtitle that will appear on your parallax banner beneath your title. Please note that you also have the extended opportunity to further edit this text through use of code input here.

Start Date

This is a feature that allows for you to log the start date of the event or sale. If it is not needed, you can leave it blank. This feature is solely for record-keeping and has no aesthetic use.

End Date

This is a feature that allows for you to log the end date of the event or sale. If it is not needed, you can leave it blank. This feature is solely for record-keeping and has no aesthetic use.

Button Label

This feature allows you to customize the text that will appear on the connected, hyperlinked button. We recommend finding an attractive title that encourages customers to move forward with their sale.

Button Link

This drop down / text box allows for you to input a hyperlink or connect the parallax button to another page or collection on your store's website. it will look something like this: