• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homeHow-to and FAQs[V7] How to create a sticky section
homeHow-to and FAQs[V7] How to create a sticky section

[V7] How to create a sticky section

This article will show you how to make a sticky section using Editor V7.

With Editor V7, you can create different kinds of sticky sections based on what you need. This article will only focus on the two most commonly used styles of sticky sections: a sticky bar at the top or bottom of your page or a sticky column on one side of your product module.  

If you want to create a Sticky Cart with GemPages, we also offer a Sticky Cart element. Check out this article to learn how to create one.

#1 Add a sticky bar on your page

Step 1: From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Row element on the left sidebar of the Editor, drag and drop the Row into your preferred position.

Step 2: Nest all the elements you need inside the Row to create a sticky bar as you wish to finalize your design. You can save time by using our pre-designed template instead of designing a sticky section from scratch. Navigate to Library > Sections and search for “Sticky”. You’ll discover a range of sections including the sticky bar and sticky cart.

Step 3: Click on the section that covers the row to reveal the configuration on the left sidebar. Under the Settings tab, turn on the Full-width option. 

Step 4: Go to the Advanced tab, find the “Position” section, and select “Fixed” from the dropdown menu. Raise the Z-index above 0. Depending on your choice, enter values for Top/Bottom/Left/Right in their respective fields. For instance, if you want the bar to stick to the top of your page, input “0” in the Top box.

Don’t forget to Save and Publish and check the result on your live page.

 

#2 Make your product image sticky

Another way to use the sticky section is by designing a product module with fixed product images on one side and additional product details on the opposite side. 

To achieve this, follow the instructions provided below.

Step 1: From the GemPages Dashboard, open your preferred template to access the Editor.

Step 2: Add a Product Module with a 2-column layout. Complete the design by positioning the Product images & gallery element in the left column, while arranging the remaining child elements on the right column of the Product Module.

Step 3: Click on the Product Images & Gallery element to reveal the configuration on the left sidebar. Go to the Advanced tab, find the “Position” section, and select “Sticky” from the dropdown menu.

Depending on the theme you use, the Sticky position functionality might not behave as expected. If this occurs, please reach out to our support team for assistance.

Step 4: Hit “Save” and “Publish” and check the result on the live page. 

 

For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.

Was this helpful?

Yes  No
Related Articles
  • [V7] How to create color swatches
  • Button Element – FAQs
  • [V7] How to Upload Custom Font
  • Affiliate – FAQs
  • Link your pages to Shopify menu item
  • Add the overlay effect to the hero banner
footer logo
  • Changelog
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code