Sales Funnel
Post-purchase offer with Subscription Products in Sales FunnelsHow to Set Up Automatic Order Tagging for GemPages Sales Funnels (Using Shopify Flow)How to Change the Landing Page in a GemPages Sales FunnelHow to Link Your Pre-sales Page to the Sales PageIntroducing Sales Pages – A New Addition to GemPages Sales FunnelSales Funnel Dynamic OfferThe Limitations in Designing Post-purchase Pages with GemPagesSales Funnel Dynamic TriggerPost-Purchase Upsell Strategies to Boost Your SalesGemPages Sales Funnel & FAQsTesting GemPages Upsell Sales Funnel with Shopify Orders & $1 ProductGemPages Sales Funnel: Save Template to Library FeatureHow to Troubleshoot Post-purchase Offers Not AppearingGemPages One-Click Post-Purchase: Supported Payment Methods
Editor
GemPages Overview
Introducing a Smarter Way to Build: The New GemPages EditorHow to Use GemPagesAn Introduction to GemPages V7Install GemPages to your Shopify StoreWhat's the Difference Between GemPages V6 and V7?An overview of the Advanced Tab SettingsIntegrate a Third-party AppSwitch Pages in GemPages EditorGemPages Customer Support: Channels & OptionsAn Overview of the GemPages DashboardAn Introduction to The Library
Editor Tips
How to Edit Border on Individual SidesHow to Reorder Columns in a RowHow to Use the Responsive Settings IconHow to Edit Padding Using the Lock/Unlock IconHow to Use the Color PickerHow to Copy and Paste Styles Between ElementsHow to Group Elements in a RowHow to Rename Sections to Manage Your Page More EasilyHow to Select Hidden Elements Using Layer Tree in GemPagesHow to Duplicate Items in Item Management (Carousel, Tabs, Accordion, and Item List)
Main Features
Schedule PublishPublish AI-Generated HTML to Shopify with GemPagesMulti-language Feature in GemPagesHow to Delete Unused SectionsIntroduce GemPages New LibraryPage Optimization FeatureDownload Debug File Feature in GemPagesHow to Use the Share Page Feature in GemPagesIntroducing the Interaction FeatureHow Can I Use a Template?Can I Transfer a GemPages Template to Another Shopify Store?GemPages Theme Section & FAQsGlobal StylesImage-to-LayoutTemplate Library V7Auto-Save and Version History in GemPagesLayer TreeText Editor InlineInstant Landing Page (Headless)Bunny FontsImage-to-Layout
Design Base
Layout Designs
How to Add a Map to Your GemPages V7How to Split Product Descriptions Into Accordion Tabs in GemPages V7How to Create a Collection Carousel in ShopifyConvert a Figma Design to an Editable LayoutHow to place Button over an Image?Change the Size of the Hero BannerHow to Create a Carousel with TextUse Row to Build Your Desired LayoutGemAI Image-to-Layout: Turn Any Image or URL into an Editable LayoutAI Content Generator with GemAIPut Buttons Side by SidePut Text over ImageHow to Create 5-Column Grid with Row or Carousel Element
Mobile Designs
How to Set a Gradient Background Only on Mobile in GemPagesImage Shows Differently on Mobile and Desktop ViewHow to Change Text on Mobile OnlyHow to Make Images Larger on Mobile Without Affecting DesktopResponsive Web Design OverviewOptimize the Design for Mobile Which is Not Impacted to Desktop?Show/Hide Element or Section on Each DeviceRe-order Columns/Content on Mobile
Section Designs
GemPages Section Settings: Layout, Background, Shape & Advanced ControlsWhy is My Design Not Showing in Tablet View?Optimize Hero Banner Images for All DevicesHow to Design a Product Details Page with Product Elements in GemPagesDesign Product Color Swatches with the Variants & Swatches ElementDesign Latest Blog Posts Section on Homepage with Article List ElementDesign Featured Product List with Product List ElementDesign Related Products Section with Product List ElementDesign Hero Section with Hero Banner ElementDesign Slideshow with Hero Banner & Carousel ElementDesign Volume Discount Bundles Section with Row & Product ElementDesign a Volume Discount Bundle Section with Product Bundle ElementDesign In-line Countdown Timer in Announcement BarDesign Shipping Estimation with Delivery Date elementDesign Testimonial Section with Carousel ElementDesign Opt-in Email Section with Newsletter & Popup ElementHero Banner Parallax ElementHow to Design an Image Gallery with GemPages?Design Contact Form Section with Contact Form ElementDesign Newsletter Signup Form Using Newsletter ElementDesign "Featured In" Brand Logos ection with Marquee ElementHow to Design an Announcement Bar Section with the Marquee Element in GemPagesCreate a Sticky SectionBasic Settings of a Page
Control Settings
Margin, Padding, Spacing & Alignment
Center the Button TextMargin, Padding, Spacing & Positioning OverviewAdd Negative Margin to An Element or SectionAdd or Remove Spacing Between ElementsChange the Gap Inside ElementHow to Align Elements in GemPagesHow to Set Element Position in GemPagesBring an Element to the Front or Back Using Z-IndexRemove Spacing between Theme Header & Page Content
Size & Dimension
Shopify Blog Image Size: The Complete Guide to Optimal DimensionsShopify Logo Guide: Sizes, Design Tips, and How to Add It with GemPagesShopify Product Image Size Guide (2026 Update)Shopify Banner Size Guide: Best Hero Image Dimensions (Desktop & Mobile)Change the Size of ColumnSize & Dimension OverviewChange the Ratio of ImageRecommended Size for Images
Custom Coding
Remove the top and bottom spacing of a 9:16 hosted video using Custom CodeRotate an Image using Custom CodeAdd a gradient overlay to Hero Banner using Custom CodeReduce the Opacity of a Hero Banner Background Using Custom CodeChange the text color of an Item List on hoverHow to Create a Right-to-Left Layout for the Item List ElementChange the Placeholder Text Color in Email & Text Field ElementsHow to Add a Strikethrough Text in the Item List ElementHow to Add Rounded Corners to the Dynamic Checkout Button Using CSS CodeHow to Add Custom Text to the Delivery Date ElementHow to Add Background Color to a Countdown TimerHow to Show Countdown Timer Text and Number in One LineHow to Add Colons Between Countdown NumbersHow to Change the Background Color of a Checkbox ElementHow to Change the Default Placeholder Text of a Dropdown ElementHow to Change the Background Color of Email FieldHow to Center Placeholder Text in Contact Form FieldsHow to Left Align Carousel DotsHow to Change Contact Form Text Color Using Custom CodeHow to Change the Background Color of a Text Area in the Contact Form ElementHow to Make Content and Video the Same Height in CarouselHow to Hide Carousel Arrows Using Custom CodeHow to Make Carousel Navigation Dots Transparent with a White Border How to Add a “Load More” Button for Article ListHow to Replace Carousel Dots with Navigation Buttons (Arrows) Using Custom CodeHow to Fix Right Shadow Setting Not Displaying in CarouselHow to Add Shadow to Button Text Using Custom CodeHow to Change Icon Color in Button Element Using Custom CodeHow to Change Icon Size in Button Element Using Custom CodeCustomize Style of Element with Custom CSS & Javascript CodeAdd Extra CSS Class to Element
Elements
Basic Elements
Update Outdated Elements in GemPagesRemove WhatsApp Icon on My HomepageCSS Colors Guide: How to Use CSS to Style Backgrounds in GemPagesVideo Banner ElementLine (Divider) ElementText Block ElementHeading ElementButton ElementImage ElementProduct Add-to-Cart Button ElementIcon Element Icon List ElementVideo ElementSticky Back to Top Element
Product Elements
Create a Sticky Add-to-Cart Button Directing to the Checkout PageHow to Display Product Images Based on Selected VariantsHow to Use a Button to Trigger My Checkout PageAdd Cart Button Above the Product ImageAdd a Collection to Your Landing PageDisplay Dynamic Product Content in GemPagesTag Product as “Sold Out” in GemPagesProduct ElementProduct List ElementProduct Add-to-Cart Button ElementProduct Image ElementProduct Title ElementProduct Description Element Product Vendor ElementProduct SKUProduct Price ElementProduct Quantity ElementProduct File UploadBundle Discount ElementProduct Badge ElementRelated Products ElementProduct View More ElementDiscount Tag ElementDynamic Checkout Button ElementProduct Custom Field ElementProduct Variants and Swatches ElementCountdown Timer Element
Page Designs
General
Create a Social Sharing section on Your PageHow to Set the Shopify Social Preview Image (OG Image) in Shopify and GemPagesHow to Display Products in Bestselling Order Using GemPagesHow to Change a Hamburger Menu to a Horizontal Menu in ShopifyHow to Create a Digital Products Store on Shopify and GemPagesHow to Use Complementary Products in Shopify & GemPagesHow to Use CSS Gradients for Backgrounds in Shopify & GemPagesHow to Trigger a Popup via HyperlinkHow to Create a Shopify Print on Demand Store with GemPagesHow to Create a Shopify Slider on Mobile with GemPages V7Understanding the Shopify Page LimitShopify Status Page: What It Is and Why It Matters (for GemPages Users)Create a Shipping Progress Bar in GemPagesCreate a Shopify One-Product Store with GemPagesHow to Create a Video Pop-UpHow to Add a YouTube Short to Your Shopify PageHow to Convert a Collection Page to Another Page TypeHow to Customize Your Shopify Checkout PageHow to upload a transparent logo?How can I duplicate a page?How to Create a New Page in GemPagesEdit Shopify Original Templates with GemPagesChange Page TypeImport and Export TemplatesSave a Section to Template LibraryInsert Theme Section into my Shopify ThemeWhat is a Section and How Many can I Create within a Page?Shopify Section LimitsCreate Global Section with Theme SectionImport/Export a Page from Another Shopify Store
Homepages
Use My Homepage as the Product PageHow to Set Your Landing Page as the HomepageHow to Create a New HomepageReplace Default Homepage with GemPages HomepageAdd Instagram Feed to Homepage with InstafeedLink Button to Product Detail Page with Product View More ElementCreate a Featured Collection List Section with Hero Banner Element
Collection Pages
Troubleshoot: Collection Not Showing on GemPages Collection PageHow To Assign a Collection to a Collection PageReplace your Default Collection Page with GemPages Collection TemplateDynamically Display Collection Banner Based on Each CollectionAdd Collection Pagination with Collection Paginator ElementHow to Create Product List with Prodct List ElementCreate a Collection Toolbar with GemPagesAdd a Product List Using the Product List ElementCreate a New Shopify Collection Page
Product Pages
Create an Information Box for Multiple Products in GemPagesCreate a “Remind me when it’s back in stock” MessageCreate a Popup on The Product PageAdd Cart Button Above the Product ImageHow to Add Product Recommendation on Shopify & GemPagesHow to Mark Products as Sold Out with GemPages on ShopifyHow to Change Shipping Cost/Set Postage Cost on ShopifyDesign Video Layout for Product PageHow to Update All Product Pages using Product Page Template?Delete a Section from Your PageHow to Make Product Image Full-ScreenHow to Display Product Price and Compare-at Price on the Same LineCreate Product Add-Ons on Your Product Page Using GemPagesHow to Make a Product Page Using GemPages TemplatesHow to Edit Shopify Default Product Page with GemPagesAdd Shopify Reviews & Star Ratings to Your Product PageHow to Add Related Products with Product List ElementAdd Size Chart to Your Product PageCreate a Personalized Product Page with Custom Options and File UploadDisplay Compare Price with Price ElementAdd Payment Icons Under the Add to Cart ButtonHow to Add Subscription Widget to Product PageHow to Create a New Product PageRedirect to Checkout after Adding to CartAdd a Wishlist Button to Your Product PageOpen Cart Drawer or Slide Cart after Adding to CartAdd GIFs to Your PageUnderstand Product Page vs Product TemplateUnderstand Collection Page vs Collection TemplateCustomize Shopify Product Details on your PageAssign Products to a Template in GemPagesReplace your Default Product Page with GemPages Product PageHow to Add Product Metafields to Your Shopify PageCreate a Product BundleEmbed a Custom Video on your Page
Subpages
Add an Appointment Booking PageDesign a Shopify FAQs pageHow to Create a Coming Soon Page?How to Create an FAQ Page for Your Shopify Store with GemPagesHow to Create a Testimonial Page on Shopify Using GemPagesDesign a Shopify About Us pageCreate an Advertorial or Listicle PageDesign a Better Contact Us with GemPagesDesign a Better About Us Section & Page with GemPages
Previewing & Publishing
Go Live & Make Default
How to Publish a Landing Page?Make a Default HomepageWhat Happens When I Change the Theme?Make the Page Live on the StoreUse a GemPages Product Page Template for All Products in Your Shopify StoreWhat is a Default Page and How to Change It?Use Landing Page as Home Page or Product Page and vice versaUse the Page Built by GemPages as My Home PageSet a GemPages Page as DefaultRestore your Deleted PageLink your Page to Shopify MenuUnable to Publish my PageUnpublish a Page Designed with GemPagesLink your Menu Items to Shopify's Header and Footer
Shopify & Themes
Shopify Data
How to Adjust Your Font Size with CSSShopify PaymentsHow to Set Up Free Shipping in Shopify and Display It in GemPagesConnect Your Shopify Domain to a GemPages PageHow to Integrate Hotjar with Your Shopify StoreHow to Add and Display Variant Metafields in GemPagesHow to Change CSS Text Size in ShopifyImage Editor for ShopifyAdd Shopify SKUs for My ProductsEnable Apple Pay for My Shopify StoreHow to Set Up Automatic Discounts in My ShopifyShopify Inventory: How to Manage and Track Stock EffectivelyProtect Forms from Spam and Bots in GemPagesWhere is the Data Saved After Visitors Submit a Form?Grant Shopify Collaborator Access for TroubleshootingShopify Translate & Adapt
App Integrations
Conversion
How to Integrate Hotjar with Your Shopify StoreHextom: Countdown Timer BarSEOAnt ‑ Sticky Add To CartBest Buy FullfilmentSA Variant Image AutomatorSwym Wishlist PlusSticky Cart: Slide Cart DrawerSwish (formerly Wishlist King)StarApps Variant ImageReConvert Upsell & Cross SellGrowave: Loyalty & Wishlist +Infinite Product OptionsMBC Bundle AppQikify - Slide Cart, Sticky Add To CartPC ‑ Custom Product Options (formerly Product Options & Customizer)MaxBundle - Product BundlesUpsell & Cross Sell - SelleasyFly: Bundles & Quantity BreaksSimple Bundles & KitsFBP | Fast Bundle Product (formerly Fast Bundle: Bundles Discounts)Unlimited Bundles & DiscountsEB | Easy Bundle Builder (formerly Easy Bundle Builder)Shopify SubscriptionsRecharge SubscriptionsShopify BundlesReleasit COD Form & UpsellsShopify Search & DiscoveryEasySell COD Form & UpsellsSlide Cart Drawer by AMPQikify Upsell BOGO & Free GiftWiser Product RecommendationCross Sell & Upsell by SSCqikify Sales Pop up & ProofBundler - Product BundlesFrequently Bought TogetherWide Bundles - Quantity Breaks
Reviews
How to Use the Trustpilot Reviews App with GemPagesKlaviyo ReviewsOkendo: Reviews & LoyaltyTrustShop: Product ReviewsMAG: Product ReviewsTrustReviews: Product ReviewsOpinew Product Reviews App UGCYotpo Product Reviews & UGCAli Reviews: AI Product Review (formerly Kudosi)Air: Product Reviews app & UGCGoogle Reviews by ReputonGoogle Reviews & Social Proof (formerly Tagembed‑Social Post & Review)Junip ‑ Product Reviews & UGCReviewXpo Product Reviews AppTrustWILL Product Reviews (formerly Trustoo AI Product Reviews App)Fera Product ReviewsLAI Product Amazon ReviewsRyviu: Product Reviews AppRivyo: Reviews & Loyalty AppLoox ‑ Visual Product ReviewsLoox ‑ Visual Product ReviewsStamped Reviews & LoyaltyJudge.me Product reviews
Store Designs
EcoBoostify Shop Videos ReelsShopify Forms AppKiwi Size Chart & RecommenderGLO Color Swatch & BundlesProtect Forms from Spam and Bots in GemPagesEssential Announcement BarBF Size Chart & Size GuidePOWR Contact Form BuilderHulk Product OptionsSEOAnt ‑ Trust Badges & IconAvis Product Options, VariantsSmartviewer: Quick ViewHulk Form BuilderSalesPop: Order & Sales PopupWilldesk: Live Chat&AI ChatbotPowerful Contact Form BuilderGlobo Product Options, VariantSwatch King: Variants OptionsNotify! Back in Stock | PreOrderTepo Custom Product Options VariantShopify Search & DiscoveryEasify Product Options VariantBUCKS Currency Converter PRO++O:Request a Quote ‑ Hide PriceKing Product OptionsCSC: Size Chart & Size GuideKaching Bundle Quantity BreaksSEOant ‑ Trust Badges & Icon (Trust Me)SC Product OptionsSearchanise Search & Filter
Sales & Marketing
WC Wishlist & Back in StockAppstle Loyalty Reward ProgramAOV.ai Bundles UpsellZotek TikTok Pixel Meta Pixel FeedSeguno Popups & Formswetracked.io ConnectBLOY Loyalty Program & RewardsCartly Slide Cart DrawerUpPromote Affiliate MarketingTrustedSite ‑ Trust Badges ES Back in Stock Notify Me!How to Integrate Microsoft Clarity with ShopifyAlso Bought CBBConversion Bear Trust BadgesSeguno Email MarketingAfterShip Email Marketing, SMS Instagram Feed Instafeed IGHulk Form BuilderWilldesk: Live Chat&AI ChatbotTrustoo Loyalty Program Reward (formerly Loloyal: Loyalty and Referrals)Boost AI Search & FilterVariant Option Product OptionsGoodAPI Plant Tree Clean OceanFirepush – SMS & Web PushTA Product Labels & Badges (formerly BSS: Product Labels & Badges)Hextom: Ultimate Sales BoostWhatmore Shoppable Videos+ReelRapi Bundle Quantity BreaksAppointment Booking CowlendarWOD: PreOrder NowPreorder Wolf | Pre order nowKoala Bundles Volume DiscountsBON: Loyalty Rewards ReferralsShopify Inbox Fordeer Product Labels & BadgesSEO Checker feature powered by Avada SEO SuiteVitals: Reviews, Bundles, AIKlaviyo: Email Marketing & SMSPushOwl: Web Push NotificationsSearchPie: SEO, Speed & SchemaKlarna Onsite MessagingMailchimp Email MarketingOmnisend Email Marketing & SMSInstafeed ‑ Instagram Feed
Troubleshooting and FAQs
Horizontal Scrolling on Mobile: Causes & How to Fix It in GemPagesTroubleshooting: GemPages Error CodesTroubleshoot: Interaction Not WorkingTroubleshooting: GemPages Error MessagesHow to Access Your Published Pages Built with GemPages?Troubleshoot: Collection Not Showing on GemPages Collection PageMy design does not look good on mobileWhy Is My Variant Picture Not Showing When I Select It?Apps Are Not Showing on My GemPages Page – TroubleshootingTroubleshoot: Video Not Playing on Mobile DevicesTroubleshoot: My Pages Look Inconsistent Across DevicesTroubleshooting: GemPages Page Not Saving ChangesCan't Preview Store on Shopify - TroubleshootingCart Drawer Doesn't Show on Shopify – TroubleshootingTroubleshoot: My Product Page Look Different After PublishingWhy Isn’t My Landing Page Loading on My Site?Why Is My Published Page Showing as Empty?Why My Product Page Not Showing Products?Fonts FAQsUpdate Your Product Price and Currency FormatHow to Set Up a Shopify Cart Drawer with GemPages
Custom Coding
How to Add Background Color to a Countdown Timer
This article shows you how to add a background color to a Countdown Timer element in GemPages. There are 2 methods you can use depending on your setup and customization needs: Option...
How to Show Countdown Timer Text and Number in One Line
The Countdown Timer element is one of the most popular elements in GemPages for creating urgency and boosting conversions on Shopify landing pages, product pages, and promotional campaigns. By default, when you...
How to Add Colons Between Countdown Numbers
By default, the Countdown element in GemPages displays each time unit (Days, Hours, Minutes, Seconds) separately without separators between them. If you want your countdown timer to look cleaner and more professional,...
How to Change the Background Color of a Checkbox Element
Customizing the Checkbox element background color is a simple way to create more visually consistent and professional forms in your Shopify store. In this tutorial, you’ll learn how to change the background...
How to Change the Default Placeholder Text of a Dropdown Element
Customizing the default placeholder text of a Dropdown element can help make your forms clearer, more professional, and easier for customers to understand. Instead of using generic placeholder text, you can display...
How to Change the Background Color of Email Field
Your form design plays an important role in how professional and trustworthy your store looks. A simple change like updating the background color of an Email Field can help: Match your brand...
How to Center Placeholder Text in Contact Form Fields
When building contact forms in GemPages, you may want the placeholder text inside your Email Field or Text Field to appear centered for a cleaner and more balanced design. By default, placeholder...
How to Left Align Carousel Dots
By default, Carousel dots in GemPages are usually centered below the slider. However, depending on your layout and design style, you may want to align the dots to the left side instead....
How to Change Contact Form Text Color Using Custom Code
Customizing your Contact Form design helps create a more consistent and professional storefront experience. In some cases, you may want to change the text color inside form fields to better match your...
How to Change the Background Color of a Text Area in the Contact Form Element
Customizing the background color of a text area can help your contact form better match your store branding and improve the overall user experience. In this article, you’ll learn how to change...
Start selling