Create a gift guide section for Father’s Day Promotion with PageFly

A gift guide section can help customers find the perfect gift quickly and easily for the holiday season, especially the upcoming Father’s Day. This section presents them with a curated selection of products that are ideal for a particular occasion, recipient, or price range. By creating a dedicated gift guide section on your store pages, you can help shoppers find the perfect gift for their dads and drive sales during this special occasion.

In this manual, we will guide you on how to create a gift guide section for your Father’s Day promotion with PageFly. You can use this section on any page of your Shopify store.

You can also check this video about how to create a gift guide section for your Father’s Day promotion campaign:

Learn how to create a gift guide section for Father’s day in 5 minutes

How to create a Gift guide section

You can create this section in 4 steps as follows:

Step 1: Access PageFly Section

From the PageFly dashboard, go to Sections, and then click on the Create blank section button to create a new section from scratch.

Step 2: Add a heading element

On the element catalog, click on the Add element icon, choose the Heading element, and then drag and drop the first variant into the editor.

• In the General tab, change the heading text to “gifts for dad”.
• Go to the Styling tab > Overall and set rgb(39, 39, 39) for content color.
  • Then, in Spacing, set 0px for margin-top and 32px for margin-bottom.
  • After that, scroll down to the Typography parameter.
  • Choose Playfair Display for the font family, set 64px for the font size, and choose Center in Text alignment.
  • Click on More settings and set 1.4em for line height.
  • Select Capitalize in Text transform.
• Go to the breadcrumb > click on Section > then go to the Styling tab > scroll down to the Background parameter, and set rgb(250, 247, 243) for background color.

Step 3: Add a product list element

On the element catalog, click on the Add Shopify elements icon, choose the Product List element, and then drag and drop the second variant into the same Column with the heading element above.

In the General tab > Content > Product source, select the Custom Collection option and choose the collection you want to promote for Father’s Day.

Customize the product title element

• Go to the Styling tab > Overall and set rgb(39, 39, 39) for content color.
• Then, scroll down to the Typography parameter:
  • Choose Josefin Sans for the font family.
  • Click on More settings and set 1.5em for line height.
• After that, scroll down to the Advanced parameter where you can add custom code for the element. You can see that the titles have different lengths, so I will add code min-height:70px; to make them aligned.

Add a star rating element

PageFly integrates with several reviews apps to help you display the star ratings of your products on your store. You can check this article to know which reviews apps that PageFly integrates with.

In this manual, I use the Shopify Product Reviews element to display the star ratings. Please kindly check this article to learn more about how to configure and use this element in PageFly.

On the element catalog, click on the Add third-party elements icon, choose the Shopify product reviews element and then drag and drop the second variant under the product title. After that, go to the Styling tab > Spacing, and set 20px for margin bottom.

Customize the product price element

In the General tab > Price display, select the first option to show both the price and compare at price.

• Go to the Styling tab > Spacing and set 24px for margin bottom.
• Then scroll down to the Typography parameter, and select Josefin Sans for the font family. You can check the screenshot below.

• Click on the Price element and go to the Styling tab:
  • Set rgb(39, 39, 39) for the content color.
  • Then scroll down to the Typography parameter and set 24px for font size.
  • Click on More settings and set 1.5 em for line height.

• Click on the Compare At Price element and go to the Styling tab:
  • Set rgb(178, 178, 178) for the content color.
  • Then scroll down to the Typography parameter and set 18px for font size.
  • Click on the Product Price element > go to the Styling tab > Display > Flex and select Center in Align items.

Customize the product add to cart button

• Go to the Styling tab and scroll down to the Typography parameter:
• Select Josefin Sans for the font family and set 16px for font size.
• Click on More settings and set 1.5 em for line height.
• Next, go to the Background parameter and set rgb(128, 39, 15) for background color.
• Then, go to the Border parameter:
  • Select solid for border style and set #80270F for border color
  • Click on More settings and set 1px for border width.
• After you finish adjusting the styling in the Normal state, switch to the Mouse over state:
  • Set rgb(128, 39, 15) for content color.
  • Scroll down to the Background parameter and set rgb(255, 255, 255) for background color.

You can check this article to learn more about the configurations for the Product list element.

Step 4: Check Responsiveness On Mobile

After you complete the design on All devices view, switch to Mobile view to check the responsiveness.

• Select the heading element and set 40px for font size.

• Select the product title element, go to the Styling tab and add min-height: 80px; in the CSS code.

You can check this article to learn more about common cases of mobile responsiveness.

Finally, hit Save and Publish the section. To know how to add saved section on PageFly pages or Shopify pages, please check this article to see full details.

Frequently Asked Questions (FAQs)

[WPSM_AC id=18412]