How to Add and Customize Promotion Blocks

On This Page

TABLE OF CONTENTS

• Getting Started
  • Finding Promotion Blocks Settings
  • Customizing Promotion Blocks Settings
    • Expand Blocks to Fill Rows
    • Block Height
    • Stack on Mobile
  • Finding Promotion Blocks Items
  • Adding and Customizing Promotion Blocks Items
    • Image
    • Show Overlay
    • Overlay Opacity
    • Stretch Image
    • Background Color
    • Text Color
    • Heading
    • Text
    • Content Position
    • Button Background Color
    • Button Text Color
    • Button Text
    • Button Link

Getting Started

 

Promotion Blocks are a convenient tool that your store can utilize for clearly and efficiently showcasing and promoting specific products along with links directly to the showcased items.

 

Finding Promotion Blocks Settings

In order to begin customizing this section, follow these steps:

1. From your myShopify homepage, go to Online Store > Themes
2. Find and click Customize
3. You will see the customization menu on the left of your screen. Find and select Promotion Blocks

 

Customizing Promotion Blocks Settings

Once you have opened the customization tab for the Promotion Blocks, you will find three sections for customization:

• Expand Blocks to Fill Rows
• Block Height
• Stack on Mobile

 

Expand Blocks to Fill Rows

This section features a tick box that will widen blocks to fill out rows when selected. This means that when one row of blocks only includes a single block, it will widen to fill up the same space as two blocks. When this tick box is deselected, the promotion blocks will retain their normal width.

 

Block Height

This section includes a drop-down menu holding three height options: Small, Medium and Large. These affect only the height of the blocks, not the width.

 

Stack on Mobile

This section includes a tick box that affects only the view that customers using mobile devices see. When this box is deselected, the blocks will appear in a timed, rotating display. This means only one icon and text box can be displayed at a time. When this box is selected, customers on mobile will be able to see the blocks all together. They will appear two wide with varying rows of blocks, depending on how many blocks are included.

 

Finding Promotion Blocks Items

Following the customization of the Promotion Blocks settings, you will want to create and fully customize the blocks sets displayed on your page. In order to do begin doing so, please follow these steps:

1. From your myShopify homepage, go to Online Store > Themes
2. Find and click Customize
3. You will see the customization menu on the left of your screen. Find Promotion Blocks
4. From Promotion Blocks, select the drop down arrow and select Add Item
5. Select the new item block

 

Adding and Customizing Promotion Blocks Items

Once you have opened your new item block, you will want to begin by customizing and clearly presenting your promotion blocks. As you begin this process, you will notice the following categories for customization: 

• Image
• Show Overlay
• Overlay Opacity
• Stretch Image
• Background Color
• Text Color
• Heading 
• Text
• Content Position
• Button Background Color
• Button Text Color
• Button Text
• Button Link

 

Image

In order to add a new image to your block, click Select Image. From here you can upload or select the image your store wishes to display in the slide. Please note that the recommended image size is beneath this section. It will look something like this: 

 

 

If your image doesn't fit these specifications, it will not properly fit within the slide.

 

The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, 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 icon. You can add up to 255 characters to this alt text feature

 

Show Overlay

This section include a tick box that allows for the readability of text to be more clearly seen on images that are busier. Selecting or deselecting allows for the overlay to become visible or invisible.

 

Overlay Opacity

This section includes a sliding cline that allows for the opacity of the overlay to be adjusted. These adjustments happen in one percent increments ranging from 0 to 100. This adjusts the opacity of the overlay when it is shown by selecting Show Overlay as explained above.

 

Stretch Image

This section includes a tick box that will stretch the image to the recommended settings when selected. When deselected, the image will stay the same width.

 

Background Color

This section allows for the customization of the color of the background of the drop down menus. You can see the adjustments and changes by changing colors and hovering your cursor over the drop down menu.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Text Color

This section allows for the customization of the color of the text of the drop down menus.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Heading

This section includes a text box allowing for the customization of a content heading. This heading will be positioned above both the Text and Button that describe and link to the product being displayed on the slideshow. For the Heading, we recommend something attention grabbing and catchy to capture the eye of customers.

 

Text

This section includes a text box allowing for the customization of a content description. This will be positioned between the Heading and Button and serves to describe the product being advertised in the block. We recommend using a short and succinct message here, if any at all.

 

Content Position

This section allows for the orientation of the content section; a dropdown menu gives the choice for one of nine placement options. These options are: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right.

 

Please note: when on mobile, all content will be centered

 

Button Background Color

Here you will find the option to customize the background color for your content Button.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Button Text Color

Here you will find the option to customize the text color for your content Button.

 

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

 

Button Text

This section includes a text box allowing for the customization of the message that will appear on your block's content Button.

 

Button Link

This section includes a text box that allows for your store to connect a link to the above Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this: