# You've come to the right place Find help to make the most of Fluorescent themes on Shopify. {% columns %} {% column %} ### Help centers {% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %}

				Cover image
Section Studio App			/spaces/wW8WoofsfSzp49h7DuLl	/files/FcbzabBzYbcyypulTRYG
Eclipse	Ripple, Coastal		/spaces/HUe2h5JnXOGnUNdkJwav	/files/YsHrPUObYurGNkNtpAxO
Stiletto	Tapestry, Glimmer, Linen, Luster	Stiletto	/spaces/hnqe0uck0ozZhJ77wGXt	/files/HKFJVYFKLg53mLPA7a5f
Cornerstone	Barista, Botanical, Glow, Origami		/spaces/yt3Wwaqhge0XvrXmVj7D	/files/Qj4vdoucLKTN2yzeEyPh	Cornerstone
Lorenza	Suede, Tincture	Lorenza	/spaces/l6iv1HA2gJCuwR5V6stX	/files/3Evde2j5bPATcWh6uiev
Spark	Foundation, Trendsetter	Spark	/spaces/3iiuvh8UrcOxEOQkY2iO	/files/UrnBKjEtSXKOTytvr8mX

Did you buy your theme before 2022?

You may have a *legacy* or *vintage* theme, built before "Online Store 2.0" (OS2). You may need to upgrade for support.\ \ [Visit legacy theme help center](https://fluorescent.gitbook.io/legacy-themes/)

Are you using Ira or Context?

These themes are no longer sold or supported. You can still find the archived documentation. [Ira help center](https://help.fluorescent.co/v/ira) | [Context help center](https://help.fluorescent.co/v/context)

### Request features Join our community by making feature requests. Popular requests will be considered for future theme updates.


Eclipse	https://eclipse-theme.nolt.io/
Stiletto	https://stiletto-theme.nolt.io/
Cornerstone	https://cornerstone-theme.nolt.io/
Lorenza	https://lorenza-theme.nolt.io/
Spark	https://spark-theme.nolt.io/

*** ### Get support {% columns %} {% column %} We're here to help. Our Support team is available **Monday to Friday, 10AM to 6PM PST** (excluding statutory holidays). {% endcolumn %} {% column %} Contact us {% endcolumn %} {% endcolumns %} # Theme Comparison All [Fluorescent themes](https://themes.shopify.com/designers/fluorescent) offer their own unique styles, settings, and features so you can find the perfect match for your brand and store. See the full list of available features below or view our theme demos to see them in action:


Eclipse	https://themes.shopify.com/themes/eclipse
Cornerstone	https://themes.shopify.com/themes/cornerstone
Stiletto	https://themes.shopify.com/themes/stiletto
Spark	https://themes.shopify.com/themes/spark
Lorenza	https://themes.shopify.com/themes/lorenza

## Header *** The **Header** appears at the top of every page. All themes include options to configure header styles, navigation menus, and search, in addition to specialized features. ### Announcement bar

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Announcement bar	■	■	■	■	■
Info popup		■
Sticky bar	■		■
Scrolling style	■

### Layout and styles

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Drawer menu	■			■	■
Featured link		■
Impact logo	■
Language selector	■	■	■	■
Layout options	■	■	■	■	■
Mega menu	■	■	■	■
with promos	■	■	■	■
Collection images		■
Mobile menu images		■	■
Secondary menu			■		■
Social icons		■	■	■
Sticky header	■	■	■	■	■
Transparent header	■	■	■	■	■

### Predictive search

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Quick search	■	■	■	■	■
Product type filter		■
Promoted (Quick) links	■	■	■
Suggested terms		■

## Sections *** All themes offer a unique set of **Sections** to design rich promotional content and a great shopping experience for all your pages. ### Marketing sections Use text, images, and video to tell the story of your brand and products.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Blog posts	■	■	■	■	■
Collapsible rows (Q&A)	■	■	■	■	■
Contact form	■	■	■
Featured (Quick) links	■	■
Gallery				■
Gallery carousel			■
Grid (Mosaic)	■	■	■	■	■
Icons with text columns	■	■
Image compare			■
Image hero	■	■	■	■
Image hero split			■
Image with features					■
Image with text	■	■	■	■	■
Image with text split		■	■	■
Inline features					■
Logolist					■
Map				■	■
Multi-column	■	■	■
Newsletter	■	■	■	■	■
Newsletter (compact)		■	■
Quotes			■	■	■
Rich text	■	■	■	■	■
Scrolling content	■	■	■
Slideshow	■	■	■	■	■
Slideshow split				■
Social proof					■
Testimonials		■	■	■	■
Text columns w/ images				■	■
Video	■		■	■	■
Video hero	■	■	■	■	■
Video with content	■	■	■
Video with content split		■

### Merchandising sections Showcase your products and collections to get customers shopping.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Collections list buttons		■
Collections list grid		■	■	■	■
Collections list slider		■	■	■
Feat. collection with media		■
Feat. collection grid	■	■	■	■	■
Feat. collection slider	■	■	■	■	■
Featured product	■	■	■	■	■
Recently viewed products		■	■
Shoppable image (hot spots)			■	■	■
Shop the look	■		■
Shoppable feed	■
Tabbed collections		■

### Promotional sections Highlight sales, promotions, and events.

Feature	Eclipse	Cornerstone	Stiletto	Spark
Countdown banner		■	■	■
Countdown bar		■	■
Events			■	■
Promotion grid		■
Promotion bar			■
Promotion banner			■
Quick links	■	■
Sales banner		■	■

## Collection page *** Every theme's **Collection page** has a customizable grid with advanced filters that makes it easy to discover your products and add them directly to your cart.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Alternate templates	■		■
Banner image	■	■	■	■	■
Filtering	■	■	■	■	■
Drawer	■		■		■
Filter groups	■	■
Filter search		■
Sidebar		■		■
Price range	■	■	■	■	■
Swatches and Chips	■	■	■	■	■
Sticky filter bar	■	■	■	■
Pagination	■	■	■	■	■
Click to load		■	■	■	■
Infinite		■	■	■	■
Paginated	■	■	■	■	■
Product card swatches	■	■	■	■	■
Product layout	■	■	■	■	■
Grid	■	■	■	■	■
List		■
2-Column mobile	■	■	■	■
Promotion block	■
Quick shop	■	■	■	■	■
Custom template		■	■
Secondary image (hover)	■	■	■	■	■
Product badges	■	■	■	■	■
Sale + Sold-out badge	■	■	■	■	■
Custom badges		■	■

## Product page *** Every theme's **Product page** includes comprehensive settings and features like **Recommend products**, **Dynamic checkout**, and **Color swatches**. Each theme provides their own unique layout, styles, and additional features.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Alternate templates	■		■	■	■
Blocks	■	■	■	■	■
Border	■	■	■	■	■
Collapsible rows	■	■	■	■	■
Complementary products	■	■	■	■	■
Custom option	■	■	■		■
Customer support		■
Image	■	■
Image with text		■		■
Information popup	■	■	■	■	■
Payment and trust	■	■	■	■	■
Shipping estimator				■	■
Icons with text	■	■	■
Text block	■	■	■	■	■
Text list with icons		■	■
Text with video				■
Breadcrumbs		■	■	■	■
Custom Liquid	■	■	■	■
Dynamic checkout button	■	■	■	■	■
Gift card recipient form	■	■	■	■	■
Layout options	■	■	■	■	■
Full width	■			■
Column (List)	■		■	■
Grid	■		■	■	■
Media gallery size	■	■	■
Thumbnail position	■	■		■
Local pickup banner	■	■	■	■	■
Media grouping	■	■	■		■
Product image zoom	■	■	■	■	■
Product tabs		■	■
Rating stars	■	■	■	■	■
Recommended products sidebar		■
Recently viewed products			■	■
Recommended products	■	■	■	■	■
Sibling product swatches	■	■	■		■
Social share icons	■	■	■	■
Sticky add-to-cart	■	■	■		■
Stock level indicator	■	■	■	■	■
Variant chips	■	■	■	■	■
Custom layout	■	■	■
Variant Swatches	■	■	■	■	■
Custom styles	■	■	■
Custom colors	■	■	■		■
Dynamic option availability	■	■	■		■

## Page templates *** All themes provide **Templates** for every default page type and supports multiple templates for products, collections, pages, and blogs. Some themes have additional specially-designed templates:

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
About	■		■	■	■
Blog pages	■	■	■	■	■
Blog posts	■	■	■	■	■
Contact	■	■	■	■	■
FAQ	■	■	■		■
Events	■
Guide	■
Lookbook	■		■		■
Password	■	■	■	■	■
Search page	■	■	■	■	■
Locations			■

## Image settings *** All themes include advanced **Image settings** that give you control over the size, shape, focus, and style of your images. These settings are available on either most or select sections and pages.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Aspect ratio	■	■	■	■	■
Color overlay (tint)	■	■	■	■	■
Corner rounding	■
Custom height	■	■	■	■	■
Custom width	■	■	■	■	■
Focal point	■	■	■	■	■
Gradient overlay	■	■	■	■	■
Media fit		■	■	■	■
Mobile-specific images	■	■	■	■	■
Animation	■	■	■

## Cart *** All themes provide settings for the **Cart** page and **Quick Cart** with some offering additional features.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Automatic cart updates	■	■	■	■	■
Cart notes	■	■	■	■	■
Cross sells	■	■	■
Free shipping bar	■	■	■
Low inventory warning		■	■
Quick cart	■	■	■	■	■
Empty cart promotion	■	■	■
Recently viewed products				■

## Popup *** Every theme includes a customizable **Popup** that automatically displays a newsletter signup to keep customers engaged.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Popup	■	■	■	■	■
Age verification		■	■	■	■
Countdown		■	■
Promo	■	■	■
Sign up	■	■	■	■	■
Behavior settings	■	■	■
Sticky tab	■	■	■

## Footer *** The **Footer** appears at the bottom of every page. All themes offer features to help customers continue shopping, learn more about your store, and keep in touch.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Content blocks	■	■	■	■	■
Text			■	■	■
Text with image	■	■	■
Links	■	■	■	■	■
Newsletter	■	■	■	■	■
Country selector	■	■	■	■	■
Language selector	■	■	■	■	■
Payment icons	■	■	■	■	■
Social icons	■	■	■	■	■

## Theme code *** Most themes include standalone files for CSS and JS customizations, as well as the original unminified Theme JS file that can be enabled.

Feature	Eclipse	Cornerstone	Stiletto	Lorenza	Spark
Custom CSS	■	■	■	■	■
Custom JS events	■	■	■	■	■
Theme JS (unminified)	■	■	■	■	■

# Get started Install your free trial of Eclipse and start customizing your storefront. When you're ready, purchase your copy and hit publish! {% stepper %} {% step %} #### Choose theme preset Choose from 4 presets with ready-made layouts and styles. All presets include the same features and settings. The demos provide just a few examples — you can customize Eclipse to create storefronts as unique as your business.

{% endstep %} {% step %} #### Start free trial Try Eclipse as long as you like before deciding to purchase. Click **Try theme** on the theme preset listing. In your **Theme library**, click **Customize** to open the theme editor. All your changes will be saved when you buy the theme. {% endstep %} {% step %} #### Buy and publish hen you're ready to publish, go to your theme library and click **Buy** on your theme trial version. You can only [publish themes](https://help.shopify.com/en/manual/online-store/themes/managing-themes/publishing-themes) to your online store that you've purchased. {% hint style="info" %} **Licensed themes are purchased exclusively through the Shopify Theme Store.** Unlicensed themes are not supported. If you downloaded the theme from another vendor or plan to use the theme on another store, you need to take immediate action to purchase a legal licensed version. [Learn more](/eclipse/get-started/theme-license) {% endhint %} {% endstep %} {% endstepper %}


Upgrading from an another theme?	Read our theme migration guide for advice on how to transfer your content.

# Migrating to Eclipse Moving from one theme to another might feel like starting from scratch, but it doesn't have to! We'll cover what you need to know about changing themes, and how you can approach setting up your theme to make it more efficient. ## What do I need to transfer? *** Content and settings that were set up in the theme editor cannot be transferred automatically. You will need to set up sections for each template and apply new theme settings.


What you need to set up	Theme settings Templates Sections Custom code Apps Dynamic sources
What you DON'T need to transfer	Products Collections Pages Blog posts Files Metafields

## Before you start *** To get started, open the editor for both the old and new theme.


Open both theme editors	Open your old and new theme in two separate windows side-by-side.
Use preview inspector	Enable the inspector to easily select, edit, and add sections. You can also move, duplicate, and hide sections. Learn more.

## Set up Eclipse *** To make setting up your theme easier, start by just adding sections and content before focusing on specific settings and styles. We recommend following the order below to set up your theme: {% stepper %} {% step %} #### [Add sections](#add-sections-1) Set up each section and copy over any text, images, and videos. Start with the home page, then set up other templates. {% endstep %} {% step %} #### [Edit theme styles](#edit-theme-styles-1) Apply global styles and options to your theme, including fonts and colors. {% endstep %} {% step %} #### [Edit section styles](#edit-ection-styles) Return to your new sections and customize their settings and styles. {% endstep %} {% step %} #### [Set up apps and custom code](#set-up-apps) You may need to re-add apps and app blocks and manually transfer any custom code. It's good to keep this as the last step to properly test any customizations. {% endstep %} {% endstepper %} ## Add sections *** Add and rearrange the section you want to use. You can check out the full list of [Eclipse's theme sections](/eclipse/sections/overview). We recommend **hiding sections instead of deleting them**. Not only will this be faster but you can avoid making mistakes that you can't undo. ### Add text *** With your two windows side-by-side, select and copy text from your previous theme and paste theme into the corresponding fields. {% hint style="info" %} **Can't find where to add content?** * There might be a similar field with a different name. For example, there may be a "subheading" instead of "text". * Click **(+) Add block** to find additional content blocks. For example, some sections have "heading" and "text" blocks. {% endhint %} ### Add images and videos *** Any images that you've uploaded to your old theme will still be in your Shopify files. Click **(+) Add image**, you can find them all in the media library. {% columns %} {% column %} {% hint style="info" %} **Tip**** — Search file names** You can copy the name of the image or video file from your old theme and paste it into the search bar.\ \ This will save you time from scrolling through your entire media library. {% endhint %} {% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} ## Edit theme styles *** After adding your content, you can apply global styles, such as colors and fonts, then follow up by fine-tuning styles for individual sections. Go to **Theme settings** in your theme editors. You can select a preset theme style, or set up your own custom branding, including colors and fonts. You will also find additional settings for products, the cart, and more. You can find a full overview in the [theme settings guide](#theme-settings). #### Quick tips


Colors To speed things along, click on the color swatches and copy the hexcode to paste into the new theme's settings.
Fonts All themes support Shopify's native font library. If you have custom fonts, see our Custom fonts guide.
Swatches Aadd the option names you were using for swatches and chips. Any custom swatch images will still be in your Shopify files. You can also add custom colors.

Colors

To speed things along, click on the color swatches and copy the hexcode to paste into the new theme's settings.

Fonts

All themes support Shopify's native font library. If you have custom fonts, see our Custom fonts guide.

Swatches

Aadd the option names you were using for swatches and chips. Any custom swatch images will still be in your Shopify files. You can also add custom colors.

## Edit section styles *** After customizing the theme settings, go back to your updated page templates to customize your sections. You can find a full list and set up instructions in the [Theme sections guide](/eclipse/sections/overview). ## Set up apps *** You may need to re-add **apps and app blocks** in the theme editor. Be sure to explore all theme features to see if what you want is already included in Eclipse. Our support cannot cover app integration or fixing issues arising from apps. Please contact the app developer for help. ## Configure custom code *** {% hint style="warning" %} When setting up your theme, make a duplicate copy as a backup to test any custom code changes. {% endhint %} If your previous theme has **code customizations**, they need to be manually transferred to the new theme. Custom code is often theme-specific and may not work by pasting code as-is. Our support cannot cover custom code or issues arising from customizations. If you need help from a developer, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co). * If you're familiar with adding code, you can use [Custom CSS in the theme editor](/eclipse/advanced/custom-css). It's more stable and you don't need to manually transfer it for theme updates. ## Explore new features *** Check out the sidebar or use the search to find features that are unique to Eclipse. You may want to start with [Sections](/eclipse/sections/overview), [Theme settings](/eclipse/theme-settings/theme-settings), [Product pages](/eclipse/product-pages/product-template), and [Collection pages](/eclipse/collections/collection-page). {% hint style="info" %} Check out Eclipse's store demos for inspiration: [*Eclipse*](https://themes.shopify.com/themes/eclipse/presets/eclipse)*,* [*Ripple*](https://themes.shopify.com/themes/eclipse/presets/ripple)*, and* [*Coastal*](https://themes.shopify.com/themes/eclipse/presets/coastal) {% endhint %} # Theme license To have a valid license, your theme must be purchased through the Shopify Theme Store. Theme licenses are valid only for the single store that it was purchased for. You may have an unlicensed theme if you bought a copy outside of the Shopify Theme Store or are re-using a theme copy for multiple stores.

Do I need to purchase a new copy for multiple stores?

Yes, theme licenses are valid only for the store it was purchased for. You must purchase the theme again through the Shopify Theme Store. If you're opening a new store to replace your old store, you can learn about [transferring your theme license](#transferring-theme-licenses).

## What if I have an unlicensed theme? Unlicensed themes are ineligible for support and updates, and it can put your store at risk of removal by Shopify. {% hint style="warning" %} Continued use of an unlicensed version may lead to a Digital Millennium Copyright Act (DMCA) takedown notice with Shopify, resulting in your store being taken offline. {% endhint %} ### How to license your theme We understand you may be unaware that you have a unlicensed copy, and we want you to be able to continue using Eclipse and gain access to support and future updates. You will need take immediate action, as according to Shopify's Terms of Services: > **Purchase**: Consider buying the theme for the store where you plan to use it. > > **Delete**: If you choose not to purchase the theme, then you must remove it from your theme library. > > **Transfer**: In cases where you previously purchased a theme for an old store but no longer use it there, you might be able to transfer it to your new store. ## Transferring theme licenses If you wish to transfer your theme license to a new store, you need to re-purchase the theme for the active store and remove it from the original store. Please [contact us regarding re-purchasing the theme](https://fluorescent.co/help/contact/). > You may also review [Shopify's requirements for transferring a theme](https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes#requirements-for-transferring-a-theme). ## Get a theme license for Eclipse Go to the Shopify Theme Store to [purchase a licensed version of Eclipse](https://themes.shopify.com/themes/eclipse/styles/journey). Upon purchase, you will have access to support and ongoing updates. # FAQs ### Quick start ***


Migrate your theme content to Eclipse	/pages/PVrA3sKckBPHZzGEXFsJ
Customize the overall look of your store	/pages/yjROHs2mmLirreHMftHP
Design pages with templates and sections	/pages/eecLr0hbZan6MDE21yAk

### General ***

What's the difference between theme presets?

Presets include default styles and templates based on the demos. When you install an Eclipse preset, you have access to all the same sections and features. You can recreate any feature or page found in the demos. Presets provide a starting point for customizing your store.

Why aren't changes in the editor showing on my site?

You may need to assign the template you are editing to your pages in the Shopify admin. See our guide for creating and assigning templates. If your theme isn't published yet, learn how to assign templates from unpublished themes. It's also possible you have edited a 'Context' for a specific market, so the changes will only appear when visiting your site from certain countries. See our guide for [Editing contexts for markets](/eclipse/general/editing-themes/unique-content-for-markets).

Does Eclipse support multiple languages?

Yes. Eclipse includes a language selector in the Header and Footer. You will need to use an app (like Shopify’s [Translate & Adapt](https://https/apps.shopify.com/translate-and-adapt/)) to translate your store content, and you may need to take some extra steps when setting up theme features. Learn more in our guide for [selling in multiple languages](/eclipse/general/editing-themes/multiple-languages).

Will you help customize my store?

While our Support cannot offer code customizations, we can point you to a service that does. Just let us know what you're looking for — we might even have a solution for you with our available theme features.

Do you provide refunds?

All theme sales are final and we are unable to provide refunds. As theme developers, we are not involved in billing or transactions through the Shopify theme store. Refund request need to be addressed to [Shopify’s billing team](https://https/help.shopify.com/en/support/support-type/).

### Theme features ***

How do I set up mega navigations?

Create a nested menu in the Shopify admin, then add a mega menu block to the header. See the full [mega menu guide](/eclipse/header/header/mega-menu) to learn more.

How do I add a size guide?

You can use the [variant popup link](/eclipse/product-pages/variant-options/info-popup) or [popup block](/eclipse/product-pages/product-content-blocks/popup-block) to add size guides or any other product guide with additional details for your customers.

Can I add custom fonts?

Before deciding to use a custom font, we highly recommend considering one of the hundreds of fonts in [Shopify's Font Picker](https://shopify.dev/themes/architecture/settings/fonts#third-party-hosted-fonts) as your first choice, since they are fully supported by all our themes.\ \ If you're familiar with HTML and CSS, or have a developer, it's possible to add fonts using Custom CSS. Please note the we cannot support custom code or related issues.

How do I remove the ‘Shipping’ and ‘Taxes’ messages?

Depending your store settings, default text for Shipping and Taxes appears on Cart and Product pages. Follow our guide for [Editing default theme content](/eclipse/general/editing-themes/edit-default-theme-content) to change or remove this text.

### Troubleshooting ***

Why are my swatches blank?

If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom color names much your variant names. You may also need to add custom swatches for multiple languages.

Why is the mega nav not working in other languages?

If you've translated your store using an app, make sure the "Parent dropdown link" name is not translated, as this will break the mega nav. See instructions below for fixing translated mega navigations.

How do I find the H1 heading tags?

H1 headings are generated from page titles or the store name, following Shopify's recommended SEO structure. Page titles can be edited in your Shopify admin. If you have concerns about H1 tags in your theme, see our H1 heading tags guide for answers to common questions.

# Changelog {% hint style="info" %} To access the latest features and fixes, you must [update your theme](/eclipse/changelog/update-your-theme) in the Shopify admin. {% endhint %} Eclipse was first released November 15, 2024. All theme versions are built for Shopify's latest [theme architecture](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions#features) ("Online Store 2.0"). ## 5.3.1 — Latest release *August 4, 2026* > Eclipse v5.3.1 brings updated favicon support and fixes a handful of issues. > > ### Fixes and other improvements > > * Extended favicon support for larger standard sizes (up to 48px) and iOS icon sizes (up to 180px). To take advantage of this size increase, please ensure the Theme settings > Favicon image is at least 180px. > * Fixed the collection template header content not aligning correctly on mobile. > * Fixed the filter drawers and sort menus not fully applying their color schemes. > * Fixed the Slideshow video slides sometimes pausing when changing slides quickly. > * Fixed the Free shipping bar not updating on the cart template when updating the products. > * Fixed the Contact form's select dropdown not always using the correct colours for the label and icon. ## 5.3.0 *July 9, 2026* > Eclipse v5.3.0 updates the theme to use Shopify's new customer account component. > > ### Added > > * With legacy customer accounts being deprecated, we've added the option to choose whether the new account component is used, or if customer account links just link directly to their associated page. > > ### Removed > > * The legacy customer account templates. > > ### Fixes and other improvements > > * Fixed multi-line menus in the Header not aligning correctly. ## 5.2.1 *May 5, 2026* > Eclipse v5.2.1 adds the ability to create custom product badges, and gives more control over badge displays. > > #### Added > > * The option to create custom product badges under "Theme settings > Product badges", along with the ability to customize the background and text color for "Sale" and "Sold out" badges. These can be included with: > * Product listings under "Theme settings > Product listings" > * Product templates through the "Price" and "Badges" blocks > * A dedicated "Badges" block to product templates. ## 5.2.0 *March 4, 2026* > Eclipse v5.2.0 adds a new section. > > #### Added > > * A new "Quotes" section to showcase reviews and testimonials. ## 5.1.3 *February 9, 2026* > Eclipse v5.1.3 adds support for app-triggered cart updates. > > #### Added > > * Support for a JS event that app developers can use to trigger cart updates. ## 5.1.2 *December 2, 2025* > Eclipse v5.1.2 adds a new preset and fixes a few minor bugs. > > #### Added > > * A new preset called "Purse". > > #### Fixes and other improvements > > * Fixed the product media and thumbnails sometimes not working correctly in the quick shopping modal. > * Fixed the product item quick shopping button not being responsive on mobile in some sections. > * Fixed some issues with header navigation touch interaction on larger screens. > * Fixed sibling swatches not showing on product listings if the products have no variants. ## 5.1.1 September 16, 2025 > Eclipse v5.1.1 hotfixes a template issue which may cause hidden product media by default. > > **Fixes and other improvements** > > * Fixed some templates enabling "Media grouping" by default, sometimes causing product media to be hidden by default in the product gallery. ## 5.1.0 *September 3, 2025* > Eclipse v5.1.0 adds some new fields to the newsletter signup forms, along with an important fix to the quick shopping experience in some sections.\\ > > **Added** > > * First and last name fields for newsletter signup forms.\\ > > **Fixes and other improvements** > > * Fixed there being horizontal overflow, when there are mega menus set up, for browsers that always show scrollbars. > * Fixed the "Background" setting for "Outline button" in color schemes getting the setting's default value (#000000) when it's meant to be transparent. > * We originally specified this setting to have no value (which used to be the equivalent of transparent), but this results in the default value being used now, so we've switched to specifying an actual transparent value. > * Updated the mobile quick view reveal animation. > * Fixed the max value of price range filters rounding down to the nearest dollar. > * Fixed quick shopping buttons not showing (or not showing correctly) on product cards for cart cross-sell items, the "Shop the look" and "Shoppable feed" sections, and complementary product items. ## 5.0.3 *August 10, 2025* > Eclipse v5.0.3 fixes an issue with color schemes in the theme editor. > > **Fixes and other improvements** > > * Fixed the "Background gradient" setting always getting a value applied, even if you've removed it. > * We supplied a default value for this setting and then specifically set it to not have a value for certain color schemes because we weren't aware that Shopify would use the default value if the setting value was ever blank (whether it started blank, or was edited to be blank). ## 5.0.2 *July 17, 2025* > Eclipse v5.0.2 adds new social media icons and a few small improvements, as well as fixes some minor bugs. > > **Added** > > * New [social media icons](/eclipse/theme-settings/theme-settings/social-media) for Houzz, Line, RedNote, WeChat, and Discord. > > **Changed** > > * Updated the unbranded dynamic checkout button to use the 'Accent' color for its background. > * Updated the mobile quick shopping button on product cards to use a different icon for products with variants when the type is "Quick add". This is to make it more clear that a quick view modal will open to choose variants, rather directly adding to the cart. > > **Removed** > > * The sticky Add to Cart's "Change" button when product has only a single variant. > > **Fixes and other improvements** > > * Fixed the hover animation for items in the "Shoppable feed" section not being as smooth as intended. > * Updated the "Shop now link action" setting label and options of the "Shoppable feed" section to better match the functionality. > * Fixed the quick shopping display not being correct on page load for complementary product items on the product page when there are no other sections or blocks that contain product cards. > * Fixed swatch images persisting to subsequent swatches that don't have their own image. > * Fixed the mobile menu not working correctly when reduced motion is enabled on a device. > * Fixed the image width settings for the "Image, text, and socials" block of the "Footer" section not working. > * Fixed the login modal on the password page missing some styling. ## 5.0.1 *June 19, 2025* > Eclipse v5.0.1 fixes some broken templates from the folder restructure. ## 5.0.0 *June 17, 2025* > Eclipse v5.0.0 reconfigures the theme folder structure to support changes for the Theme Store redesign. ## 4.0.0 *May 7, 2025* > Eclipse v4.0.0 introduces a new 'Shoppable feed' section, as well as more nuanced section width support and optimized image rendering. > > **Added** > > * A new "Shoppable feed" section. > > **Fixes and other improvements** > > * Improved section width settings for more alignment options with a focus on larger screens. > * Optimized responsive image sizes. ## 3.0.0 *April 2, 2025* > Eclipse v3.0.0 introduces three new sections, corner rounding control, and expands where Quick shopping is used. It also includes a wide range of fixes and improvements. > > **Added** > > * ["Icon with text columns" section](/eclipse/sections/icon-with-text-columns) > * ["Shop the look" section](/eclipse/sections/shop-the-look) > * ["Grid" section](/eclipse/sections/grid) > * The option to control [corner rounding](/eclipse/theme-settings/corner-rounding) throughout the theme. > * "Ripple" preset > > **Changed** > > * Connected Quick shopping to small product cards like Complementary products and Cross sells. > > **Fixes and other improvements** > > * Fixed the content width setting not applying properly for banners (eg. "Collection banner", "Image hero", etc.). > * Fixed spacing below "Heading" blocks sometimes being too large. > * Fixed the cart note displaying incorrectly in Chrome browsers. > * Fixed longer blog post titles possibly being cut off on the "Blog" template. > * Fixed the article title not bleeding through the hover image in the "Blog posts" section sidebar. > * Improved header loading transitions. > * Fixed incorrect non-english translation strings on the contact form. > * Fixed an issue with Mega menu promo images not being visible if the menu was opened very quickly after page load. > * Fixed the customer order table not correctly wrapping product details on medium sized screens. > * Fixed display of sales price total on customer order table on mobile screens. > * Fixed the price displays and error messages for products within Complementary products and Cross sells. ## 2.0.0 *February 11, 2025* > Eclipse v2.0.0 introduces a new "Featured links" section and a Sticky buy button within the product page. It also covers a wide range of improvements and fixes.\\ > > **Added** > > * [Sticky add to cart](/eclipse/product-pages/sticky-add-to-cart) feature within the Buy button block of the Product page. > * New ["Featured links" section](/eclipse/sections/featured-links). > > **Changed** > > * The quick shopping dialog will now respect the order of blocks as configured on the product page. > > **Removed** > > * Removed balanced text wrapping as the default for heading elements (eg. H1, H2, etc.). This now only applies to section headers. > > **Fixes and other improvements** > > * Fixed quick shopping functionality not working on recommended products when there are no other sections with product cards on the page. > * Fixed navigation dropdown hover styles not displaying correctly when the header color scheme has a dark background. > * Fixed Image and Video hero sections to include text with existing heading animations. > * Fixed the right column of the product page, on desktop, extending beyond the page width when there's a "Complementary products" block with more than 3 products. > * Fixed the "Color scheme" setting not working in the "Featured product" section. > * Included opening and closing animations for modals like Quick view and the Product page's popup links. > * Fixed sibling swatches on product cards missing spaces between words in option name. > * Fixed text in headings being clipped for some fonts. > * Fixed heading elements (H1-H6) not using the heading font in article and page content. > * Fixed long option names sometimes being cut off inside variant chips. > * Fixed the product page scrolling the media display into view on variant change for some configurations on mobile. > * Fixed an issue where header menus or scrolling on load could cause unintentional horizontal scrollbars on the page. > * Fixed the header logo not sizing correctly for some SVGs. ## 1.2.1 *December 23, 2024* > Eclipse v1.2.1 fixes issues with color schemes in the quick shopping dialog and an issue with videos not being rounded. > > **Fixes and improvements** > > * Fixed an issue with video media not being rounded that was introduced in v1.2.0. > * Fixed an issue with the quick shopping dialog buy buttons not respecting a custom background color. > * Fixed an issue with the quick shopping dialog content incorrectly showing the product page background color. ## 1.2.0 *December 17, 2024* > Eclipse v1.2.0 brings a handful of new sections to the theme, storefront translations for several EU languages, and a range of improvements and fixes. > > **Added** > > * Added [Featured product](/eclipse/sections/feature-product) section. > * Added [Scrolling content](/eclipse/sections/scrolling-content) section. > * Added [Video with text](/eclipse/sections/video-with-text) section. > * Added [Image hero](/eclipse/sections/image-hero) and [Video hero](/eclipse/sections/video-hero) sections. > * Added the option for [quick shoppin](/eclipse/products/product-listings/quick-shopping)g purchase flows, such as "Quick add" and "Quick view". > * Added storefront translations for German, Spanish, French, and Italian languages. > > **Changed** > > * Updated preset fonts to account for recent deprecated fonts. > > **Fixes and improvements** > > * Improved how the Header handles tablet-sized screens when language and/or country selectors are enabled. > * Improved the clarity of swatch images in both the product listings and the product templates. > * Improved the stability of the product template while thumbnails and images are loading in. > * Applied a better loading state to product thumbnails on the product template. > * Changed default Sticky effect on product page from "Gallery" to "Product details" for better usability. > * Fixed the size range for product listing swatches being too large. The featured image deserves some space too. > * Fixed header menu items not showing when the header is transparent and a mega menu is open. > * Fixed an issue where product media could load incorrectly sized images. We've asked it to stop. > * Fixed an issue on Apple WebKit browsers (eg. Safari v16) where animated headings and text would render extremely small. No one has eyes that good. > * Fixed an issue on Apple WebKit browsers (eg. Safari v18) where animated headings and text would jitter when the page was scrolled. > * Fixed some blocks on the Password template not respecting the animation settings. ## 1.1.2 *December 10, 2024* > Eclipse v1.1.2 brings key fixes to dropdowns and some mobile sliders.
> > **Fixes and improvements** > > * Fixed "Sort by" dropdown rendering off-screen on desktop Chrome browsers. > * Fixed the multi-column section sometimes not appearing on iOS devices when the mobile slider is disabled. > * Improved positioning of localization dropdowns in the header and footer. ## 1.1.1 *November 26, 2024* > Eclipse v1.1.1 fixes a visual bug in the Collection filter drawer.\\ > > **Fixes and improvements** > > * Fixed filter labels sometimes not using the available space in the filter drawer. ## 1.1.0 *November 25, 2024* > Eclipse v1.1.0 adds a few product page blocks and fixes some minor bugs. > > **Added** > > * A "Product rating" block to the product template. > * An "Inventory levels" block to the product template. > * A "Custom option" block to the product template. > > **Fixes and other improvements** > > * Fixed header menu items not showing when the header is transparent and a mega menu is open. > * Fixed an issue with the product template where removing the pickup availability drawer would break the product form. > * Fixed the product rating showing too many decimal places. Turns out you can be too precise. > * Fixed the mobile menu behaving unexpectedly when two links share the same name. > * Fixed the language and country selectors in the mobile menu not being able to scroll to the bottom of the list. > * Fixed accordions (eg. "Collapsible row" blocks, "Collapsible content" sections, filter drawer groups, etc.) not aligning properly in Chrome. > * Fixed the content width setting of the "Image with text" section not applying correctly. > * Fixed the "Custom width" setting not working for the "Impact logo" section. ## 1.0.0 *November 15, 2024* > The official launch of Eclipse. # Update your theme We regularly update Eclipse with changes and improvements. Update your theme version to gain access to new features and ensure better stability and support. You will be notified of all theme updates in your **Theme library**. Click the notification to view the update details. * Click **View release notes** to learn more about the update. * Click **Add to theme library** to add an unpublished copy. {% columns %} {% column %} **Automated updates** Themes automatically update for minor fixes or security issues. Any customizations made using the theme editor will be included. [Learn more](https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes) {% endcolumn %} {% column %} **Manual update required** If you or an app has made any custom code changes, you will need to manually transfer theme files. {% endcolumn %} {% endcolumns %} {% hint style="info" %} Our Support cannot cover manual theme updates, code customizations, or app integration. {% endhint %} ## Manually updating your theme *** If your theme does not automatically update, or if there are any code changes made to your theme copy, you will need to copy any updated files from your current copy to the new theme version. The following guide shows how to transfer your theme settings and templates faster and efficiently. ### Step 1: Add updated theme version *** First, you will need to add the latest theme version before transferring your settings and templates. In your **Shopify Admin**: 1. Click **Add to theme library** to add the updated version of the theme to your theme library. The updated theme copy will have the theme name prefixed with "Updated copy of". 2. If there's no **Add to theme library** button, you may need to install a fresh copy of Eclipse from the theme store. {% hint style="info" %} #### Recommended Add a duplicate copy of your current theme as a backup. You can rename theme copies to keep track of different versions. {% endhint %} ### Step 2: Open code editors for both themes *** Open the code editors for each theme copy in separate windows. This will make it easier to copy and paste code to the new theme version.

### Step 3: Open theme files *** Get ready to transfer your code by opening theme files for both the current and new theme version. You will need to open files for theme settings, templates, section groups, and other files with custom code. **Note**: This includes files that have been created for [customized Contexts](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/store-contextualization).

STEPS

First open files in the old theme version, then repeat these steps for the new version. 1. Open the **Templates** folder. 2. Click every **`.json`** file in the order they appear to open them in their own tab. 3. In the **Sections** folder, open files for the header, footer, and overlay sections. > * **`header-group.json`** > * **`footer-group.json`** > * **`overlay-group.json`** > You will also need to open any files created for [custom Contexts](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/store-contextualization). For example: > > * **`header-group.context.eu.json`** > * **`footer-group.context.ca.json`** 4. In the **Config** folder, click to open the **`settings_data.json`**. This file contains the theme's global settings.

### Step 4: Add missing templates or files *** If there are files that are in the old theme that don't exist in the new theme, you will need to add files with the exact same name. **Note**: This includes files that have been created for [customized Contexts](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/store-contextualization).

STEPS

For templates or files that don't already exist in the new theme, you need to create them in the code editor. 1. Click the **Templates** folder or other folder. 2. Click the **Add file** button. 3. Enter the exact same name as the file in the old theme, including the file type. Eg. `page.landing.json` You now should have your theme files opened and ready for each theme version.

### Step 5: Copy old theme files into new theme files *** We will now copy and paste your old theme files into your new theme files.

STEPS

1. In both windows, select the first tab with the same filename (eg. **`blog.json`**) 2. In the old theme (left window), **select all** of the file contents (**`cmd+a`** or **`ctrl+a`**) and **copy** (**`cmd+c`** or **`ctrl+c`**) the contents to your clipboard. 3. In the new theme (right window), **delete** the current code, and **paste** (**`cmd+v`** or **`ctrl+v`**) everything from your old theme. 4. Click **Save** after overwriting each file. 5. Repeat this process for all open files. To keep track, you can close each tab once you've transferred and saved the new contents. 6. Click **Save**.

That's it! Well done! Now you can close the code editors, and preview the old and new themes beside each other before publishing the new theme. # Editing themes Learn how to use the Shopify theme editor for customizing your online store templates, sections, and styles. The **theme editor** organizes all the elements of your online store in one place so you can easily design every page with theme templates, sections, and settings. * Use the **editor toolbar** to undo or redo changes, save, and publish your theme. * You can enable the **Inspector** to select, add, and move sections directly within the live preview. * Change the size of the **preview** within your theme editor. You can choose desktop, mobile, or full screen.


Edit theme settings	Customize your online store’s site-wide styles and options.	/pages/yjROHs2mmLirreHMftHP
Use page templates	Edit default page templates or create new page templates.	/pages/eecLr0hbZan6MDE21yAk
Add sections and blocks	Customize templates by adding sections and blocks in the side panel.	/pages/3wq6hFMr3k1BDOHIgjqZ


Edit default theme content	Edit your general theme content.	/pages/fsUyNSSOn5CASfK9c0im
Sell in multiple languages	Translate your store and theme.	/pages/FHP7ccxn3urxeED26zYR
Show unique content for different markets	Use Shopify's Contexts to display content based on your customer's location.	/pages/rCoSx6bc26MsWVgazOtL

# Dynamic content with metafields **Metafields** and **Dynamic sources** are Shopify features that allow you to store and display unique content for products, collections, blogs, and pages. These features are perfect for displaying specific product information — such as size guides or part numbers — for different products that use the same template. {% hint style="info" %} This guide provides a general overview of using metafields and dynamic sources in our themes. Follow the links below for instructions for using dynamic sources for specific theme features. * Collapsible row block * [Information popup](/eclipse/product-pages/variant-options/info-popup#use-metafields-to-display-unique-product-guides) (Size guide) * Complementary products * [Sibling product swatches](/eclipse/product-pages/sibling-product-swatches) {% endhint %} ### Watch video tutorials Watch the step-by-step tutorials for the Metafields. The first video provides a general introduction, and the second video shows you how to use metafields for unique size guides and complementary products. {% embed url="" %} {% embed url="" %} ## Overview *** If you want to display custom content for different pages, you can use Shopify's **metafields** and **dynamic sources**. * **Metafields** are extra data fields in your Shopify admin that can store additional information and content for products, collections, and pages. * **Dynamic sources** are what connect metafields to templates and sections. You can add dynamic sources in your theme editor to automatically display metafield content for specific products, collections, or pages. {% hint style="success" %} Metafields and dynamic sources are a Shopify feature. Our themes use these features but they are controlled by Shopify. For a full overview, see [Shopify's metafields guide](https://help.shopify.com/en/manual/metafields). {% endhint %} ## General steps *** Shopify's **Metafields** lets you store additional information about your products in your Shopify admin. You can create custom fields to hold different types of information. Once your metafields are set up, you can use **Dynamic sources** in your theme editor to connect metafields to your templates. Dynamic sources automatically use the content entered in the metafield for each product. {% stepper %} {% step %} #### Create metafields Go to **Settings > Custom data** to create a metafield for a part of your store. The most common metafields are for **Products** and **Collections**. Add a new **definition** with a **name**, then select the **type** of metafield. The type determines what kind of information the metafield will hold: e.g., text, URLs, or products. > See Shopify's list of [Metafield content types and values](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/metafield-types) > {% endstep %} {% step %} #### Add content to metafields The metafields that you create will appear on the admin pages of your products, collections, or other parts of your store. You can use [Shopify's bulk editor ](https://help.shopify.com/en/manual/custom-data/metafields/bulk-edit-metafields)↗ to add metafield entries for multiple products or collections. {% endstep %} {% step %} #### Insert metafields as dynamic source Now that the **Metafields** of your products have content, you can connect them to your theme to automatically show the correct information for different parts of your store. In the theme editor, click on a block or section to open the settings. Click an **Insert dynamic source** button next to a field or setting, and select your metafield. The setting must support the **type** of metafield: e.g., heading fields require a single-line text metafield. {% endstep %} {% endstepper %} # Edit default theme content Learn how to use Shopify's default theme content editor to change the wording of your online store, such as shipping and taxes messages, footer text, and button labels. Your theme may include text that cannot be changed in the theme editor. Instead, you can use the **default theme content editor** in the Shopify admin. {% hint style="warning" %} The default theme content editor is not available in free trial mode. {% endhint %} {% stepper %} {% step %} #### Open default theme content editor In your theme editor, click the **Actions (****...****)** button and select **Edit default theme content**.

{% endstep %} {% step %} #### Search for default text Use the **filter bar** to search for the text you want to change, or select a category to filter default text by different areas of your theme. {% endstep %} {% step %} #### Edit or remove text Edit the text you want to change in the available fields. To remove default text, replace the text in the field with a single space. {% hint style="danger" %} **Do not edit** text inside curly brackets **`{{ }}`** or HTML tags (**``** and **``**). Editing them will break theme functionality. {% endhint %} {% endstep %} {% endstepper %} ## Common changes to theme content *** Below you'll find the most common changes to default theme content. Use the search and filter bar in the default theme content editor to find and replace the theme text. {% hint style="info" %} To learn about adding translations, check out our guide for [selling in multiple languages](/eclipse/general/editing-themes/multiple-languages). {% endhint %} ### Buy buttons *** The add-to-cart and Buy now buttons have the default text "Add to cart" and "Buy it now". Find this text in **Products > Product** area of the default theme content editor. ### Powered by Shopify *** The "Powered by Shopify" text appears in the footer on every page. * In your theme editor, click the **Actions (****...****)** button and select **Edit default theme content**. * Search "Powered by Shopify" to find the default text in the **Checkout & system > Links** area. * To remove default text, replace the text in the field with a single space. ### Newsletter *** The **Newsletter form** includes default text for the submit button ("Subscribe"), email placeholder ("Your email"), and confirmation message ("Thanks for subscribing!"). Find text in the **General >** **Newsletter form** area of the theme content editor. ### Shipping and taxes *** Default "Shipping and taxes" message automatically appear depending on store's settings in **Shopify admin** > [**Shipping and delivery**](https://admin.shopify.com/settings/shipping). * In your theme editor, click the **Actions (****...****)** button and select **Edit default theme content**. * Search shipping\_policy\_ or tax included to find default text for the **Cart** and **Products.** * To remove default text, replace the text in the field with a single space. {% hint style="danger" %} **Do not edit** text inside curly brackets **`{{ }}`** or HTML tags (**``** and **``**). Editing them will break theme functionality. {% endhint %} | Field | Default text | | --------------------------------------------------------------------------- | ------------------------------------------------ | | Taxes and shipping policy at checkout html | "Taxes and shipping calculated at checkout" | | Taxes included and shipping policy html | "Tax included. Shipping calculated at checkout." | | Shipping policy html | "Shipping calculated at checkout." | | Include taxes | "Tax included." | ### Checkout *** You can change the default text of the Checkout. Click the **Checkout** tab to find all text found in the Checkout. {% hint style="success" %} **Checkout is a Shopify feature**. While the checkout default content can be accessed through the theme content editor, the Checkout is not controlled by the theme. For issues and questions, please [contact Shopify Support](https://help.shopify.com/en/support/support-type). {% endhint %} # Multiple languages Learn how to sell in multiple languages and translate your Shopify online store, and enable the language and country selector in the Eclipse theme. Selling in multiple languages can increase sales by reaching customers all over the world. You can add multiple languages in your Shopify admin and use a translation app to translate your store content. Once you set up multiple languages, customers can choose their preferred language with Eclipse's language selector. {% hint style="info" %} If you have multiple languages enabled, **some sections and features require extra steps** to enter translated words into the theme editor, including the Header's Mega menu, product variant swatches, and variant chips. {% endhint %} ## Add multiple languages to your store *** Before adding new languages, make sure your store meets the [requirements for selling in multiple languages](https://help.shopify.com/en/manual/markets/languages#requirements).

STEPS

In your **Shopify Admin**: 1. Go to **Settings** and click **Languages**. ![](/files/VyAXodSD2DzCtSuCkLuM) 2. Click **Add Language**. Select a language from the menu, then click **Next**. ![](/files/7032qVVyHTkl6icpMuMj) 3. Select an [existing market](https://help.shopify.com/en/manual/markets/managing-markets#add-a-market) to add your language to, then click **Done**. ![](/files/KufA0onN3Heyd4zpuTnV) > See Shopify's guide to [managing markets](https://help.shopify.com/en/manual/markets/managing-markets#add-a-market) to add and configure the countries and regions you sell to. 4. Under **Unpublished languages**, click **Edit** to add your translations before publishing them. ![](/files/krFf22e4ElqPNhWkgkO9)

## Add translation app to translate store content *** **Translation apps** let you add and edit all store content, such as custom content added to your products, pages, and sections. Eclipse is compatible with Shopify's free [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app. The app fully integrates with and can be accessed through the theme editor. {% hint style="info" %} **Note** Other third-party translation apps are available on [Shopify's app store](https://apps.shopify.com/). Our theme support does not cover app integration. We recommend duplicating your theme before adding any apps and testing them thoroughly before purchasing. Please contact app developers for assistance. {% endhint %} ### Install and use Translate & Adapt ![](/files/EqnsdO5MwRUM92Fa0gAC) Download the [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app and follow the steps provided in the app and [Shopify's app manual](https://help.shopify.com/en/manual/markets/languages/translate-adapt-app). All translations are organized by category, such as **Products**, **Pages**, and **Blog posts**. You can also edit translations included in all theme assets and theme sections. When finished your translations, remember to go to **Settings > Languages** to publish your languages. {% hint style="warning" %} Tags on Shopify (such as product tags, article tags, and blog tags) cannot be translated. {% endhint %} ## Theme translations *** Eclipse includes 4 pre-packaged **theme translations** for French, German, Italian, and Spanish. Theme translations are for text elements included in and controlled by the theme. All other content needs to be manually entered or auto-translated with a translation app. In the **Translate & Adapt** app, you can add and edit translations for **Theme assets** and **Theme sections**. ![](/files/8gAhE8nHj4HKcs7sftlP) ### Enable language selector Customer's can select their preferred language by using Eclipse's **language selector**. The selector will appear when languages are added and published. To enable the language selector, click on the **Header** or **Footer** sections in the theme editor. Click to check **Enable language selector**. ## Fixing translations errors *** In some theme strings, code with curly brackets (**`{{ code }}`**) are included to dynamically show the correct content on your site. If you're using an app that auto-translates your store content, errors can occur when code is translated. For example, the code **`{{count}}`** shows the number of search results. If "count" is translated to another language, the code will not work. * In **Translate & Adapt**, open **theme assets** and use the search bar to find strings with a curly bracket **`{`**. * Re-add the code in the 'English' column to the translated language column. ![](/files/FmfEWyXb0qQ11DYQ0bNU) ![](/files/zVtBAaLaBQrc7rYnuucc) # Unique content for markets Learn how to create custom content for specific markets using Shopify's Contexts in the theme editor. Watch a tutorial video to show international customers unique promotions and shipping details. With Shopify **Contexts**, you can adapt your theme to display unique content for different customers. For example, you can showcase promotions or collections for specific countries. Or you might want to display different shipping policies for international customers. In your theme editor, switch **contexts** to edit how your theme appears for specific markets or B2B customers. Get started by watching the video tutorial below. {% hint style="warning" %} Since Shopify Markets and Contexts are not theme features, please direct all support-related questions to the Shopify team who will be able to assist you. See Shopify's [Store contextualization guide](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/store-contextualization) for more information. {% endhint %}

## Watch video tutorial *** Watch our video tutorial to learn how to use contexts. The video includes examples for setting up: * **Unique announcement bars** * **Promoting seasonal items for specific markets** * **Showing the correct shipping details for international customers** {% embed url="" %} ## Editing contexts *** If you have multiple markets or use B2B on Shopify, they will appear in the 'Context' dropdown menu of your theme editor. Your **Default context** provides the default content and layout for all other contexts. Editing a contexts for a market will override the default settings. Once you've overridden default settings in a context, you won't be able to change those settings by editing the default view. You will need to edit those settings in the updated context. {% hint style="info" %} **The context will automatically switch if you change the language or country selector** within the theme editor. If you accidentally edit the wrong context, you can [reset your context to the default](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/store-contextualization#resetting-your-context-to-default). {% endhint %}

STEPS

In your theme editor (**Customize**): 1. Select the market or B2B that you want to edit from the Context dropdown menu. > You can add and edit your markets through your Shopify admin. Go to **Settings > Markets**, then click ‘Add new market’. If you need help setting up markets, please reach out to [Shopify’s support team](https://help.shopify.com/en) who can walk you through this. 2. Edit your templates and theme settings in the selected context. > You’ll see a warning popup to let you know you’re are overriding the Default context. Go ahead and click ‘Continue’. > Once you override the Default context, it will show a green diamond indicator here to let you know that this section in the context will now need to be edited separately. 3. Click **Save**.

## Updating themes with edited contexts *** If you are manually updating your theme, you will need to transfer any files for your customized contexts. New theme files are automatically created when you edit a context. These files include the word 'context' in the name, as well as the country code. For example: **`header-group.context.eu.json`**, **`footer-group.context.ca.json`**, **`overlay-group.context.it.json`**. > See our [Theme updates guide](/eclipse/changelog/update-your-theme) for more information. # Customizing your site We're only able to provide a limited amount of support (questions and bug fixes — that's about it!), but we want to offer some pointers on what to look out for if you're thinking of **customizing your theme code** or **installing a third-party app**. ## Finding experienced developers *** There are, without question, going to be moments when you need a small tweak that you can't accomplish with the existing theme settings. In situations like these, you're going to need to engage a web developer. You may already know someone who's a web developer, and we recommend reaching out to them and beginning to foster that relationship. If you don't know anyone, we would recommend going to [Task Husky](https://account.taskhusky.com/aff.php?aff=153\&page=fluorescent) or consulting the [Shopify Experts Marketplace](https://experts.shopify.com/). Find someone who has solid examples of previous work, good reviews, and who is a good communicator. When it comes to developers, experience matters a great deal. While more experience comes along with a higher hourly rate, it also usually comes with significant time savings. ## Editing custom code *** If you are someone who likes to tinker, you can make a copy of your theme and access the code to play around with. Before you take this route, a couple of things to consider: * **Always make a copy of the theme to test changes on**. You can publish the copy if you're happy with it but if you completely break things (which is part of the learning process) you can always delete the copy and create a new one. * **A good grasp of the basics of CSS and HTML will help you greatly**. Codecademy has free courses on both [HTML](https://www.codecademy.com/learn/learn-html) and [CSS](https://www.codecademy.com/learn/learn-css) that can help you learn the ropes. * **Our theme support does not include help with custom changes**. If you break something, or can't quite get your changes to work in the way you want them to, it may be time to call in a professional. ## Installing third-party apps *** There are a lot of great apps out there that can expand what your store can do. However, it's not always clear to merchants how apps are related to themes and how they work. To help avoid any surprises or headaches, we want to outline a few things to consider. The first thing to know is that **our support policy does not cover app setup or any issues caused by apps**. Simply put, there's thousands of apps on Shopify that go through a different vetting process than themes, so compatibility between apps and themes, and any bugs that may result, are the responsibility of app developers. Another factor to weigh is that apps can affect the performance of your site and slow it down. Some apps may also add code directly into your theme file, which stays there even if you uninstall the app and this may cause problems. They can even break part of your theme functionality. Here are a few questions you can ask when making a decision about whether to use a particular app: * Does it add value to the user experience and benefit your customers? * Does that value outweigh the tradeoff of a slower page speed, for example? * Do the reviews highlight any common problems? * Does the app have good documentation and provide active support if something goes wrong? # H1 heading tags Headings provide an outline for pages, making it easier to understand what they’re about. All site pages use heading tags to structure its content into multiple levels, from H1 to H6. H1 headings classify the overall page content, and H2 to H6 headings let you organize content into topics and subtopics. It’s often unclear how heading tags relate to your site’s appearance and SEO, so we have some answers to common questions below. ## How are H1 headings generated? *** Our themes follow Shopify’s recommended structure for generating headings. * The home page uses your **store name** as the H1 heading. * Product pages, collection pages, site pages, and blogs use the **title** entered in your Shopify admin. ### Editing H1 heading of pages *** To change the wording of a H1 heading, go to your Shopify admin. In the side panel, open the product, collection, or page. Edit the **Title** field, then click **Save**. {% hint style="info" %} If you are looking to change the page title that appears in search listings, [learn more below](#edit-page-title-for-seo). {% endhint %} ### Editing H1 heading of home page *** To change your store name, go to **Shopify admin >** **Settings > General**, then click to edit your store name under **Store details**. ## Are keywords in the H1 vital for SEO? *** Up until the early 2000s, heading tags *were* important ranking factors. This meant that keywords needed to be in headings to rank — but that’s no longer the case. Today, site headings provide the context for understanding the content of your site. **On their own, headings are not ranking factors for SEO.** Headings tell you what you can expect a page to be about. To improve your site’s ranking, it’s meeting those expectations that really matters. To learn more, check out our guide for [SEO for Shopify themes](/eclipse/general/improve-seo) ## Common SEO warnings *** When using SEO tools (like Google Console), you may see some warnings reated to H1 tags. Oftentimes, these warnings do not apply to Shopify online stores, which are structured differently than ordinary sites. ### Multiple or duplicate H1 tags *** An automated SEO test may have warned you about ‘multiple’ or ‘duplicate’ H1s. The reason for this is that **there’s one H1 tag used for desktop and one for mobile**. Only one of these tags is actually rendered by the browser at any given time, depending on the device used by your visitor. Google's own crawlers will not flag this as an issue or duplicate content though, so **you can safely ignore these warnings** in any automated testing. It's just a false positive on the test and shouldn't negatively affect your SEO performance. ### Missing H1 tags *** An SEO test may warn that you’re site is missing an H1 tag. Even when inspecting the code, it can look like there’s no content to the H1 tag. However, **this warning can be ignored**. The theme automatically fills the heading content with your store name using an aria-label. SEO tools may mistakenly look for ‘hard coded’ text and not recognize the auto-generated label, which will cause a false warning. ## Why is the home page H1 attached to the logo? *** Attaching the H1 tag to the logo and store name is Shopify’s recommended SEO structure that’s used by any premium theme. It may appear that the H1 applies to the logo image, but in fact this piece of code contains the store name. The theme automatically fills the heading content with your store name using an aria-label. ## Editing page title for SEO *** H1 headings and page titles are not identical and can be edited separately, even though they often have the same content. **While H1 headings appear on pages, the page title appears in search result listings**, along with the meta description below. ![Search listing for Shopify Themes](/files/PSuCy05Cks1nrgnyDLDk) You can edit the page title and meta description for each page, including the home page, in your Shopify admin. Go to your pages or posts, and click **Edit website SEO**. You can modify the the title, 'meta' description, and URL handle. For the homepage, go to **Online Store > Preferences > Title and meta description**. ![Homepage search listing title](/files/HOSBJON9TguLdF590Q8b) ## Can I change the heading tags? *** In some sections, it's possible to change heading tags between H1 and H6. Click a section or title block to find the **Heading tag** setting. Changing the heading tag will not alter the appearance of the heading text. The heading tag option is used only to change the page's code structure, which can help improve accessibility and SEO. {% hint style="info" %} **We recommend using this setting only when necessary.** The structure of heading tags in our themes are intended keep your site accessible to everyone and properly indexed for search engines. The order and placement of heading tags is important for people who use screen readers to navigate through the page. {% endhint %} ### Replacing default H1 headings *** On some templates, it's possible to remove the default H1 heading. If you hide the default title, make sure to add a section with an H1 heading. #### Hide default H1 headings *** To remove the default h1 headings, go to your theme editor and open the template you want to edit.


Pages	Click the hide button on the Page section.
Collection page	Click the hide button on the Collection banner section.
Collection list page	Click to open the Collection list section and deselect the Show page title option.
Blog	Click to open the Blog posts section and deselect the Show blog title option.
Blog posts	Under the Blog post section, click the hide button on the Title block.

#### Add H1 heading to replace default *** If you've hidden the default H1 heading, add a section to serve as the page header. You may want to use the [Slideshow](/eclipse/sections/slideshow), [Rich text](/eclipse/sections/rich-text-1), or [Image with text](/eclipse/sections/image-with-text) section. Click to open the heading or title block settings, then set the **Heading tag** option to H1. # Image guide Learn how to optimize images for your Shopify online store using your theme. Find tips for great product and editorial photography, file sizes and dimensions, and image customization. Shopify and Eclipse will automatically optimize, resize, and adapt your uploaded images for all devices and screen sizes. By following a few basic guidelines, you can have images that look great and load quickly on all screen sizes with minimal effort. * [Best practices for taking and editing web-ready photos](/eclipse/general/image-guide/web-ready-photography) * [Supported image file formats on Shopify](/eclipse/general/image-guide/file-formats) * [Recommendations for image dimensions and file size](/eclipse/general/image-guide/image-sizes) * [Eclipse’s advanced image settings](/eclipse/general/image-guide/theme-image-settings) ### Watch tutorial Watch our tutorial about optimizing your images for your online store. {% embed url="" %} # Web ready photography Images on the web are designed to be **responsive**: they will change size, position, and sometimes be cropped to best fit a user's device. Before considering technical details like image size, you should focus on the content, composition, and orientation of your photos. {% hint style="info" %} Also check out Shopify's excellent [guide to smartphone product photos](https://www.shopify.com/in/blog/smartphone-product-photography) {% endhint %} **To simplify matters, we've picked out four of the best tips for taking and editing web-ready photography**: {% stepper %} {% step %} ### Position your main subject towards the middle of the frame When taking product photographs, it is important to leave room around the main subject to allow for cropping. Keeping photos simple will also ensure the subject remains the main focus. You can enhance your image by following the "**Rule of Thirds**," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos. > For more information on the "Rule of Thirds," see [Adobe's article on the rule of thirds](https://www.adobe.com/creativecloud/photography/discover/rule-of-thirds.html). > {% endstep %} {% step %} ### Use Landscape for full-width images and Square for mobile images. Using landscape (horizontal) photos for full-width and hero images can prevent unwanted cropping or needing to scroll down to see the entire image. For mobile devices, consider using square images to fill more of the screen and ensure they stack uniformly when repositioned. {% endstep %} {% step %} ### Do not add text directly to images — use heading blocks instead Text included in images may appear stretched and be cropped when resized. Using the theme's Heading blocks, however, will ensure all text is properly positioned and resized for any device. {% endstep %} {% step %} ### Use theme image settings to set the focal point of your images. Use the image focal point option and add mobile-specific images to avoid cropping the key area of your image. {% endstep %} {% endstepper %} *** #### Learn more


Image sizes	/pages/RouorJFRSM07rIK7w17g
File formats	/pages/ELa0IsSPfv6CTIxQrxZZ
Theme image settings	/pages/EeGZ3W5aZSUdx9ha9Nfm

# Image sizes When it comes to image size, there are really two questions: **how many pixels wide** and **how many megabytes**? Answering these questions will help make sure that your images look great and load fast. But the answer isn't about exact measurements: what matters is that your images are **above a minimum pixel width** and **below a maximum file size**. Shopify and Eclipse will handle the rest and automatically optimize and re-size your images for your visitor's screen or device. ## Two guidelines *** For optimal image sizes, you can follow these two simple guidelines {% stepper %} {% step %} Use a **minimum pixel width** of **`2500 px`** for optimal quality on all screens. You don't need very large pixel widths for high quality images. In fact, larger pixel widths rarely makes a noticeable difference in quality. {% endstep %} {% step %} Use a **maximum file size** of around **`2 mb`** for optimal loading speed. You don't need to worry if images are a bit over or under the maximum file size. {% endstep %} {% endstepper %} ## Theme image recommendations *** The best image size, shape, and orientation will depend on how it's used: background and hero images will need different dimensions than a logo or icon. Our image guide for Eclipse combines what we've learned about image size, image formats, and best practices for photos. Below you'll find recommendations for choosing and editing images for different sections and uses on your online store. * [Product images](#product-images) * [Collection images](#collection-images) * [Full-width feature images](#full-width-feature-images) * [Feature block images](#feature-block-images) * [Hero images](#hero-images) * [Background and banner images](#background-and-banner-images) * [Logos and icon images](#logos-and-icon-images) ### Product images *** | Size | Min pixel width: 2500 px. | | -------------- | --------------------------------------------------------------------------------------------- | | Orientation | Square or Portrait (vertical) — choose one for consistency | | Format | JPG or WEBP | | Theme sections |

Complementary products
Featured collection
Product media
Recommended products

| Product images appear on **Product pages**, **Collection pages**, and **product listings** used in theme sections. There are no specific required dimensions for product images. However, we recommend choosing one shape and orientation for all your product images to maintain a uniform appearance in product grids. Product pages display images added to your product inventory in the Shopify admin. You can customize the Gallery style in the theme editor. Select one of **three layouts** (Grid, List, or Thumbnails) and adjust the **Gallery size**. **Product listings** (or product grids) appear on **collection pages** and in some **theme sections**. You can customize the aspect ratio and size of all product images in product listing theme settings. ### Collection images *** | Size | Min pixel width: 2500 px. | | -------------- | ------------------------------------------------------------------------ | | Orientation | Square or Landscape (horizontal) | | Format | JPG or WEBP | | Theme sections |

Collection list page
Collection list
Collection page banner

| Collections images are used for **Collection banners** and **collection listings** used in theme sections. There are no specific required dimensions. We recommend choosing one shape and orientation for all your featured collection images. In the theme editor, you can choose to use the feature image added in Shopify admin or upload a custom image for sections with collection listings. ### Full-width feature images *** | Size | Min width: 2500 pixels | | -------------- | ------------------------------------------------------ | | Orientation | Landscape (horizontal) | | Format | JPG or WEBP | | Theme sections |

Grid
Image compare
Rich text
Slideshow

| **Full-width feature images** span the entire section or screen and are often added as section blocks. Using landscape (horizontal) images can prevent unwanted cropping or needing to scroll down to see the entire image. We recommend avoiding portrait images, which may appear stretched or make customers scroll down to see the whole image. ### Feature block images *** | Size |

Min width: 1250 pixels.
Max height: 1400 pixels
File size: 2 MB (max 20 MB)

| | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Orientation | Square or Portrait (Horizontal) | | Format | JPG or WEBP | | Theme sections |

Image with text
Multi-column

| Many sections include feature images with adjustable sizes, layouts, and positions. These sections often best highlight product and editorial photography. ### Hero images *** | Size | Min pixel width: 2500 px. | | -------------- | ------------------------- | | Orientation | Landscape (horizontal) | | Format | JPG or WEBP | | Theme sections | Slideshow | **Hero** images are like full-width images but are typically shorter in height. Horizontal (landscape) images work best and you might consider using a wider aspect ratio like 16:9. Hero images are often used with text headings, so simple images with minimal, well-positioned content are best. The Image height and image focal point settings are useful for ensuring the whole image can be viewed without scrolling and its subject remains visible and centered. {% hint style="info" %} You can enhance your image by following the "Rule of Thirds," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos. For more information on the "Rule of Thirds," see [Adobe's article on the rule of thirds](https://www.adobe.com/creativecloud/photography/discover/rule-of-thirds.html). {% endhint %} ### Background and banner images *** | Size |

Min width: 2500 pixels.

File size: 2 MB (max 20 MB)

| | -------------- | ---------------------------------------------------------------------------------------------------------------------------- | | Orientation | Landscape (horizontal) | | Format | JPG or WEBP | | Theme sections | Email signup | Background and section banner images span the full width and height of a section. If the section is full-width, the image will span the full width of the browser window or screen. Using landscape images can avoid unwanted cropping or making customers scroll down the page to see a full image. We recommend avoiding portrait images, which may appear stretched or make customers scroll down to see the whole image. ### Logos and icon images *** | Size |

Pixel width: 50px - 300px
File size: 1 MB

| | -------------- | ------------------------------------------------------------------------------------- | | Orientation | Square or Landscape (Horizontal) | | Format | PNG (Transparent background) or GIF (animation) | | Theme sections |

Header
Information popup
Product details
Image with text

| You can add your store's **Logo** to the **Header**, among other sections like the **Footer**. In the **Header** settings, we recommend setting the **Custom width** to the actual pixel width of your logo image (between **`50px - 100px`**). If you enable Eclipse's transparent header, we recommend adding an **alternate logo** with different colors that contrasts with the background color or image. *** #### Learn more


Web ready photography	/pages/WxPqvzyNcXZXceJN89fs
File formats	/pages/ELa0IsSPfv6CTIxQrxZZ
Theme image settings	/pages/EeGZ3W5aZSUdx9ha9Nfm

# File formats When saving your images, you'll want to consider what format (or file type) to use. Shopify supports the most common file formats, which are equally great choices for your online store: JPG, PNG, WebP, and GIF. These formats are popular because they balance size with quality and are widely supported across all browsers. That said, each format has different benefits and common uses that are worth considering when creating your images. | Format | Common use | | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | JPG | The most widely-used format for still images with excellent balance between size and quality. | | PNG | Higher precision yet large file size than JPG. Best for small images (e.g. icons and logos) with transparent backgrounds. | | WEBP | A relatively newer format with increasing browser-support and superior compression to JPG and PNG. Great for precise images and animation sequences. | | GIF | Ideal for small, simple images and animations. | *** #### Learn more


Web ready photography	/pages/WxPqvzyNcXZXceJN89fs
Image sizes	/pages/RouorJFRSM07rIK7w17g
Theme image settings	/pages/EeGZ3W5aZSUdx9ha9Nfm

# Theme image settings Eclipse's advanced image options let you control the size, shape, position, and general appearance of your images. Use these settings to make your images fit the sections and look their best. Available image settings will vary between different sections. ## Image aspect ratio *** ![](/files/c18Y9JViI7ouryyknY77) The **Image aspect ratio** setting lets you crop your uploaded images to make them all **Square (1:1)**, **Landscape (3:2)**, or **Portrait (2:3)**. You can select the **Natural** option to show all images with their original orientation. We recommend using this option in the Product listing settings to make your product grids and collection pages uniform. {% hint style="info" %} The **aspect ratio** describes the relation between the width (w) and height (h) of an image, written as **`w:h`**. For instance, an image that's 400px by 200px has an aspect ratio of **2:1** because its width is twice as large as its height. All square images have an aspect ratio of **1:1** because the width and height are equal. {% endhint %} ## Mobile-specific images *** ![](/files/gixQhoKaqU3MtxXvba2z) Using **Mobile-specific images** helps avoid cropping on smaller devices by using alternate images. Consider using **Square** mobile-specific images to fill more of the screen and ensure they stack uniformly when repositioned. ## Image focal point *** ![](/files/WGagsXgJAExiCLvxky0T) Using focal points are a useful way to avoid unwanted cropping. When the layout of your site changes to fit different screen sizes, the focal point of your image will remain centered and within frame. After you've uploaded your image, click **Edit**. Click **(+) Add focal point**. Click and drag the blue focal point to specify the main focus of your image. Click **Save**. ## Image height *** The **Image height** setting can help keep images full visible without needing to scroll and avoid cropping. Choose to display the image with a **Custom** or the **Original** height (without cropping). The **Height** is the percentage of the window height on your customer's device. When **Custom height** is set to 50%, the image will always display at half the height of the customer's screen. ## Image size *** The **Image size** setting lets you control the max width of block images. Use this setting to change an image to either icon- or feature-size. ## Overlay colors *** Change the **Overlay opacity** using the slider to increase the contrast between the text and image. These settings help make your text readable. ## Text size and alignment *** Eclipse's **text size and alignment settings** can help headings and captions work well with your images. Do not add text into your original images. Text will become distorted and cropped when adapted to different screen sizes. *** #### Learn more


Web ready photography	/pages/WxPqvzyNcXZXceJN89fs
Image sizes	/pages/RouorJFRSM07rIK7w17g
File formats	/pages/ELa0IsSPfv6CTIxQrxZZ

# SEO for Shopify There are many different ways to improve your search rank. Some approaches may be technical, possibly costly. However, the best approach is relatively simple and free. Rising in search ranks is a gradual process, but there are short-term changes that can have a long-term impact. The most impactful changes can be done by you, all within the Shopify dashboard and theme editor. The tips below focus on improving the content of your site and how your site appears in search results. {% hint style="success" %} You can also check out Shopify's [SEO: A Guide to Generating Store Traffic](https://www.shopify.com/blog/shopify-seo). {% endhint %}

Why am I getting a "duplicate content" warning?

Some SEO reports will flag URLs that point to the same page as "duplicate content". There's nothing wrong with your site — "duplicate content" flags prevent search engines from listing various URLs for the same page as separate pages. [Learn more about duplicate content](#duplicate-content-warnings) and how canonical URLs are used to automatically avoid any SEO issues.

Are H1 tags important for SEO?

Site headings provide the context for understanding the content of your site. **On their own, headings are not ranking factors for SEO.** Headings tell you what you can expect a page to be about. To improve your site’s ranking, it’s meeting those expectations that really matters. Learn more about [H1 tags in Shopify themes](/eclipse/general/editing-themes/h1-heading-tags).

## Create unique site content *** The core to improving search ranks comes down to writing content that's relevant and useful to the kind of person you want shopping at your store. So first, **start writing more content in your unique voice**: write blog posts about your store and what you love, provide detailed product descriptions, and add marketing copy and pages that tell your story. The number of sites that link to your store will also improve your search ranking. By writing what others want to share, you'll increase your reach with these 'natural' links. {% embed url="" %} {% embed url="" %} ## Edit content shown in search results *** ![](/files/xAFUOwAZDT9WyIr8jqX5) Beyond the main content, there's a special type of content called **SEO metadata**. It's this content that appears in search results. Shopify makes it easy to edit. Go to your pages or posts, and click **Edit website SEO**. You can modify the the title, 'meta' description, and URL handle. Your aim should be to keep these short and simple. You need to give potential visitors a quick impression of what they can expect and persuade them to click through to your store. {% embed url="" %} {% embed url="" %} ## Use keyword research *** To show up in search results, you want your site's content to match up with the words and phrases your potential customers will mostly likely use when searching. **Keywords** are popular search terms that people use in search engines. Using keywords in your headings and content can help expand your reach. There are free tools to find keywords related to your store and products. For example, check out [Keyword.io](https://www.keyword.io/), [Moz Explorer](https://moz.com/explorer), and [Uber Suggest](https://neilpatel.com/ubersuggest/). To make the most of these tools, you'll need to reflect on who your customers are and consider what terms they might use when searching. {% embed url="" %} {% hint style="info" %} **Some quick tips** **Avoid duplicate content**. If your content is very similar to other sites, it can lower your search rank. This might be a good reason to be weary of using AI-generated content. **You don't need to talk like a robot**. It's important to write for your customers and not for search engines. It's best to talk like *you*. Trying to 'game' search engines can often have a negative impact. **Learn from other stores**. Try searching keywords related to your store. Check out the top-ranking sites and see what they might be doing differently. {% endhint %} ## Improve your site structure *** While your theme and Shopify already structures your content to optimize search ranking, there are a few things you can do to keep your content organized and searchable. Focus on making a **clear navigation for your store**, with **link text that clearly describes the page** that's linked. Also make sure to **fix any broken links**, as search engines use them to map out your site. > You can use [Mega menus](/eclipse/header/header/mega-menu) to create clear pathways for large catalogs. {% embed url="" %} ## More SEO tools *** There are some more advanced steps you can take for SEO. See Shopify's guide for more in-depth tips and instructions. {% embed url="" %} ### Duplicate content warnings *** SEO reports will often flag links with “duplicate content”. But there’s no need to worry — Shopify themes use [canonical URLs](#canonical-urls) to automatically prevent issues that might be caused by duplicate content, and you don’t need to take any further action. “Duplicate content” simply means that there are multiple URLs that point to the same webpage. For instance, a page could be accessed through `www.mystore.com/page` or `www.mystore.com/page?ref=facebook`. {% hint style="info" %} **Sites are not penalized for duplicate content**, unless the content is scraped from other sites in order to deceptively manipulate search results. {% endhint %} #### Canonical URLs When there are multiple URLs for a single page, search engines need to decide which URL they should use in search results. This URL is called the canonical URL. Shopify automatically adds **canonical URL tags** to all pages, which tells search engines the “official” URL that should be included in search results. Canonical URLs prevents search engines from indexing alternate URLs as separate pages, which can reduce the quality of search results. {% hint style="success" %} Canonical URLs and all aspects related to store domains are managed by Shopify. For more help, we recommend reaching out to the [Shopify Support Team](https://support.shopify.com/). {% endhint %} # Online store speed The speed and performance of your online store is key to a great shopping experience. Keeping track of your store speed can help avoid problems that may impact your customer's experience. That said, **speed scores are not "pass or fail" grades**. You may surprised by a low speed rank but no need to panic! Low speed ranks doesn't mean your site is broken. Sites with more quality content and features will naturally have a slower speed rank — but usually it's worth it! **Slow page speed becomes a problem** when it noticeably impacts load-time, usability, and discoverability of your site. We'll help put your store speed in context and show you how to balance the costs and benefits when making changes to your store. ## Measuring page speed *** While there are many tools to measure site speed, Shopify's [Online Store Speed Report](https://help.shopify.com/en/manual/online-store/os/store-speed/speed-report#frequently-asked-questions) provides the most useful picture of your site's performance. Most online speed rankers will compare your online store to *all types* of websites, which can be like comparing apples to oranges because Shopify stores are far more powerful than standard sites. Unlike the speedometer in your car, speed scores do not tell you your exact speed. They are a relative ranking of how your store compares to similar stores. Shopify's Speed Report compares your store against other stores that are similar to yours, based on: * Number of sales * Number of products and variants * Types of products * Traffic * Apps installed * Theme used The online speed score gives you a sense of whether your store is slower, faster, or the same speed as similar stores. A lower speed rank does not always reflect a problem with your site — sites with more quality content and features will naturally have a slower speed rank — but it’s usually worth it! ## Contributing factors *** Most changes made to your online store will impact speed, even though it can often be imperceptible when browsing your site. Your score may change when you add new products or collections, install an app, or add features and content to your pages. Some of these factors are out of your control, such as Shopify's infrastructure, your customer's device and connection, and theme code. We'll cover those factors you can improve below. **Factors that influence your store speed include:** * Shopify infrastructure * Third-party libraries and services * Analytic libraries * Apps * Theme code * Store features * Custom development * Image and Video content * Number of products ## Theme performance *** The performance of Eclipse is our top priority. Eclipse meets Shopify's code and performance standards and we're committed to making continual updates to improve our theme. Eclipse ensures high site performance through optimized resources and dynamic loading. For example, Eclipse will automatically display the optimal image size depending on the customer's device. Eclipse also uses "code splitting" and "lazy-loading" to load content and resources only when needed. We recommend checking Eclipse's changelog to keep updated on the latest theme version. If you have any specific questions or concerns about Eclipse, please [get in touch](https://fluorescent.co/help/contact) with our Support. ## Improving store speed *** Your speed report can help remind you when to review your site's performance and also track your relative speed rank over time. When you are concerned about a low store speed, review your site page-by-page and note where you there's visible slowness or impacted features. Some pages, like the home page and product page, will naturally have a lower speed that does not reflect the overall speed of your site. **Start with small incremental changes**. Some causes of slowness may be obvious — for example, too many apps, especially when unused. However, making small gradual changes will help you balance an improved store speed with providing a high-quality shopping experience. Before making any changes, we encourage carefully weighing the benefits and costs of particular features before changing or removing them. Remember: it's not about *faster*; it's about *balance*. {% hint style="info" %} **Updates to your speed score can be delayed up to a few days after changes are made**. Your rank will also vary over time based on changes other stores have made, even if you haven't made any. {% endhint %} ### Remove unnecessary apps *** Both the code added by apps and the total number of apps will increase page load times, sometimes significantly. Remove any apps that are no longer being used and weigh the benefits of an app (does it contribute to your bottom line?) against the cost of speed. See our article on using third-party apps with questions to consider before downloading. ### Design concise pages with impact *** It can be tempting to use all the features and content at your fingertips. Generally, following the principle of "less is more" can make for the most effective site designs. Focus on a small set of theme sections per page that achieve the most amount of impact, whether your goal is to sell your product, promote your brand, or engage customers with your story. Also consider **reducing the number of images or autoplay videos** on a page or **products** shown in on a single collection, page, or section. ### Optimize image and videos *** Avoid uploading oversized videos. For sections with autoplay videos, we suggest a maximum limit of 10mb or about 10 seconds. The most effective autoplay videos are short and concise. Both Shopify and Eclipse make sure the optimal size of your images are loaded — so typically, there's no need to fret about images sizes. However, if you're concerned about the size of your images, check out Shopify's [10 Must Know Image Optimization Tips](https://www.shopify.ca/blog/7412852-10-must-know-image-optimization-tips). ### Limit store features and custom code *** There are some features that are "heavy" and will have a larger impact on speed. Custom code can also come at a cost, so we again recommend making smaller gradual changes rather than drastic overhauls. For example, disabling Shopify's Dynamic "Buy now" button can significantly increase your product page speed but at the cost of the potential benefit of your conversion rate. If you are using custom fonts, consider using system fonts: Shopify's [font picker](https://shopify.dev/themes/architecture/settings/fonts#available-fonts) supports hundreds of great fonts that load faster than custom fonts. > See [Shopify's Store speed manual](https://help.shopify.com/en/manual/online-store/store-speed/improving-speed) to learn more about improving your store's speed. # Accessibility Web accessibility is about making websites usable for as many people as possible. Accessible websites benefit everyone, including people with disabilities, visitors using mobile devices, or those with slow network connections. ## Theme accessibility standards *** **Fluorescent themes** aim to meet the highest standards of web accessibility, outlined by the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/). Our themes and Shopify support these guidelines, and we continue to update our themes to meet these standards as they evolve. This article focuses on how to keep your online store accessible while customizing its theme. You'll find a couple guidelines to get you started and further resources for testing. ## Follow accessibility guidelines *** In some cases, there are accessibility guidelines that our themes support but cannot enforce. For instance, because themes allow site colors to be fully customized, it is the store owner’s responsibility to select colors that meet accessibility standards. When customizing your theme, we recommend following Shopify's guidelines on [Accessibility for themes](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility). You'll find guidelines and recommendations for: * [Text accessibility](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility#text-accessibility) * [Alt text for images](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility#alternative-text-for-images) * [Slideshows and videos](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility#slideshow-and-video-accessibility) * [Keyboard support](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility#keyboard-support) You may also want to use the [A11y Project Checklist](https://www.a11yproject.com/checklist/) to make make sure your site complies with the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). *** We recommend starting with two guidelines that are commonly overlooked: ### Color contrast for text If the background color is too similar to the text, it can make it difficult to read. This can be especially challenging for people with visual impairments, such as color blindness. You can use free online tools, like [Accessible Web’s Contrast Checker](https://accessibleweb.com/color-contrast-checker), to help you select colors that meet accessibility standards. ### Alternative text for images Alt text, or alternative text, is a text description added to an image’s HTML code. The text description may be read aloud by assistive technology, like screen readers, used by people with visual impairments. Alt text also appears when an image does not load. Learn how to [Add alt text to product images](https://help.shopify.com/en/manual/products/product-media/add-alt-text) and [theme images](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility/adding-alt-text). ## Find professional help *** You may want to contact a development company or design firm that specializes in accessibility compliance. One firm that specializes in Shopify work is Diff, but there's a great list of experts available on the [A11y Project website](https://www.a11yproject.com/resources/#professional-help). ## Review apps for accessibility *** Shopify apps may not comply with these guidelines, and using multiple apps can impact accessibility. When installing apps, keep accessibility guidelines in mind and contact app developers if you have any questions. # Theme settings **Theme settings** are used for your store's general styles and site-wide options. Any changes will affect all sections and templates. * Click the ‘gear’ icon in theme editor's side panel to open **theme settings**. * Customize **colors** and **fonts** to change your site's general appearance. * Customize site-wide options for **products**, **search**, **cart, social media** and more.


Colors	Set up site-wide colors and color schemes	/pages/GTWzpa5cunXxd2eahdYX
Typography	Customize site fonts	/pages/sTIdl8D6MyqIPNFktnM3
Corner rounding	Change the corner radius of images, buttons, and other elements	/pages/c0xn9qQjgz0tPqMmW1eX
Cart	Customize cart styles	/pages/mrv0HwGOcDfWfjEzGlJ6
Swatches	Show color buttons for product variants	/pages/XeP1NCniPgMwEdnnBXop
Products	Change the appearance of sibling product swatches
Product listings	Customize product card styles, badges, and quick shopping.	/pages/jT9R0Hn146I7dPLOgcJK
Currency format	Customize how currencies are prices are displayed	/pages/2mJll77Mcf1CwzwZXoOl
Blog	Set up article categories for blog filter	/pages/ydrcl9k5L15zk7koOPOo#show-category-filters
Predictive search	Customize quick search style	/pages/my27xj6ezRVDTgkmeoiq
Social media	Add social account links for icons	/pages/mCJHKhLvVsXWSqCUVn2i
Favicon	Upload a 32 by 32px image to show in browser tabs

# Social media {% columns %} {% column %} Display social media icons by adding your account links in your theme settings. In your theme editor, go to **Theme settings > Social media.** Enter the full URL of your social media pages. Social media icons can be enabled in Footer blocks: [Newsletter and Socials](/eclipse/footer/footer/newsletter-and-socials) and [Image Text and Socials](/eclipse/footer/footer/image-text-and-socials). {% endcolumn %} {% column %} {% hint style="info" %} #### **Supported icons** **Discord** **Facebook** **Houzz** **Instagram** **Line** **LinkedIn** **Pinterest** **RedNote** **Snapchat** **TikTok** **Tumblr** **X** **Vimeo** **WeChat** **WhatsApp** **YouTube** {% endhint %} {% endcolumn %} {% endcolumns %} # Theme styles Theme styles apply pre-selected settings for colors, fonts, and minor design elements. The change can be quite subtle but will give you a basic starting point for customizing your store’s branding. {% hint style="info" %} *Theme styles do not change the layout of page sections, the header, footer, or any individual section settings. You can download other presets to access demo layouts:* [*Eclipse*](https://themes.shopify.com/themes/eclipse/presets/eclipse)*,* [*Ripple*](https://themes.shopify.com/themes/eclipse/presets/ripple)*, and* [*Coastal*](https://themes.shopify.com/themes/eclipse/presets/coastal) {% endhint %} ## Select theme style *** Eclipse has 3 theme styles named after the demo store with the same style settings. In **theme settings > theme style**, switch to another theme style, then customize the theme settings to make it your own. > **Note:** The theme style will overwrite your current settings. Make sure you've duplicated your theme to keep as a backup.

STEPS

In your **Shopify Admin**: 1. (*Recommended*.) [Duplicate your theme](https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes) to save as a backup. 2. In the theme editor, click the **Theme settings** gear icon. 3. Click the **Theme style** tab. 4. Select a preset to preview the styles. 5. To apply the theme style, click **Change style**. 6. Click **Save**.

# Fonts A wide selection of **Fonts** are available for the logo, headings, body text, and buttons. These fonts are applied site-wide. All fonts are provided by Shopify's font picker. See a full list of [fonts supported by Shopify](https://shopify.dev/themes/architecture/settings/fonts#available-fonts). In the theme editor, click the **Theme settings** icon, then click to open the **Fonts** tab. {% hint style="info" %} See our blog post on [Choosing the best font pairings for your store](https://fluorescent.co/blog/font-pairing) for helpful tips and some handpicked examples. {% endhint %} ## Headings *** Select the font for headings of sections and pages.

Setting	Description	Options
Casing	Display text in all uppercase letters or use the casing of the text as entered in the heading fields.	Normal Uppercase
Letter spacing	Adjust the space between letters for headings of sections and pages	-2.5 - 2.5
Desktop font size	The font size (in pixels) for section and page headings.	24 - 72
Mobile font size scale	Adjust the heading text size on mobile as a percentage of the desktop size. Set it to `100%` to use the same text size as desktop.	50 - 100

## Body text *** Select a font for body text and descriptions.

Setting	Description	Options
Casing	Display text in all uppercase letters or use the casing of the text as entered.	Normal Uppercase
Letter spacing	Adjust the space between letters for body text and descriptions.	-2.5 - 2.5
Desktop font size	The font size (in pixels) for body text and labels.	15 - 22
Mobile font size scale	Adjust the body text size on mobile as a percentage of the desktop size. Set it to `100%` to use the same text size as desktop.	50 - 100

## Navigation *** Select a font for navigation text and menu links in the header.

Setting	Description	Options
Casing	Display text in all uppercase letters or use the casing of the text as entered.	Normal Uppercase
Letter spacing	Adjust the space between letters for navigation text and menu links in the header.	-2.5 - 2.5
Desktop font size	The font size (in pixels) for navigation links in the header.	24 - 72

## Buttons *** Select a font for all button labels.

Setting	Description	Options
Casing	Display text in all uppercase letters or use the casing of the text as entered.	Normal Uppercase
Letter spacing	Adjust the space between letters in button labels.	-2.5 - 2.5

# Colors You can change the **Colors** of elements across your store, including general colors, header colors, footer colors, and product colors. In the theme editor, click the **Theme settings** icon, then click to open the **Colors** tab. {% hint style="info" %} We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone. {% endhint %} ## Color schemes *** A **color scheme** consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes. * Customize and create new color schemes in theme settings * Apply color schemes to sections in section settings

### Edit and add color schemes *** In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme. #### Color scheme options Every color scheme has the following color options.

General colors	Description
Background	The background of the section, which spans the full height and width.
Background gradient	Some sections can use a gradient background instead of a solid color background. You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.
Text	All text included in the section.
Lines and borders	All lines and borders that appear between or within sections.
Accent	Special design elements in sections
Accent foreground	Text or icons that overlay accent elements
Buttons
Solid buttons	The background and text colors for buttons with solid style
Outline buttons	The background, text, and border colors for buttons with outline style
Buttons with icon	The background and foreground colors for buttons with icons

> Note: Solid and Outline button styles use the **Accent** and **Accent foreground** colors as the hover colors. ## Popovers, Modals, and Drawers *** Select a color scheme to apply to **Popovers, Modals,** and **Drawers**.

Setting	Description
Popovers and modals	Select a color scheme for popups and modals, such as popups and information popups.
Drawers	Select a color scheme for menus and cart drawers.

## Products *** Select colors for elements used in product listings and product pages.

Setting	Description
Sale	The 'Sale' badge on product cards.
Sold out	The 'Sold out' badge on product cards.
Low inventory	The low inventory message on product cards.
In stock	The 'In stock' text on product cards.

## Notifications *** Select colors for notification messages in forms.

Setting	Description
Success	Success messages for forms.
Error	Error messages for forms.

# Corner rounding {% hint style="info" %} This feature is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} Use the **Corner radius** settings to change the roundness of elements across your site — including images, inputs, buttons, drawers, and popups. Corner radius settings apply to elements across your theme. Some sections and blocks have an option to [toggle on or off the image corner radius](#toggle-image-corner-radius).

In your theme editor, go to **Theme settings > Corner rounding**

Setting	Description
Drawers and modals	All drawers and modals, including: Quick cart \| Search drawer \| Mega menus \| Popups \| Quick shop \| Info popup
Popovers	All dropdown menus and submenus, as well as the Sticky add-to-cart.
Small cards and containers	All small cards and containers, including: Cart items \| Complementary items \| Free shipping bar \| Featured icon with text
Images	All images, including product listings.
Image thumbnails	All small image thumbnails, including: Product media gallery \| Cart items \| Sticky add-to-cart
Buttons	All buttons, including variant chips and filter button. Does not include: Swatches, Cart icon, Quick view button, Image zoom icon, quantity buttons, or slider cursors.
Form inputs	All dropdown menu buttons, text fields, and checkboxes. For example: Search bar \| Newsletter signup \| variant dropdowns.
Badges	All sale and sold-out badges in product listings and product pages.

### Toggle image corner radius *** In some sections and blocks, you have the option to use rounded corners or not. The **Enable image corner radius** option is enabled by default. Click the section or block to find the settings: * [Image content block](/eclipse/sections/overview/content-blocks#image-block) * [Product overview image block](/eclipse/product-pages/product-content-blocks#content-blocks) * [Blog post template - Content block](/eclipse/pages/blog-post-page#customize-page-style) * Page section # Page templates In the **theme editor**, find and edit **templates** to design the layout of pages on your store. Find guides for each type of template below. > For an introduction, see our [guide to using templates](/eclipse/pages/templates/using-templates). {% hint style="warning" %} At first, every type of page uses the same **default template**. For example, if you edit the **Default product template**, your changes will appear on all product pages. * To design different layouts for pages, [create and assign a new template](/eclipse/pages/templates/create-and-assign-templates) for those pages. * To show unique page content in the same template, use [dynamic content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in sections. {% endhint %} ## Theme templates ***


Home page
About page	/pages/400lFDUcHF1NmIJTGC0y
Blogs page	/pages/ydrcl9k5L15zk7koOPOo
Blog posts page	/pages/dn1jFBE3Ublrax3M86K3
Cart page	/pages/mrv0HwGOcDfWfjEzGlJ6
Collection page	/pages/nDkOTQqJHCYlNsly39ZF
Collection list page	/pages/USBap1sw4BRBHIE4Io1b
Contact page	/pages/fFWKXoUTVDy0OBadoxa9
Password page	/pages/gw7Vz3ZSaYpH4r9hWPGe
Product page	/pages/aisI9BbTgpWHb8KFAHWr
Search page	/pages/YbOZT1Sw2hHjCBTG5ja6
404 page

## Shopify templates *** The following templates are controlled by Shopify. For questions and issues, please [contact Shopify Support](https://help.shopify.com/en/support/login)


Gift cards	https://help.shopify.com/en/manual/products/gift-card-products/add-update-gift-card-products
Checkout	https://help.shopify.com/en/manual/checkout-settings
Customer accounts	https://help.shopify.com/en/manual/customers/customer-accounts

# Using templates Your online store consists of different types of **pages**, including: the *home page*, *product pages*, *collection pages*, *blogs*, and other *pages*. Pages are designed using **templates**. In the theme editor, you change the look and layout of your pages by editing their assigned templates. * There are **default templates** for each type of page. *Editing a default template will apply the same layout to all pages that use that template*. * To **use different layouts for specific pages**, create new templates, then assign those templates to your pages in the Shopify admin. ## Design pages with templates *** Open your theme editor to find default templates for every type of page. * Add page content in Shopify admin * Customize layout with sections and blocks * Customize general page styles


Edit templates to design pages	Use sections to create the layout of your page.	/pages/3wq6hFMr3k1BDOHIgjqZ
Use different templates for pages	Create new templates for specific collections, products, or pages.	/pages/97v9H5JzZKQHdefhuemn
Assign templates to pages	To make your changes live, assign the template to your pages in the Shopify admin.	/pages/97v9H5JzZKQHdefhuemn

## Customize page styles ***


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Content width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Content padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov
Animation

## Preview changes *** When you open a template, the theme editor selects a page (e.g. one product or collection) to preview the changes made to that template. * Click **Change** in the "PREVIEW" section to view a different page with that template. * To view a full preview of the live site, click more **`…`** > **Preview**. The preview will open in a new window, and you can click **Share preview** to copy the preview link to share with others. ### Create unique page layouts *** At first, every type of page uses a **default template**. For example, if you edit the **Default blog post template**, any changes you make will apply all blog post pages. * To design different layouts for pages, **create and assign a new template** for those pages. * To show unique page content in the same template, use **dynamic content** in sections.


Create and assign new templates	/pages/97v9H5JzZKQHdefhuemn
Add dynamic page content	/pages/D5LdKTduRuTo2dDLnqmZ

# Customize page styles Templates Many pages templates have the same general style settings. These settings let you customize the content width, top and bottom padding, and animation styles. ### Page colors *** You can change the page colors by assigning a color scheme using the color scheme picker in the page section settings. Color schemes are sets of colors. You can add and define different color schemes in **Theme settings > Colors**.

### Content width *** Change the **Page width** to adjust how far the section spans across the page. Available width options will vary depending on the type of section. `Click Page section to find settings` | Setting | Description | Options | | ----------------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | | Content width | Choose the width of the section content. |

Page width
Custom width Default

| | Custom content width | Set a custom width for the section content | *Default*: 650 | ### Section padding *** Use the sliders to add space at the top or bottom of the section. Set to 0 to remove spacing. `Click Page section to find settings`

### Animations *** Eclipse uses **animation** effects when loading images and text to create a more engaging user experience.

Setting	Description
Enable text animation	When enabled, headings and text slide up and fade into view upon loading.
Image animation	Change the animation style of how the image loads. Select None to disable load animations. Fade: The image gradually fades into view. Iris swipe: The image is revealed in the form of a growing circle.

Setting

Description

Enable text animation

When enabled, headings and text slide up and fade into view upon loading.

Image animation

Change the animation style of how the image loads. Select None to disable load animations.

Fade: The image gradually fades into view.

Iris swipe: The image is revealed in the form of a growing circle.

# Create and assign templates At first, there is one **Default template** for every type of page. This means that **changes made to a default template will apply to all pages that use that template**. To change the content or style of specific pages, you will need to **create a new template** and then **assign that template** to those pages in the Shopify Admin. > To show unique page content in the same template, use [dynamic content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in sections.

STEPS

In your theme editor (**Customize**): 1. Use the **Templates selector** to open the **Products**, **Collections**, **Pages**, **Blogs**, or **Blog posts** templates. 2. Click **Create template**. 3. Enter a **Name** for your new template and click **Create template**. > The new template will duplicate the settings of the original template. 4. Under **Preview**, click **Change** to preview different pages with this template. > If a warning icon **(!)** appears, you need to assign the template in your Shopify admin. 5. To assign a template, go to the page in the Shopify admin and use the **Theme template** menu to select a specific template. > Templates cannot be assigned on **unpublished** or **trial** themes. All changes to your templates will be saved but can only be assigned when purchased and published. 6. Click **Save**.

### Assign templates from unpublished theme *** Shopify only allows you to assign templates from your published theme. Shopify will not show templates from unpublished themes, unless they have the same name as the published theme’s templates. As a workaround, you can **create a duplicate template in the published theme and give it the same name as the template from the unpublished theme**. This new template will show in the Shopify admin and assigning it will apply the template to both themes.

STEPS

1. Open the theme editor for your published theme (**Customize**). 2. Use the template selector to find your currently assigned template. 3. Click **(+) Create template**. 4. Enter the exact same **Name** as the template in your unpublished theme. 5. Select the current template that the new template should be **based on**. > This will duplicate everything in the current template and will ensure nothing changes in your current theme when you assign the new template. 6. Click **Create template**. In your Shopify admin: 1. Go to the page you want to assign the template to. 2. Click the template dropdown and select your template. > For products and collections, you can [use the bulk editor to assign templates](https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates#bulk-template-changes) to more than one at a time. 3. Click **Save**

# About page Eclipse has two "**About us" page templates** with preset layouts based on the theme demo stores. Use these templates to design a page that tells your story, showcases your vision and team, and shares details about your locations and hours. {% hint style="info" %} Check out Shopify's post about [what to include in your "About Us" page](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages#about-us). {% endhint %} ## Add page and apply template *** In your Shopify admin, **add a page** to your online store, then **select the template** that you want to apply to that page. {% stepper %} {% step %} From your Shopify admin, go to **Online Store** > [**Pages**](https://admin.shopify.com/pages) {% endstep %} {% step %} Enter a **Title** for the page. For example: "About us". {% hint style="info" %} The **Title** and **Content** will not appear on the page template. All page content is added in the theme editor The title is used for the URL (e.g. **`www.store.com/about-us`**). {% endhint %} {% endstep %} {% step %} Click the **Template** menu, and select `about-1` or `about-2` template to apply it to the page. {% hint style="info" %} Learn how to [assign templates for **unpublished** themes](/eclipse/pages/templates/create-and-assign-templates#assign-templates-from-unpublished-theme). {% endhint %}

{% endstep %} {% step %} Click **Save**. {% endstep %} {% endstepper %} ## Edit page template *** In the theme editor, open the template to customize the layout and content of your page. {% stepper %} {% step %} #### Open template In the **Theme editor**, click the **Home page** templates menu. Click **Pages** and select the `about-1` or `about-2` template. {% endstep %} {% step %} #### Preview page In the side panel, next to **Preview**, click **Change** and select the page you created. {% hint style="info" %} A warning symbol **(!)** means that the template is not assigned to the current page. Go to **Online Store** > [**Pages**](https://admin.shopify.com/pages) to apply the template. {% endhint %} {% endstep %} {% step %} #### Add and edit sections Under **Template**, click the default sections to edit them, and click **(+) Add section** to add other [theme sections](/eclipse/sections/overview). {% endstep %} {% endstepper %} # Blog page Template The **Blogs page** lists your latest blog posts.

{% hint style="warning" %} **Editing a template will change all pages that use that template**. [Create and assign new templates](/eclipse/pages/templates/using-templates) to design different page layouts. [Add dynamic content](/eclipse/general/editing-themes/dynamic-content-with-metafields) to show page-specific content in the same template. {% endhint %} ## Customize page styles *** Change the page **color scheme** and adjust the **page width and padding**.


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Customize layout *** * Choose to show the **blog title**. * Change the **number of columns** and **articles per page**. * Change the **featured article color scheme** `Click Blog page section to find settings`

Setting	Description	Options
Show blog title	Display the title of the blog.
Articles per page	Set the number of articles to display per page.	1-12 Default: 8
Number of columns	Choose the number of columns for displaying articles.	2 3 Default

## Customize featured article *** The blog displays the **Featured article** by default. You can disable the **feature the first article** option to display all posts as a **Grid**. When enabled, you can customize the appearance of the featured articled: * Choose the **color scheme** * Change or remove **image overlay** * Adjust **heading size** of article title. `Click Blog page section to find settings`

Setting	Description	Options
Feature the first article	Display the first article in a featured format.
Color scheme	Select a set of colors to apply to the featured article section. You can add and define different color schemes in Theme settings > Colors. Learn more
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0 - 100% Default: 20%
Heading size	Change the size of the heading text from small to large.	1 - 8
Mobile heading size	For mobile screens, change the size of the heading text from small to large.	1 - 8

## Show category filters *** Choose to show **category filters** to allow visitors to filter blog posts by article categories. {% hint style="success" %} By default, all **blog post tags** are used as article categories. * Go to **Online Store > Blog posts** to edit **Tags** for each post. * Go to **Theme settings > Blog** to [limit which tags are shown as article categories](#choose-which-tags-to-show-as-categories). {% endhint %}

`Click Blog page section to find settings`

Setting	Description
Show category filters	Display article categories to allow visitors to filter blog posts.
Show category filter counts	Display the number of posts for each category. Important: If you have more than one blog, the count will include tagged posts for all blogs.

## Customize posts style *** By default, posts show a featured image, post details, and an optional 'read more' button. Click the **Blog posts** section to customize the appearance of posts: * Change the **image aspect ratio** of post images * Choose which **post details** to show * Choose to show optional **read more button** ### Change image aspect ratio *** Change the **aspect ratio** to crop post images to be a uniform shape. {% hint style="info" %} The **aspect ratio** of an image is the proportion between its **w**idth and **h**eight (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2). {% endhint %} `Click Blog posts section to find settings`

Setting	Description	Options
Image aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

### Show blog post details *** By default, posts display the title, date, author, and tags. Click **Blog posts** to choose which **blog post details to show**. {% hint style="success" %} To edit the post details, go to **Online Store > Blog posts** from the Shopify admin. {% endhint %}

`Click Blog posts section to find settings`

Setting	Description
Show article tags	Shows tags that you've added to posts in the Shopify admin. Go to Online Store > Blog posts to edit Tags for each post. Go to Theme settings > Blog to limit which tags are shown.
Show author	Display the name of who created the blog post.
Show published date	Display the date when the post was published.
Show excerpt	When checked, the first few lines of the post will appear below. You can add a custom excerpt to blog posts in your Shopify admin.

### Show read more button *** Chose to show a "Read more" button for each post. Clicking the post image or title will also redirect to the blog post page. `Click Blog posts section to find settings`

Setting	Description	Options
Show "Read more" button	Display a button that links to the blog post.
Button style	Change the style of the "Read more" button.	Solid Outline Default Text

## Enable scrolling category text *** Show a **scrolling text bar** with the blog post tags when hovered over. You can also change the **Scroll direction and speed**. {% hint style="success" %} By default, all **blog post tags** are displayed. * Go to **Online Store > Blog posts** to edit **Tags** for each post. * Go to **Theme settings > Blog** to [limit which tags are displayed](#choose-which-tags-to-show-as-categories). {% endhint %}

`Click Blog page section to find settings`

Setting	Description	Options
Enable scrolling category text on hover	Show scrolling category text when hovering over articles.
Scroll duration	Set the duration for the scrolling category text.	5-45 Default: 10
Scroll direction	Choose the direction for the scrolling category text.	Left Default Right

## Choose which tags to show as categories *** By default, all **blog post tags** are used as article categories. Article categories appear in [category filters](#show-category-filters), [scrolling category text](#enable-scrolling-category-text), and [article tags](#show-blog-post-details). You may not want to show all tags that you've added in your Shopify admin. To limit which tags are shown as article categories, go to **Theme settings > Blog.** In the **Article categories** field, enter the tags you want to use in a comma-separated list. For example: `Guides, News, Interviews`.

Article categories option in theme settings > blog

# Blog post Template The **Blog Post template** provides the design and layout of your blog post articles. Publish **Blog posts** to share store announcements, updates, and featured content, and help increase organic traffic to your site. {% hint style="info" %} Check out Shopify's guide on [How to start a blog and grow your audience](https://www.shopify.com/blog/how-to-start-a-blog). {% endhint %} ## Add blog posts in Shopify admin *** Before editing the **Blog post template**, you need to add at least one blog post in your Shopify admin. Blog posts use the **Featured image**, **Title**, **Content**, **Tags**, **Published date** and **Author**. {% hint style="success" %} Blog posts are a Shopify feature. Learn how to [create a blog](https://help.shopify.com/en/manual/online-store/blogs/adding-a-blog) and add [blog posts](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs). {% endhint %} ## Customize page style *** Click the page section to edit the **general styles**, available for all page templates:


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Customize post title block *** The **Title block** display the blog post title. You can customize the title width and text size. `Click Title block to find settings`

Setting	Description	Options
Full width title	Display the title at full width
Heading size	Set the size of the blog post title	1-8 Default: 6

### Show blog post details *** By default, posts display the published date, author, and tags. Click **Blog post** to choose which **blog post details to show**. {% hint style="success" %} To edit the post details, go to **Online Store > Blog posts** from the Shopify admin. {% endhint %}

Setting	Description
Show article tags	Display tags associated with the blog post
Show author	Display the author of the blog post
Show published date	Display the date the blog post was published

## Change featured image size *** Change the **width** and **height** of the featured image, for both desktop and mobile screens. {% hint style="success" %} The blog posts template display the **featured image** added in your Shopify admin. Go to your Shopify admin to upload images for your blog posts. {% endhint %} `Click Featured image block to find settings`

Setting	Description	Options
Width	Set the width of the featured image	Full width Full width padded Page width Default
Image height	Set the height of the featured image	Adapt to image Default Custom
Custom desktop height	For desktop, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 450px
Custom mobile height	For mobile, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 350px

## Enable post comments *** In the Shopify admin, you can choose to enable comments. The comment form includes fields for Name, Email, and Message. {% hint style="success" %} Blog posts comments are a Shopify feature. See Shopify's guides for [Managing comments on blog posts](https://help.shopify.com/en/manual/online-store/blogs/managing-comments). {% endhint %} ## Show share buttons *** By default, the **Share block** displays icons for sharing your post to social media. Use the drag-and-drop handles to **re-order** the block or **remove** the block. ### Enable native OS sharing *** Enable **native OS sharing** to replace share icons with sharing options on a user’s device. Visitors can share the blog post through apps like Messages, Email, or their social media apps.

`Click Share block to find settings` | Setting | Description | | --------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | Enable native OS sharing | When enabled, a "Share this" link will open the native sharing options for the user's device. | # Contact page Template Use the **Contact page template** to let customers message you through the contact form. * Customize the **content and layout** your contact page * Add **custom fields and buttons** to the custom form ## Create contact page *** You first need to **create a page** and **assign the contact template** in your Shopify admin. {% hint style="success" %} Pages are a Shopify feature: see Shopify's guide for [creating pages](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages). {% endhint %}

STEPS

In your **Shopify admin**: 1. Click **Online store > Pages**. 2. Click **Add page**. 3. Add a **Title** (e.g. "Contact us"). > The title will be used for the page URL (e.g. **`www.store.com/contact-us`**). > You don't need to add anything to the **Content** field. You will add the page content by editing the template in the theme editor. 4. Click the **Theme template** menu and select **contact** to assign the template to your page. > **Note**: Templates can't be assigned on unpublished themes. Your changes to templates will be saved and can be assigned when you buy and publish the theme. 5. Click **Save**.

## Set up contact form *** Click **(+) Add block** to add additional fields and inputs for your contact form.


Text input	Show a text field for customers to add a single word or line.
Text area	Show a text field for customers to add multiple lines.
Select dropdown	A menu of multiple options that requires a single choice.
Radio buttons	A list of buttons for multiple options that requires a single choice.
Checkbox	Add multiple checkboxes that allow for more than one selection.
Phone	A text field for the customer's phone number.
Email	A text field for your customer's email.
Submit	(Required) The contact button that sends the message.

### Add content blocks *** Click **(+) Add block** to add blocks for **Headings**, **Text**, and **Spacers** to help organize and explain the contact form fields. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block

### Show reCAPTCHA terms *** `Click Contact form section to find settings`

Setting	Description
Show reCAPTCHA terms	Show the terms of service and privacy policy for Google's reCAPTCHA form. Google reCAPTCHA is enabled by default on all Shopify stores to minimize spam from bots.

# Password page Template Before you launch your store, you can use Shopify's password page feature to restrict access to your store. When the password page is active, all store pages are hidden and will not appear in search engine results.

{% hint style="success" %} See Shopify's guide on [Password protection for your online store](https://help.shopify.com/en/manual/online-store/themes/password-page). {% endhint %} ## Customize page styles *** Click the page section to edit the **general styles**, available for all page templates:


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Set up password header *** The **Password page header** displays your store title and a login link to allow users to access the site with a password. * Change the **color scheme** of the password header * Change the header **layout** * Add a **logo image** * Enable the **transparent header** `Click Password header section to find settings`

Setting	Description	Options
Color scheme	Select a set of colors to apply to the password header. You can add and define different color schemes in Theme settings > Colors. Learn more
Layout	Position the logo to the left or center of the page header.	Logo center Default Logo left
Image	Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.	Default: Brand logo
Image width	Set the maximum width (in pixels) of the image on desktop.	20-350 px Default: 120
Mobile image width	Set the maximum width (in pixels) of the image on mobile.	20-250 px Default: 90
Transparent header	Make the header transparent.

## Set up background image *** `Click Password page section to find settings`

Setting	Description	Options
Background image	Select or upload an image for the password page background.
Mobile image	Select or upload an alternate image for mobile devices.
Desktop height	For desktop, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 100%
Custom mobile height	For mobile, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 100%

Setting

Description

Options

Overlay opacity

Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.

Set to 100% to display a solid color (instead of the image).

0 - 100%

Default: 20%

## Add content blocks *** Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block

## Show share buttons *** Click **(+) Add block** and select **Share** to show icons for sharing your page to social media. The **Native OS sharing** option replaces the social sharing icons with button that allows users to share to apps on their device (e.g. Messages). `Click Share block to find settings`

Setting	Description	Options
Enable native OS sharing	Allow sharing using the device's native sharing options

# Search page Template The **Search page** appears when visitors submit a search using the search bar. You can customize the layout and results styles, and enable sort and filter options. {% hint style="success" %} You can customize search results with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Create custom filters, select result types, and add "synonym groups" to show relevant results. See Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery) to learn more. {% endhint %} ## Customize page styles *** Click the page section to edit the **general styles**, available for all page templates:


Color sYcheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Set up search results grid *** `Click Search page section to find settings`

Setting	Description	Options
Products per page	Set the maximum number of products to display per page.	1-50 Default: 20
Number of columns on desktop	Select the number of search results to show per row on desktop.	2 3 Default 4
Number of columns on mobile	Select the number of search results to show per row on mobile.	1 2 Default
Show total number of results	Display the total number of results listed.

## Set up filtering and sorting *** `Click Search page section to find settings`

Setting	Description	Options
Enable sorting	Allow customers to sort results.
Enable filtering	Allow customers to filter by product options, product type, price, availability, and more.
Show sticky filter and sort button	Allow customers to filter results by type, price, availability, and more.
Filter group default	Choose to hide values of filter groups until visitors click to reveal them.	First opened Default All open All closed
Color swatch layout	Choose how to display color swatch filter options.	Compact Default Expanded

# Sections **Sections** are the basic components of your pages. You can add, edit, and rearrange sections to create different layouts with the content and features you want. Eclipse includes **static sections** that appear on every page and **dynamic sections** that can be re-used and customized to design unique pages. {% hint style="info" %} For a general introduction, read our [guide to using sections](/eclipse/sections/overview/section-styles). {% endhint %}

Static sections

*** **Static sections** appear on every page in the same position and their settings are applied site-wide.


/pages/4nwxCEuZ4oW62L8oglyH
/pages/prrlMAYCguxucI4qiimI
/pages/f2nUvotrwJi2X897VCbl

Dynamic sections

*** **Dynamic sections** have their own settings for every template that you can add or remove, reuse, and rearrange. ### Feature content Showcase images, video and text in various formats


/pages/woMyvu3L3wOCExmP4ndx
/pages/PUhIY5iN3E7VDhcm4CWn
/pages/DSZKLWnDf7xUEEPaUT0p
/pages/fpXwJxYqjAjWbRaAyQPB
/pages/NRFosXBTTTU41eQshMcL
/pages/tJPKLPmRt244vyIqxA2E
/pages/7QtML3Xydj5OtnVH4HDU


/pages/0MflR16gsRx15gkF5SmR
/pages/3AiQW46LdK8CbNJ2ONvR
/pages/N8HxuhgIyoDTOZn7xUj3
/pages/uhLDR6NP1GbWwCml0jVd
/pages/51YEPN0Ac4vrFQpgzXUo
/pages/fV5qyLOm7XO38bIRHbQ0
/pages/oCR4N8zn2CvvaGqyECR8

### Merchandising Showcase your products and collections


/pages/3PeP1XIJCWNcx51zFmAF
/pages/hLezDaMCXzmjjUrivMJx
/pages/USBap1sw4BRBHIE4Io1b
/pages/rcRaM2D0fRLHwO9zqhWL
/pages/hI7qahbQjuoIo7b28FZt

### Blog and engagement Showcase blog content and engage with customers


/pages/hqcVYtpA7M5vKzFlxocC
/pages/MzivGqjx7RoA2J7WXw2L
/pages/mV9uWQ3XDoM8Qh00YAUc

# Using sections **Sections** are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages. ## Add sections *** {% columns %} {% column width="50%" %} Sections are listed in the theme editor **sidebar** in the order they appear on the page. * Click the **(+) Add section** button in the theme editor sidebar. * Use the **drag handles** (**⋮⋮**) to change the order of your sections and blocks * Use the **Remove section** button to delete them or click the **eye icon** to hide them. {% endcolumn %} {% column width="50%" %}

Highlighted areas of the Shopify theme editor showing how to open templates, add sections, and re-order sections.

{% endcolumn %} {% endcolumns %} {% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in sections using the same template. {% endhint %} ### Add blocks Most sections are made up of individual **Blocks** for text, media, buttons, or other content, which are nested under sections in the editor panel. * Click **(+) Add block** button to add or select the type of block you wish to add. * Click the **block** to open the block settings.

## Section header *** Some sections have a **Section header** that appears above the main content. Other section may use [content blocks](/eclipse/sections/overview/content-blocks) or overlay text for the main headings. Click the section to find the header settings. * Add a **heading**, **text**, and optional **link**. * To remove the section header, delete any text in these fields.

`Click the section to find settings`

Setting	Description
Heading	Change or remove the title of the section.
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.
Text	Add multiple lines of rich text below the heading.
Link URL	Select a page or URL for the link.
Link label	Add text to display the link.

## Section styles *** All sections include general style options for **Colors** and **Spacing**. In the editor side panel, click the section to find settings for **Color scheme**, **Section width**, and **Section padding**. ### Color schemes *** {% columns %} {% column width="66.66666666666666%" %} You can change the section or block colors by assigning a color scheme using the color scheme picker. Click the section or block to find the **Color scheme** option. {% endcolumn %} {% column width="33.33333333333334%" %}

{% endcolumn %} {% endcolumns %} {% hint style="info" %} A **color scheme** consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes. {% endhint %} ### Edit color schemes You can add and define different color schemes in **Theme settings > Colors**. These color schemes will appear as options in section and block settings. In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme.

#### Color scheme options Every color scheme has the following color options.

General colors	Description
Background	The background of the section, which spans the full height and width.
Background gradient	Some sections can use a gradient background instead of a solid color background. You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.
Text	All text included in the section.
Lines and borders	All lines and borders that appear between or within sections.
Accent	Special design elements in sections
Accent foreground	Text or icons that overlay accent elements
Buttons
Solid buttons	The background and text colors for buttons with solid style
Outline buttons	The background, text, and border colors for buttons with outline style
Buttons with icon	The background and foreground colors for buttons with icons

### Overlay colors *** When text appears over images or videos, an overlay color is used to provide contrast between the text and background, keeping it readable and [accessible for everyone](/eclipse/general/accessibility).

{% stepper %} {% step %} In the section or block settings, select a **color scheme.** {% hint style="info" %} The overlay uses the color scheme's **background** color. If the color scheme has a **background gradient**, it will be used instead.\ \ Background gradients fade across a range of hues. Learn more in Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients). {% endhint %} {% endstep %} {% step %} Use the **overlay opacity** slider to make the tint more or less transparent. {% hint style="info" %} Set the opacity to 0% to turn off the tint overlay. Set the opacity to 100% to create **solid color blocks or banners** in sections like [Grid](/eclipse/sections/grid), [Image hero](/eclipse/sections/image-hero), or [Slideshow](/eclipse/sections/slideshow). {% endhint %} {% endstep %} {% endstepper %} `Click the section or block to find settings`

Setting	Description	Options
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0 - 100 %

### Section width *** {% hint style="warning" %} Width options were updated in v4.0. View the [changelog](/eclipse/changelog) and [update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} Change the **Section width** to adjust how far the section spans across the page. In the section settings, find **Width** options under *Section.* * The **page width** has a fixed width of 1600px * Other width options adapt to the visitor's browser width *Available page width options vary depending on the type of section. The* **Full width (background only)** *is available only for* [*Slideshow*](/eclipse/sections/slideshow)*,* [*Image hero*](/eclipse/sections/image-hero)*,* [*Video hero*](/eclipse/sections/video-hero)*,* [*Newsletter*](/eclipse/sections/email-signup) *and* [*Collection banner*](/eclipse/collections/collection-page/banner)*.*


Page width	Section background and content span the page width (1600px).	/files/KXOwANhnH80jQD0D7bUN
Full width (padded)	Section background spans the screen's full width with some padding, and content spans the width of the background.	/files/k8ye35eg8K9kPTyHbL79
Full width (background only)	Section background media spans the full screen and content spans the page width (1600px)	/files/L8Yrq5xpqN3m2y39Jyhp
Full width	Both section background and content span the screen's full width.	/files/KN0tRx1sNflpkl3O0DQO

### Section padding *** Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.

# Content blocks Many sections support the same 'rich content' blocks for text, images, buttons, style elements, and custom Liquid. You can add and re-arrange these blocks to customize the section layout. > Some sections have unique blocks and settings. See detailed guides for these sections: [Blog posts](/eclipse/sections/blog-posts), [Contact form](/eclipse/sections/contact-form), [Featured collection](/eclipse/sections/featured-collection), [Multi-column](/eclipse/sections/multi-column), [Slideshow](/eclipse/sections/slideshow).

## Heading block *** Add heading text and change its size. Go to [Theme settings > Typography](/eclipse/theme-settings/typography#headings) to change the font for all headings. > Sections: [Contact form](/eclipse/sections/contact-form), [Email signup](/eclipse/sections/email-signup), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Heading block to find settings`

Setting	Description	Options
Heading	The title of the block.
Heading size	Change the size of the heading text from small to large.	1-8 Default: 8
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.	H2 - H6

## Text block *** Add multiple lines of text and change its size. Go to [Theme settings > Typography](/eclipse/theme-settings/typography#body-text) to change the font for all body text. > Sections: [Contact form](/eclipse/sections/contact-form), [Email signup](/eclipse/sections/email-signup), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Product overview](/eclipse/product-pages/product-content-blocks/text-block), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Text block to find settings`

Setting	Description	Options
Text	Add rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size	Change the size of the text.	1-8 Default: 3

## Overline block *** Add small heading text. Go to [Theme settings > Typography](/eclipse/theme-settings/typography#headings) to change the font for all overline text. > Sections: [Email signup](/eclipse/sections/email-signup), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Overline block to find settings`

Setting	Description
Text	Add small heading text to use as a label.

## Button block *** Add a button to link to another page and select a button style. Go to [Theme settings > Typography](/eclipse/theme-settings/typography#body-text) to change the button fonts. When multiple button blocks are ordered together in the section panel, they will display in a single row.

> Sections: [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) {% hint style="info" %} The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380) {% endhint %} `Click Button block to find settings`

Setting	Description	Options
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button.	Default: "Button"
Button style	Change the style of the button.	Solid Default Outline Text

## Image block *** Add an image and adjust its width. > Sections: [Email signup](/eclipse/sections/email-signup), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Product overview](/eclipse/product-pages/product-content-blocks/text-block), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Image block to find settings`

Setting	Description	Options
Image	Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.
Image size	Set the maximum width (in pixels) of the image on desktop.	50 - 1000px Default: 500px
Mobile image size	Set the maximum width (in pixels) of the image on mobile.	50 - 1000 px Default: 250px

## Spacer block *** Customize the section layout by adding space between the content blocks. > Sections: [Contact form](/eclipse/sections/contact-form), [Email signup](/eclipse/sections/email-signup), [Footer](/eclipse/footer/footer/custom-liquid), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Product overview](/eclipse/product-pages/product-content-blocks/text-block), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Spacer block to find settings`

Setting	Description	Options
Spacing	Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.	1-50 Default: 40
Mobile spacing	Add a gap of empty space between blocks.	1-100 Default: 40

## Divider block *** Customize the section layout by adding a divider line between the content blocks. > Sections: [Email signup](/eclipse/sections/email-signup), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Product overview](/eclipse/product-pages/product-content-blocks/text-block), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) `Click Divider block to find settings`

Setting	Description	Options
Thickness	Use the slider to increase the thickness of the divider line.	1-5 Default: 1
Spacing	Use the sliders to add space at the top or bottom of the divider. Set to 0 to remove spacing.	1-50 Default: 0

## Liquid block *** > Sections: [Footer](/eclipse/footer/footer/custom-liquid), [Image hero](/eclipse/sections/image-hero), [Image with text](/eclipse/sections/image-with-text), [Product overview](/eclipse/product-pages/product-content-blocks/text-block), [Rich text](/eclipse/sections/rich-text-1), [Video](/eclipse/sections/video), [Video hero](/eclipse/sections/video-hero), [Video with text](/eclipse/sections/video-with-text) With the **Custom Liquid** setting, you can extend your theme by adding snippets of Liquid or HTML code as a block or section in the theme editor. The Custom Liquid block provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code. {% hint style="warning" %} **We do not support code customizations**. Always test code changes on an unpublished copy of your theme. For assistance, we recommend connecting with a professional developer. [Find a certified Fluorescent partner](https://partners.fluorescent.co/). {% endhint %} `Click Liquid block to find settings`

Setting	Description
Custom Liquid	Add custom Liquid code for apps or custom content. See Shopify's Liquid reference guide and Liquid code examples to learn more.

# Blog posts Add the **Blogs posts** section to display your latest posts. * Use the **Grid** or **Featured post** style to showcase the most recent posts. * Display **Category text** that shows scrolling post tags on featured posts. * Customize the appearance and details of **blog post cards**.

{% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Blog posts**. Click and hold the drag handles **`⋮⋮`** to re-order sections. Click the section to add a **section header** and change **section styles** for colors and spacing.


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

### Select blog posts to show *** {% hint style="success" %} The section uses your blog post's **Featured image**, **Title**, **Content**, **Tags**, **Published date** and **Author**. See Shopify's guides to [create a blog](https://help.shopify.com/en/manual/online-store/blogs/adding-a-blog) and add [blog posts](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs). {% endhint %} Select which posts to display, and choose how many you want to show. `Click Blog posts section to find settings`

Setting

Description

Options

Blog

Select a blog to display its latest posts, from newest to oldest. Click Change to select a different blog.

Number of articles

Choose how many posts to display in the section.

1 - 8

Default: 6

## Use grid or featured article style *** Choose a section layout. Display all posts as a **Grid** or use the **Featured article** style to showcase your most recent post. `Click Blog posts section to find settings`

Setting	Description	Options
Style	Change the layout of the blog posts. Featured article: Displays the most recent article as the largest post and the rest in the sidebar. Grid: Displays the 2 most recent articles as cards and the rest in the sidebar.	Featured article Default Grid
Featured article color scheme	Select a set of colors to apply to the featured article. You can add and define different color schemes in Theme settings > Colors. Learn more

## Enable scrolling category text *** Show a scrolling text bar with the featured post's tags when hovered over. You can also change the **Scroll direction and speed**. {% hint style="success" %} From your Shopify Admin, go to **Blogs** and click to open your blog post. Enter tags in the **Tags** section that you want to appear in the scrolling category text. {% endhint %}

`Click Blog posts section to find settings`

Setting	Description	Options
Enable scrolling category text on hover	Show an auto-scrolling bar with the featured post's tag.
Scroll duration	Set the number of seconds it takes for the category text to fully rotate.	5 - 45 seconds Default: 10
Scroll direction	Choose which way the category text moves.	Left Default Right

## Customize blog post cards *** Change the visual style of the featured posts, including the **image aspect ratio, blog post details,** and **button.** ### Change image aspect ratio *** Change the **aspect ratio** to crop post images to be a uniform shape. {% hint style="info" %} The **aspect ratio** of an image is the proportion between its **w**idth and **h**eight (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2). {% endhint %} `Click Blog posts section to find settings`

Setting	Description	Options
Image aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

### Show blog post details *** Choose which **blog post details to show**. {% hint style="success" %} To edit the post details, go to **Online Store > Blog posts** from the Shopify admin. {% endhint %} `Click Blog posts section to find settings`

Setting	Description
Show article tags	Shows tags that you've added to posts in the Shopify admin.
Show author	Display the name of who created the blog post.
Show published date	Display the date when the post was published.
Show excerpt	When checked, the first few lines of the post will appear below. You can add a custom excerpt to blog posts in your Shopify admin.

### Show read more button *** `Click Blog posts section to find settings`

Setting	Description	Options
Show "Read more" button	Display a button that links to the blog post.
Button style	Change the style of the "Read more" button.	Solid Outline Default Text

## Customize latest posts sidebar *** The **Latest posts sidebar** display the remaining posts from your blog, next to the featured posts. `Click Blog posts section to find settings`

Setting	Description	Options
Enable thumbnail hover effect	Display the blog post image when hovering over an article in the sidebar.
Heading	The title of latest posts sidebar.	Default: "Latest post"

# Collapsible content The **Collapsible content** section has expandable rows that reveal more text when clicked. Use this section for Frequently Asked Questions or neatly organize information about your products or store. * Add **Rows** with a title and expandable text. * Display an **icon** next to row titles. * Arrange rows into **groups** with subheadings.


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

### Section button *** `Click section to find settings`

Setting	Description	Options
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button.
Button style	Change the style of the button.	Solid Outline Text

## Add collapsible row blocks *** Click **(+) Add Row** to create multiple collapsible rows. Use the drag-and-drop handles **`⋮⋮`** to re-order row blocks. Click a row block to start adding content. * Add **Heading** for the row title * Add **Text** to reveal when row is opened * Add **Icon** next to the heading `Click Row block to find settings`

Setting	Description	Options
Expand by default	Show row as already opened with the text revealed.
Icon	Select from 30+ icons to display next to the row heading.	Default: None
Custom icon image	Upload your own icon image to display next the heading. Use PNG files for images with a transparent background. Recommended minimum dimensions of 50px by 50px.
Heading	The title of the row.	Default: "Frequently asked question"
Text	Add text that's revealed when the row is opened. Use the buttons to make the text bold or italicized, or to add a link.	Default: "This is an example..."

### Change row text style *** Change the **font** and **size** of the heading and text in the row block. `Click section to find settings`

Setting

Description

Options

Row font

Change the style of the row heading and text. Text styles are based on your theme settings.

Heading
Body Default

Row text size

Change the size of the text.

1-8

Default: 6

## Add group headings *** Add **Group heading** blocks to arrange multiple collapsible rows into groups.

`Click Group heading block to find settings`

Setting	Description	Options
Heading	The title for groups of collapsible rows.	Default: "Group heading"

# Collection list The **Collection list** section displays collections in a **Grid** or **Slider** layout. * Select which collections you want to show with their featured image and title. * Customize the appearance and aspect ratio of the collection images.


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

## Select collections to show *** Select a list of your collections to show. For each collection, the section displays a tile with an image and title. `Click Collection list section to find settings:`

Setting	Description
Collection	Click Select collections to choose which of your collections to show in the section.

## Use grid or slider layout *** Display collections in a **Grid** or single-row **Slider**. Then choose the **Number of columns** to display in one row. `Click section to find settings`

Setting	Description	Options
Layout	Display collection list items in multiple rows or in a single row that visitors can rotate through.	Slider Default Grid
Show slider scrollbar	When checked, the scrollbar appears below the collections and allows visitors to move through the slider.
Number of columns on desktop	Select the number of collections per row on desktop screens.	2 3 Default 4
Number of columns on mobile	Select the number of collections per row on mobile screens.	1 Default 2

## Set up collection images *** Choose which images to use for the collection items. By default, the collection image will be used. If no collection image is set, the first product's image will be used. {% hint style="success" %} To change the collection image, go to **Products > Collections** in your Shopify admin. Click the name of the collection, then click **Add image** or **Edit > Add image**. {% endhint %}


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

`Click section to find settings`

Setting	Description	Options
Image source	Choose which image to display for the collection list items.	First product image Collection image Default

### Change image aspect ratio *** Change the **aspect ratio** to crop images to be a uniform shape. {% hint style="info" %} An image's **aspect ratio** is the proportion between its **w**idth and **h**eight (w:h). A square has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2). {% endhint %} `Click section to find settings`

Setting	Description	Options
Aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

# Contact form Add a **Contact form** to allow customers to get in touch with questions and feedback. * Add custom text fields, buttons, checkboxes, and other options for customers to fill out. * To create a full contact page, see the [contact page template](/eclipse/pages/contact-page). {% hint style="success" %} Sending and receiving messages through the contact form is a Shopify feature. You can test Shopify's free theme Dawn to see if an issue is platform-related. For assistance, you can contact [Shopify support](https://help.shopify.com/en/support/). {% endhint %}


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

### Section header *** The **Section header** appears above the section. Add **Headings** and **Text,** then adjust their **size** and **center** them in the header. `Click Contact form section to find settings`

Setting	Description	Options
Center header	Position the header content in the center above the section.
Overline	The small text above the heading.	Default: "Overline"
Heading	The title of the section.	Default: "Contact"
Heading size	Change the size of the heading text from small to large.	1-8 Default: 5
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.	H1 - H6
Text	Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size	Adjust the size of the section text from small to large.	1-8 Default: 3

## Set up contact form *** Add various types of **form blocks** to create your contact form.


Text input	Show a text field for customers to add a single word or line.
Text area	Show a text field for customers to add multiple lines.
Select dropdown	A menu of multiple options that requires a single choice.
Radio buttons	A list of buttons for multiple options that requires a single choice.
Checkbox	Multiple checkboxes that allow for more than one selection.
Phone	A text field for the customer's phone number.
Email	A text field for your customer's email.
Submit	(Required) The contact button that sends the message.


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block

### Show reCAPTCHA terms *** Google reCAPTCHA is enabled by default on all Shopify stores to minimize spam from bots. `Click Contact form section to find settings`

Setting	Description
Show reCAPTCHA terms	Show the terms of service and privacy policy for Google's reCAPTCHA form.

# Featured collection Use the **Featured collection** section to display products from a selected collection as a single-row **slider.** {% hint style="info" %} Add a [Promotion tile](#add-promotion-tile) with featured image or autoplay video (without sound). {% endhint %}


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

## Select feature collection *** Select a **Collection** from your Shopify admin to display its products. `Click Featured collection section to find settings`

Setting	Description
Collection	Select a collection to display its products. Collections are created and edited in your Shopify admin.

## Change layout *** Adjust the layout by changing the number of columns for desktop and mobile. `Click Featured collection section to find settings`

Setting	Description	Options
Maximum number of products	Set the maximum number of products that should be displayed from the collection.	1-12 Default: 8
Number of columns on desktop	Select the number of products per row on desktop screens.	2 3 Default 4
Number of columns on mobile	Select the number of products per row on mobile screens.	1 2 Default
Show slider scrollbar	When checked, the scrollbar appears below the products and allows visitors to move through the slider.

## Add promotion tile *** Add a **promotion tile** with an image or autoplay video, promotional text, and link to other pages. ### Add image or autoplay video *** Add an image or autoplay video (without sound) as the promotion tile's background. {% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Promotion tile block to find settings`

Setting	Description
Image	Select or upload an image for the promotion tile.
Mobile image	Select or upload an alternate image for mobile devices.
Video	Add a short autoplay video (without sound) to replace the image.

### Add image overlay *** The image **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability. * Choose a **Color scheme** for the overlay and overlay text * Change the **Opacity** to make the overlay more or less transparent {% hint style="info" %} #### Use overlay for solid color slide You can set the **Overlay opacity** to 100% to show solid color tile. {% endhint %} `Click Promotion tile block to find settings`

Setting	Description	Options
Overlay opacity	Adjust the transparency of the color overlay on the promotion tile.	0 - 100 % Default: 20

### Add text *** `Click Promotion tile block to find settings`

Setting	Description	Options
Heading	Add a title for the promotion tile.	Default: Promotion
Text	Add descriptive text for the promotion.
Text alignment	Set the position of the text content within the promotion tile.	Top / Middle / Bottom Left / Center / Right

### Add link and button *** You can make the promotion tile a clickable link or add a button to redirect visitors to another page.

Setting	Description	Options
Link URL	Enter the URL that you want the promotion tile to link to.
Button label	Enter the text to display on the button.	Default: Shop now
Button style	Choose the visual style of the button.	Solid Default Outline Text
Button placement	Select where to position the button within the promotion tile.	Standard Bottom-anchored Default

# Featured links Use the **Featured links** section to show large links with an image showcase that changes when links are hovered over.


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Add featured links *** Click a **Link block** to add a URL and text for the featured links. Click and hold the drag handles **`⋮⋮`** to re-order link blocks. `Click Link block to find settings`

Setting	Description
Link URL	Select a page or URL for the link.
Link label	Enter text for the link.
Image	Select or upload an image that displays when the link is hovered over. The image showcase must be enabled.
Underline	When enabled, the link text will be underlined.

## Change link styles *** In the section settings, change the layout and text styles of the featured links. * Choose the **display style** for desktop and mobile * Change the text **font** and **size** * Adjust the **line height** between links * Choose the **separator style** between links

`Click Featured links section to find settings`

Setting	Description	Options
Link text font	Choose the font for the link text, as selected in your theme settings.	Heading Default Body
Text link size	Change the font size for all link text from small to large.	1 - 8 Default: 3
Link line height	Adjust the amount of vertical space between links.	1 - 2 Default: 1.3
Desktop display style	For desktop screens, change the layout of links.	Inline Default Stacked
Mobile display style	For mobile screens, change the layout of links.	Inline Default Stacked
Inline link style separator	For "Inline" style, choose the character that separates each link.	Comma spaced Default Dash Forward slash

## Show product counts for collections *** If a featured link points to one of your collections, you can display the number of products in that collection.

`Click Featured links section to find settings`

Setting	Description
Show product counts	When enabled, featured links to collections will display the number of products in the collection.

## Image showcase *** Display an image next to the featured links. When hovering over a featured link, display an image.

`Click Featured links section to find settings`

Setting	Description	Options
Enable image showcase	Display an image that changes when links are hovered over.
Default showcase image	Select or upload an image to display first, before links are hovered over. If no image is uploaded, the default will be the first link's image.
Image width	For mobile screens, adjust the space between content blocks.	40 - 60 %
Image position	Display the image showcase on the left or right of the featured links.	Left Right
Aspect ratio	Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H).	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)
Show thumbnails on mobile	On mobile, display images next to the featured links. Only applies to "Stacked" mobile display style.

## Section header *** Add a **Heading** above the featured links and a **Button** below**.** `Click Featured links section to find settings`

Setting	Description	Options
Heading	Enter heading text to show above the featured links.
Heading size	Change the size of the heading text from small to large.	1-8 Default: 8
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.	H1 - H6
Button link	Select a page or URL for the button.
Button label	Enter text for the button.
Button style	Choose the visual style of the button.	Solid Default Outline Text

# Feature product {% hint style="info" %} The Featured product section was added in v1.2.0 — Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access the latest features. {% endhint %} Add a **Featured product** section to any page to allow customers to view and add an item directly to their cart. Customize the layout with options for the media gallery and product detail blocks, and add custom content blocks.

{% hint style="warning" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Featured product**. Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Select product *** Click the section to open the settings. Click **Select product** for the Featured product option. {% hint style="success" %} Products are created and edited in your Shopify admin. Learn more about managing products in [Shopify's Products manual](https://help.shopify.com/en/manual/products). {% endhint %} ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

### Sticky effect *** The **Sticky effect** makes either the gallery or product details remain at the top of the screen when scrolling down. You may want to enable this option to keep the add-to-cart button visible or keep the product images visible. * **Sticky gallery** only applies to thumbnail gallery layouts. * **Sticky product details** applies when the gallery is longer than the product details. * Select **No sticky effect** to disable this option. ## Media gallery *** Click the Featured product section to customize the layout of your product media.


Gallery layout	Change the layout, size, position, and shape of your images		/pages/xHSCxA4JXppUU1PTbj98
Media grouping	Reveal images for the selected variant only.		/pages/VH11cL5rsvxSCaLSYnbH

## Featured product blocks *** The **Featured product** section contains all the blocks that make up your product form, including product information, variant selectors, buy buttons, and additional feature blocks. In the editor side panel, click **(+) Add block** to insert into the **Featured product**. Click and hold the drag handles **`⋮⋮`** to re-order blocks, and **hide** or **delete** blocks using the icons. ### Default blocks *** The **default blocks** show essential product information and purchasing options. Click a block to find its settings.


Title
Vendor
SKU

Description

Change text size
Show as collapsible row

/pages/uxw9wBof0eQyNvDNNiEh

Price

Show discounts

Sale and sold out badges
Shop Pay Instalments

/pages/owNdA6drNyY8S3NShhdG

Quantity selector

Show or hide quantity label

Variant selector

Choose selector style

Show swatches

Add info popup (product guide)

/pages/5TuK6lgxJb5c1H2WD2FA

Buy buttons

Choose button style

Show dynamic checkout buttons

Show pickup availability

/pages/1CS5FY9RBOnUjMR3qRzL

### Content blocks *** Add more blocks with custom content and features to the featured product section.


Collapsible row	Description.	/pages/JXwSFrWS5WBrWKjkJiXK
Complementary products		/pages/wKfSEZOr3mnW5sKVCczG
Custom options		/pages/6I0nlgPMeAiZGNJXUWxg
Featured icon with text	Description.	/pages/Ug0RI0DCr5i244UFarCz
Icon with text	Description.	/pages/ykErZ4eoIOQjwRT4yOhb
Image	Description.	/pages/g0rogOOuSRCdVEa7prHv
Inventory status		/pages/7TyZyf4lqbCZOs5nL5kg
Popup		/pages/O9dOcoiSiVJSYwEonE0f
Product rating		/pages/BsPF0lvW6wZkEzLm7NW3
Share icons		/pages/ymEUveqYE6JoZvpbGYx6
Text	Description.	/pages/ifHgmaXAmEhxBJVGq9If
Custom Liquid		/pages/zbbxSdlA7oVIq8PjG1Gq

# Grid {% hint style="info" %} This section is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} The **Grid** section displays a flexible collage of images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

## Set up section *** In the editor side panel, click **(+) Add section** and select **Grid**. Click and hold the drag handles **`⋮⋮`** to re-order sections. Click the section to add a **section header** and change **section styles** for colors and spacing.


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

## Set up grid items *** Add **Grid item** blocks with background images or autoplay videos. Create different layouts by reordering the blocks with the drag-and-drop handles **`⋮⋮`** and customize the width and height of each block. * Add background **images** or **autoplay videos**. * Add **headings** and **buttons** with selected positions * Change the **width** and **height** of each item ### Add background media *** Add an image or autoplay video (without sound) as the grid item's background.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 15 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Grid item block to find settings`

Setting	Description
Image	Select or upload an image.
Mobile image	Select or upload an alternate image to display on mobile screens.
Video	Add a short autoplay video (without sound) to replace the image.
Mobile video	Upload an alternate video to display on mobile screens.

### Change width and height *** Adjust the width and height of each block to create unique layouts. `Click Grid item block to find settings`

Setting	Description
Width	Choose the width of the grid item as a percentage of the section width. Select 33%, 50%, 66%, or 100%.
Height	For desktop and mobile, change the height of the grid item between 300 to 800 pixel.

### Add content *** Add headings, text, and optional button to overlay the grid media. `Click Grid item block to find settings`

Setting	Description
Content position	For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.
Text alignment	For both desktop and mobile
Content width	Choose to display the content full width or a custom width. Select Custom width to set the maximum content width between 100 to 900 pixels.
Overline	Add text to show a small heading above the main heading.
Heading	Add text to show a main heading.
Heading size	Change the font size of the heading from small (1) to large (8).
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.
Text	Add text to show a subheading below the main heading.
Text size	Change the font size of the text from small (1) to large (8).
Button link	Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.
Button label	Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).
Button style	Change the style of the button. Select Solid, Outline, or Text.
Button size	Change the size of the button to Small or Regular.

## Scrolling text *** Display scrolling text around the edges of grid items. 1. In the grid item block settings, add the **text** you want to show. 2. Then, in the section settings, change the style of scrolling text: * Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end. * Choose to scroll content towards the **Left** or **Right**. * Show an icon and change the text divider `Click section for settings`

Setting	Description	Options
Enable scrolling text	Toggle on to rotate scrolling text added to grid blocks.
Scroll duration	Change the number of seconds it takes for the content to scroll from beginning to end.	5 - 45 secs
Scroll direction	Choose the direction of scrolling.	Left Default Right
Text divider	Display an icon or dot between scrolling text blocks.	Icon Dot None
Icon	For the icon text divider, select from 30+ free icons.

## Grid spacing *** Adjust the **grid spacing** between grid blocks on desktop and mobile screens. `Click section to find settings`

Setting	Description
Desktop spacing	For desktop screens, adjust spacing between the grid blocks: between 0 and 60 pixels.
Mobile spacing	For mobile screens, adjust spacing between the grid blocks: between 0 and 50 pixels6

# Icon with text columns {% hint style="info" %} This section is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} Use the **Icon with text columns** section to display a row of text blocks with icons. You can highlight your company values, process, or key features of your product. * Add columns with icons, text, and an optional link. * Change the icon color and size * Change the layout and alignment

{% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Icon with text columns** Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

### Section layout *** In the section settings, you can adjust the overall layout and style of the column blocks. * Change the icon size and color * Choose the number of **columns per row** * Change the amount of **spacing** between columns * On mobile, display columns as **Stacked** (multiple rows) or **Slider** (single row). `Click section for settings`

Setting	Description	Options
Icon color	Choose an icon color based on the section's color scheme.	Accent Text
Icon width	Adjust the width of the icon for desktop screens. Make sure the icon width does not exceed the width of your custom image.	12 - 74 px
Icon alignment	Place the icon above or to the left of the column text.	Icon above, text center Icon above, text left Icon left, text left
Columns per row	Select the number of columns to display on desktop screens.	2 - 5
Column spacing	Choose the amount of spacing between column blocks.	Small Medium Large
(Mobile) Layout	Display blocks in a Stacked single column or as a single row carousel.	Stacked Slider
(Mobile) Icon width	Adjust the width of the icon for mobile screens. Make sure the icon width does not exceed the width of your custom image.
(Mobile) Icon alignment	Place the icon above or to the left of the column text.

## Add column blocks *** Add column blocks with **icons, text,** and optional **link**. In the Icon with text columns section, click **(+) Add Column**. Click and hold the drag handles **`⋮⋮`** to rearrange the blocks. Click the **Column block** to add content. * Select from 30+ icons or upload a custom icon image * Add column headings and text * Make the icon a clickable link `Click column block for settings`

Setting	Description
Icon	Select from 30+ icons to show in the column.
Custom icon image	Upload your own icon to show in the scrolling content. We recommend a `.png` image with a transparent background and minimum dimensions of 50px by 50px.
Icon link	Add a link to redirect visitors when they click the icon.
Heading	Add text as the column title.
Text	Add multiple lines of text below the heading.

# Image hero {% hint style="info" %} The Image hero section was added in v1.2.0 — [Update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} The **Image hero** section displays a large image banner with overlaid headings, text, and buttons. {% hint style="warning" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Image hero**. Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	#section-colors
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up hero image *** Upload an **Image** and adjust its **Height**, **Focal point**, and color **Overlay** or **Gradient**. Add a **Mobile-specific image** for the best results on smaller screens.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

`Click Image hero section to find settings`

Setting	Description
Image	Select or upload an image to display as the hero image. There are no required images dimensions. We simply recommend uploaded images have a minimum width of `2500px` for optimal quality across all devices.
Mobile image	Select or upload an alternate image to display on mobile devices. You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.
Background link	Select a page or URL to make the entire image a clickable link.
Image animation	Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.

### Set image height *** Under **Image height**, choose to display the image with a **Fixed** or **Relative** height. * **Fixed** heights maintain the same pixel height on all screens. * **Relative** heights adapt the image height as a percentage of the screen height. `Click Image hero section to find settings`

Setting	Description	Options
Desktop height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 650px
Mobile height	Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 450px


Overline	Add small label heading.	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Heading	Add title heading.	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	Add multiple lines of rich text.	/pages/1RQDWwxKzKWmtVBL177n#text-block
Button	Add buttons with custom styles.	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	Add images with custom sizes.	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	Add space between blocks.	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	Add border between blocks.	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	Add Liquid code block.	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** Change the **position** and **width** of the content blocks that overlay the image. `Click Image hero section to find settings`

Setting	Description	Options
Content width	Use the sliders to set the maximum width (in pixels) of the section content.	200 - 1000 px Default: 500
Text position	Set the position of the text content for desktop screens.	Top / Middle / Bottom Left / Center / Right
Mobile text position	Set the position of the text content for mobile screens.	Top / Middle / Bottom Left / Center / Right


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up image *** * Add a feature **image** and alternate **mobile image**. * Change the **image aspect ratio** (shape) * Make the image a clickable **link** to another page. `Click Image with text section to find settings`

Setting	Description	Options
Image	Select or upload an image.
Mobile image	Select or upload an alternate image to display on mobile devices.
Aspect ratio	Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H).	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)
Image link	The page or URL that you want the link to go to. Visitors are redirected when they click the image.

### Change image layout *** After uploading an image, adjust the **width** and **position**. Use the **Breathing room** option to add space around the image. `Click Image with text section to find settings`

Setting	Description	Options
Desktop image width	Set the maximum width of the image on desktop.	35 - 70 % Default: 50
Desktop image position	Position the image to the left or right of the text content.	Left of content Right of content Default
Mobile image position	On mobile, show the image before or after the text.	Image first Default Image second
Image breathing room	Use the slider to add spacing around the image. Set the slider to 0 to display the image at the full width and height of the image area.	0-60 Default: 0


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Button	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** Change the width and alignment of all content blocks. `Click Image with text section to find settings`

Setting	Description	Options
Content width	Display the section at full width of the screen or set a custom width. Under Section, you can also set the section width.	Full width Custom width
Custom width	Use the sliders to set the maximum width (in pixels) of the section content.	200 - 1000 px
Content position	For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions. The horizontal and vertical placement applies when there's enough room in the content area.
Text alignment	Set the position of the text content for desktop screens.	Left Default Center Right


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

### Section layout *** In the section settings, you can adjust the overall layout of the column blocks. * Choose the **number of columns** to display per row * Change the amount of **spacing** between columns * Display columns in a **Grid** (multiple rows) or **Slider** (single row) `Click section to find settings`

Setting	Description	Options
Column spacing	Choose the amount of spacing between column blocks.	Small Medium Default Large
Number of columns on desktop	Select the number of columns to display on desktop screens.	2 3 Default 4
Number of columns on mobile	Select the number of columns per row on mobile screens.	1 Default 2
Enable slider on desktop	When enabled, columns appear in a single row with scroll buttons.
Enable slider on mobile	When enabled, columns appear in a single row with scroll buttons. Visitors can also swipe to scroll through.
Show slider indicator	When enabled, a bar below the columns shows how far visitors have scrolled.

## Add column blocks *** Add column blocks with **images**, **videos**, **text**, and/or **buttons**. * In the Multi-column section, click **(+) Add Column**. * Click and hold the drag handles **`⋮⋮`** to rearrange the blocks. * Click the **Column block** to add content. {% hint style="info" %} You can show columns with only images or videos by deleting the columns **text** and **heading** fields. You can show columns with only text by deselecting the **Display media** option. {% endhint %} ### Add image or video *** Add an image or autoplay video (without sound) as the column background. {% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Column block to find settings`

Setting	Description
Display media	Uncheck this option for columns blocks without an image or video.
Make media full height	If the column block only has an image or video without any text or button, checking this option will make the image or video span the full height of the row.
Image	Select or upload an image.
Video	Add a short autoplay video (without sound) to replace the image.
Mobile image	Select or upload an alternate image to display on mobile devices.

### Add heading and text *** Change the **Heading** and **Text** in the column block, or delete the text in these fields to remove them. `Click Column block to find settings`

Setting	Description
Heading	The title of the column.
Text	Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.

### Add button *** Add a link and label for the column button. To remove the button, delete the text in the **Button label** field. `Click Column block to find settings`

Setting	Description	Options
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button.	Default: "Button"

## Customize column styles *** Change the overall style of **text**, **buttons**, and **media** of all column blocks. ### Change text layout and size *** Change the **alignment** and **size** of column text and headings. `Click Multi-column section to find settings`

Setting	Description	Options
Text alignment	Set the position of the text content for desktop screens.	Left Default Center Right
Heading size	Change the size of the heading text from small to large.	1-8 Default: 2
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.	H2 - H6
Text size	Adjust the size of the section text from small to large.	1-8 Default: 3

### Choose button style *** Change the visual style of column buttons. The button colors use the selected **color scheme** in the section settings.

`Click Multi-column section to find settings`

Setting	Description	Options
Button style	Change the style of the button.	Solid Default Outline Text

### Change image and video layout *** Change the **aspect ratio** (shape) and **position** of all column images and videos. `Click Multi-column section to find settings`

Setting	Description	Options
Media aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Landscape (16:9) Landscape (21:9)
Media position	Show the image or video above or below the column content.	Above content Default Below content

# Newsletter Add the **Newsletter** section to display an email sign-up form with an optional banner image. {% hint style="success" %} Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more about managing customer emails in Shopify's guides for [Email subscriber lists](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and [Email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email). {% endhint %}


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Add background image *** Add and customize the background image for your email signup section. `Click Newsletter section to find settings`

Setting	Description
Image	Select or upload an image to display as the background of the banner.

Setting	Description	Options
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0-100 Default: 40

### Set banner height *** `Click Newsletter section to find settings`

Setting	Description	Options
Banner height	Change the maximum height of the banner. The Adapt to image option sets the banner height to the full height of your image, which avoids cropping.	Adapt to image Default Custom
Custom desktop height	For desktop, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 450px
Custom mobile height	For mobile, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 450px

### Change image animation *** Add animation effects to your image banner. `Click Newsletter section to find settings`

Setting	Description	Options
Image banner transition	Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.	None Fade Iris wipe


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block

### Change text alignment *** `Click Newsletter section to find settings`

Setting	Description	Options
Text alignment	Set the position of the text content for desktop screens.	Top / Middle / Bottom Left / Center / Right

## Collect customer names *** In the **Email form**, you can choose to show required fields for the customer's first and last name. {% hint style="info" %} This option was added in [v5.1.0](https://help.fluorescent.co/eclipse/sections/pages/Di96NGkvSFpr2vzlTBuY#id-5.1.0-latest-release) — Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access the latest features. {% endhint %} `Click Email form block to find settings`

Setting	Description
Collect customer name	Enable option to show required fields for the customer's first and last name.

## Edit default wording *** The **Newsletter form** includes default text for the submit button ("Subscribe"), email placeholder ("Your email"), and confirmation message ("Thanks for subscribing!"). You can edit this text in the default theme content editor. * In your theme editor, click the **Actions (****...****)** button and select **Edit default theme content**. * Search "Newsletter" to find the default text under **General >** **Newsletter form**. * Replace the default text in the field and click **Save**. # Quotes Use the **Quotes** section to prominently display rotating quotes about your store or products from customers, partners, or the media.


Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header
Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Width and Padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width

## Add quote blocks *** Add **Quote blocks** with quote text, author names, and logo images. You can adjust the font size of the quote text. If you add more than one quote block, they will auto-rotate by default. To change the time between quotes or stop quotes from quote blocks from automating, see the **Quotes auto-rotate settings**. Use the drag handles **`⋮⋮`** to re-order blocks. _{Click Quote block to find settings}

Setting	Description
Quote	Enter the text of the quote.
Author	Enter the name of the person being quoted.
Image	Select or upload a small logo image above the quote text. This image might be the logo of a company or profile picture. We recommend a small square image between 70 to 200px.
Image size	Set the maximum image width between 50 to 100px
Show rating	Choose to show a star rating given by the author.
Rating	Set the rating between 0 and 5 stars.

### Quote styles *** Change the text size and font, alignment, and quotation mark icon. _{Click section to find settings}

Setting	Description
Show quotation mark icon	Display a quotation `"` icon above the quote text.
Quotation mark icon color	Set the icon color to Accent, Text, or Light text.
Quote text size	Change the text size from small to large (1 - 8).
Quote text line height
Text alignment	Align the quote content to the Left, Center, or Right.
Quote tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.

## Auto-rotate quotes *** By default, multiple quotes will auto-rotate every 6 seconds. **Set time between quotes** Display each quote between **4** to **20** seconds. Quotes with more words may need more time for customers to read them. **Turn off autoplay** If you turn off autoplay, the Quotes section displays pagination dots to let customers click through at their own pace. > Turning off autoplay can make your online store accessible to more customers, including people with disabilities. Learn more about [accessibility for themes](https://help.fluorescent.co/stiletto/general/editing-themes/accessibility) to help make the web inclusive and usable for everyone. # Rich text Use the **Rich text** section to add formatted text with additional images and buttons. {% hint style="warning" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Rich text**. Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Button	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** Change the width and alignment of the section content. You can also change the section width. `Click Rich text section to find settings`

Setting	Description	Options
Content width	Display the section at full width of the page or set a custom width. Under Section, you can also set the section width.	Full width Custom width Default
Custom content width	Use the sliders to set the maximum width (in pixels) of the section content.	400-1000 px
Content alignment	The position of the headings, buttons, and content within the section.	Left Center Default Right

# Scrolling content {% hint style="info" %} Scrolling content was added in v1.2.0 — Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} The **Scrolling content** section displays a banner with moving text, images, and icons. Use this section for eye-catching promotions and store updates. * Add scrolling **text**, **images**, and **icons** with optional links * Add **highlighted text** * Control the **duration** and **direction** of scrolling

## Set up section *** In the editor side panel, click **(+) Add section** and select **Scrolling content**. Click and hold the drag handles **`⋮⋮`** to re-order sections. {% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Content blocks *** Add **Text**, **Image**, and **Icon** blocks to show as the scrolling content. You can add multiple blocks of the same type. * Under the **Scrolling content** section, click **(+) Add block**. * Use the drag-and-drop handles **`⋮⋮`** to rearrange the blocks. * Click a block to edit content and settings. ## Text block *** Add scrolling **text** with an optional link. Click **(+) Add block** to create more text blocks. Click the block to: * Enter text for a scrolling message * Make the text block a clickable link * Highlight part of the text with an accent color In the section settings, you can change the font, text size, and colors of text blocks. ### Add text link *** In the **Text link** field, add a link to apply to the entire text block. {% hint style="warning" %} If you've added a **Text link**, do not apply linked text to the content. Using the rich formatting buttons to remove any linked text. {% endhint %} ### Add highlighted text *** Highlight a word or words within the text block. With **Enable highlighting** toggled, enter pipe characters (`|`) on either side of the words you want to highlight. For example: `|text|` Highlighted text uses the **Accent** color of the section's selected color scheme. `Click text block for settings`

Setting	Description
Text	Enter text to show in the scrolling content.
Text link	Add a link to redirect visitors when they click the text block. If enabled, do not apply linked text to the content using the rich formatting buttons.
Enable highlighting	When enabled, wrap text with pipe characters (`\| text \|`) to apply the accent color.

`Click section for settings`

Setting	Description	Options
Text style	Choose the font for the text blocks, based on your theme settings.	Heading Default Body
Text size	For desktop screens, change the font size for all text blocks.	1 - 8
Mobile text size	For mobile screens, change the font size for all text blocks.	1 - 8

## Image block *** Add a scrolling **image** with optional link. Click **(+) Add block** to create more image blocks. Click the block to: * Upload a custom image * Change the image size * Make the image a clickable link. `Click image block for settings`

Setting	Description	Options
Image	Select or upload an image. We recommend a `.png` image with a transparent background and minimum dimensions of 50px by 50px.
Image size	Adjust the width of the image for desktop screens. Make sure the image size does not exceed the width of your uploaded image.	20 - 500 px
Mobile image size	Adjust the width of the image for mobile screens.	20 - 350 px
Image link	Add a link to redirect visitors when they click the image.

## Icon block *** Add a scrolling **icon** with an optional link. Click **(+) Add block** to create more icon blocks. Click the block to: * Select from 30+ icons or upload a custom icon image * Change the icon size and color * Make the icon a clickable link. `Click icon block for settings`

Setting	Description	Options
Icon	Select from 30+ icons to show in the scrolling content.
Custom icon image	Upload your own icon to show in the scrolling content. We recommend a `.png` image with a transparent background and minimum dimensions of 50px by 50px.
Icon width	Increase or decrease the width of the icon for desktop screens. Make sure the icon width does not exceed the width of your custom image.	1 - 75 px
Mobile icon width	Increase or decrease the width of the icon for mobile screens.	1 - 75 px
Icon color	Choose an icon color based on the section's color scheme.	Accent Default Text
Icon link	Add a link to redirect visitors when they click the icon.

## Scrolling behavior *** In the section settings, change the **duration** (speed) and **direction** of scrolling. * Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end. * Choose to scroll content towards the **Left** or **Right**. `Click section for settings`

Setting	Description	Options
Scroll duration	Change the number of seconds it takes for the content to scroll from beginning to end.	5 - 45 secs
Scroll direction	Choose the direction of scrolling.	Left Default Right

## Gap between blocks *** After adding the blocks, you can increase or decrease the space between content blocks. `Click section for settings`

Setting	Description	Options
Gap	For desktop screens, adjust the space between content blocks.	0 - 100 px
Mobile gap	For mobile screens, adjust the space between content blocks.	0 - 100 px

# Shop the look {% hint style="info" %} Shop the look is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme). {% endhint %} Use the **Shop the look** section to showcase multiple products that go together next to a featured image or video that displays them in context. With quick shop enabled, customers can add directly to their cart. * Add a featured image or autoplay video * Add overlay text content * Display products as a list or grid

## Set up section *** In the editor side panel, click **(+) Add section** and select **Shop the look**. Click and hold the drag handles **`⋮⋮`** to re-order sections. {% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up featured media *** Add an image or autoplay video (without sound) as the featured media. Use media that shows all the products being showcased. After uploading your media, you can select the **focal point** of your media and add a **color overlay**.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click section for settings`

Setting	Description
Desktop media size	Change the width of the featured media as a percentage of the section width.
Media position	Place media on the Left of products or Right of products
Sticky media on scroll	Fix the feature media to the top of the window when scrolling down to view products.
Image	Select or upload an image.
Mobile image	Select or upload an alternate image to display on mobile devices.
Video	Add a short autoplay video (without sound) to replace the image.
Mobile video	Add an alternate autoplay video that appears on mobile screens.
Video focal point	For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.
Aspect ratio	For desktop and mobile, select an aspect ratio to crop the media to be a uniform shape, or select Natural to display media in their original shape.
Color scheme	Select the color scheme to apply as the overlay colors.
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.

## Add overlay content *** After adding an image or video, add **headings**, **text**, and **buttons**. You can adjust the **text size** and change the **position** of the content. `Click section for settings`

Setting	Description	Options
Overline	Add small heading text.
Heading	Add main heading text.
Heading size	Change the size of the heading from small to large.	1-8
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.	H1 - H6
Text	Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size	Change the size of the text from small to large.	1-8
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button.
Button style	Change the style of the button.	Solid Outline Text
Text position	Set the position of the overlay content for desktop screens.	Top / Middle / Bottom Left / Center / Right
Mobile text position	Set the position of the overlay content for mobile screens.	Top / Middle / Bottom Left / Center / Right

## Add products *** Click **(+) Add product** and select the product that you want to feature. You can add a **custom image** to replace the default product images. Product items within the drawer ### Change products layout *** In the section settings, change the **heading** above the products, choose to show the product **vendor** names, and change the **image aspect ratio**. Change the products layout to a **list** or **grid**. If you have if you have more than 4 products, we recommend using grid and enabling **Slider on mobile**. `Click section for settings`

Setting	Description
Heading	Add text above the products.
Show vendor	Show the product vendor name above the product titles.
Image aspect ratio	Select an aspect ratio to crop product images to be a uniform shape, or select Natural to display images in their original shape.
Products layout	Display product items as a list or grid.
Enable slider on mobile	Display products as a single row slider. Toggle off to display products as stacked column with multiple rows.

# Shoppable feed {% hint style="info" %} Shoppable feed is available in v4.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme). {% endhint %} The **Shoppable feed** section allows customers to shop multiple ‘looks’ directly from a gallery of images. Add images to showcase multiple products that pair well together, which customers can quickly view and buy in a ‘shop the look’ drawer.

## Set up section *** In the editor side panel, click **(+) Add section** and select **Shoppable feed**. Click and hold the drag handles **`⋮⋮`** to re-order sections. {% hint style="info" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ### Section styles *** Click the section to edit the **Header** and general **section styles** for colors, width, and spacing:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding
Section header	/pages/3wq6hFMr3k1BDOHIgjqZ#section-header

### Section layout *** In the section settings, you can adjust the overall layout of the shoppable images * Display images in a **Grid** (multiple rows) or **Slider** (single row) * Select the **number of columns** to show per row * Choose to show the slider indicator bar

`Click section to find settings`

Setting	Description	Options
Layout	Display shoppable feed items in multiple rows (grid) or in a single row slider that visitors rotate through.	Slider Default Grid
Show slider indicator	When enabled, a bar below the slider that shows how far visitors have scrolled.
Number of columns on desktop	Select the number of images per row on desktop screens.	2 3 Default 4
Number of columns on mobile	Select the number of images per row on mobile screens.	1 Default 2

## Add shoppable feed items *** The **Shoppable feed items** are image cards that open a list of products that customers can view and purchase. Click a block to set up a shoppable item: * Add an image that showcases multiple products that pair well together * Select the products to show in the 'Shop the look' drawer The uploaded image will appear in the section gallery and at the top of the "Shop the look" drawer. `Click Shoppable feed item block for settings`

Setting	Description
Image	Select or upload an image that shows the products.
Products	Select the products that will appear in the 'shop the look' drawer

## Change shop button icon *** In the section settings, you can select the **Shop button icon** that overlays the image card.

Setting	Description
Shop button icon	Select the Bag or Cart icon for the Shop button.

## Change image ratio (shape) *** The **Image aspect ratio** setting lets you crop your uploaded images to make them all **Square (1:1)**, **Landscape (3:2)**, or **Portrait (2:3)**. You can select the **Natural** option to show all images with their original orientation. In the section settings, select an image ratio for both the card images and drawer images. By default, the image ratio uses your theme settings. {% hint style="warning" %} ### **Use consistent image ratios** If you select the **natural** aspect ratio, it's important that your images use the same image ratio. Using images with varying image ratios (for example, landscape and portrait) can affect the layout of the section. Check out [Shopify's guide for the image editor](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to learn how to crop images to have the same ratio. {% endhint %}

What are aspect ratios?

The **aspect ratio** describes the relation between the image width (w) and height (h). An image that's 400px by 200px has an aspect ratio of **2:1** because its width is twice as large as its height. Square images have an aspect ratio of **1:1** because the width and height are equal.

`Click section for settings`

Setting	Description
Card image aspect ratio	Select an aspect ratio to crop card images to be a uniform shape, or select Natural to display images in their original shape. For Natural, we recommend using images that have the same aspect ratio or shape.
Drawer image aspect ratio	Select an aspect ratio to crop the images in the 'shop the look' drawer to be a uniform shape, or select Natural to display images in their original shape.

## Product shop now link *** In the drawer, the "Shop now" links can either open the product page or the Quick view popup, allowing customers to add the products directly to their cart. For "Quick view", make sure **Quick shopping** is enabled in **Theme settings > Product listings.** `Click section for settings`

Setting	Description
Show vendor	Show the product vendor name above the product titles.
Shop now link action	When the "Shop now" link is clicked, choose to direct customers to the product page or open "Quick view" to allow them to add the products directly to their cart.

# Slideshow The **Slideshow** displays auto-rotating slides with images and autoplay videos (without sound). You can fine-tune how your images look, all slide headings and colors, and add a mobile-specific image for the best experience across all devices.


Section colors	#section-colors
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up slideshow *** ### Autoplay slides By default, multiple slides will auto-rotate every 6 seconds. You can change the **time between slides** or **disable autoplay** to let visitors rotate through slides with the pagination buttons. `Click Slideshow section to find settings`

Setting	Description	Options
Enable autoplay	When checked, slides will auto-rotate.
Time between slides	Set the number of seconds to show each slide before auto-rotating.	4 - 20 Default: 6

### Choose height Choose a **fixed height** to make the slideshow the exact same height on all screen sizes. Choose a **relative height** to have slides adapt their height to a certain percentage of the screen height. `Click Slideshow section to find settings`

Setting	Description	Options
Desktop height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 650px
Mobile height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 450px

### Customize pagination Change the **alignment** and **colors** of the navigation buttons for moving to the next or previous slides. `Click Slideshow section to find settings`

Setting	Description	Options
Alignment	Position the slide navigation buttons to the left, center, or right.	Left Center Right
Background	Change the color behind the slide pagination buttons.
Foreground	Change the color of the slide pagination buttons.
Background opacity	Use the slider to adjust the transparency of the background. Set the opacity to 0% to hide the background. If set to 100%, the background will be a solid color.	0 - 100 Default: 50

### Choose slide animation The slideshow uses animations for revealing the the text and slides as they rotate. `Click Slideshow section to find settings`

Setting	Description	Options
Enable text animation	When enabled, headings and text slide up and fade into view upon loading.
Slide animation	Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.	None Fade Iris wipe

## Add image or video slide *** Use the **Image slide** block to display an image as the slide background. The **Video slide** displays an autoplay video (without sound) as the slide background. Add headings, text, and an optional button. After uploading your media, you can select the **focal point** of your video and add a **color overlay**.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Video slide block to find settings`

Setting	Description	Options
Shopify video	Select or upload a video that autoplays (without sound).
Mobile Shopify video	Select or upload an alternate video to show on mobile devices.
Video focal point	Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.	Center Default Top Bottom Left Right
Show overlay	Add a color tint to the image.
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).	0-100 Default: 20

`Click Image slide block to find settings`

Setting	Description
Image	Select or upload an image to display as the background of the banner.
Mobile image	Select or upload an alternate image to display on mobile devices.

## Set up slide content *** After adding an image or video, add **headings**, **text**, and **buttons**. You can adjust the **text size** and change the **alignment** of the slide content. `Click Slide block to find settings`

Setting	Description	Options
Content width	Use the sliders to set the maximum width (in pixels) of the section content.	200 - 1000 px Default: 500
Text position	Set the position of the text content for desktop screens.	Top / Middle / Bottom Left / Center / Right
Mobile text position	Set the position of the text content for mobile screens.	Top / Middle / Bottom Left / Center / Right
Overline	The small text above the heading.	Default: "Overline"
Heading	The title of the slide.	Default: "Slide Heading"
Heading size	Change the size of the heading text from small to large.	1-8 Default: 8
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.	H1 - H6
Text	Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.	Default: "Tell your brand's story through images"
Text size	Adjust the size of the section text from small to large.	1-8 Default: 3
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button.	Default: Button
Button style	Change the style of the button.	Solid Default Outline Text


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up video *** The **Video** section accepts videos uploaded to Shopify or linked videos from Youtube and Vimeo. ### Upload and embed video `Click Video section to find settings`

Setting	Description
Shopify video	Select or upload a video.
Mobile Shopify video	Select or upload an alternate video to show on mobile devices.
Youtube or Vimeo URL	Enter the full URL of your YouTube or Vimeo video. The video must be public.
Video alt text	Enter alt text to describe the content and purpose of the video for customers using screen readers.

### Change aspect ratio and focal point *** You can crop the video to a uniform shape (**Aspect ratio**) and select the **Focal point** of your video to keep the most important part centred and avoid unwanted cropping. {% hint style="warning" %} These options only apply to **Shopify-hosted videos**. {% endhint %} `Click Video section to find settings`

Setting	Description	Options
Aspect ratio	Crop the video to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the video's width and height (W:H).	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Landscape wide (16:9) Landscape ultrawide (21:9)
Video focal point	Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.	Center Default Top Bottom Left Right

### Add cover image *** After choosing your video, you can add a **Cover image** that overlays the video before visitors click play.

Setting	Description
Cover image	Select or upload a preview image that overlays the video player. There are no required dimensions. A minimum width of 2500px will ensure optimal quality on the widest screens.

### Play video on loop After adding your video, you can choose to **Play the video on loop**. `Click Video section to find settings`

Setting	Description	Options
Play video on loop	When checked, the video will start over after ending.


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Button	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** `Click Video section to find settings`

Setting	Description	Options
Content width	Use the sliders to set the maximum width (in pixels) of the section content.	200-1000 px Default: 500
Text alignment	Set the position of the text content for desktop screens.	Left Center Default Right
Text position	Set the position of the text content for desktop screens.	Above video Default Below video

# Video hero {% hint style="info" %} The Video hero section was added in v1.2.0 — [Update your theme](/eclipse/changelog/update-your-theme) to access new features. {% endhint %} The **Video hero** section displays a full-width autoplaying video (without sound) with overlaid headings, text, and buttons.


Section colors	#section-colors
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up autoplay video *** In the section settings, upload a .mp4 or .mov for a background video that autoplays (without sound). You can upload an alternate **mobile video**, set a **focal point**, and customize the **overlay colors** to make your video look great on all devices.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Video hero section to find settings`

Setting	Description	Options
Shopify video	Select or upload a video that autoplays (without sound).
Mobile Shopify video	Select or upload an alternate video to show on mobile devices.
Focal point	For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.	Center Default Top Bottom Left Right
Background link	Select a page or URL to make the entire video a clickable link.
Image animation	Change the animation style of how the video loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.	None Fade Iris wipe

### Change video height *** You can adjust the height to make the video tall or compact. Choose to display the video with a **Fixed** or **Relative** height. * **Fixed** heights maintain the same pixel height on all screens. * **Relative** heights adapt the image height as a percentage of the screen height. `Click Video hero section to find settings`

Setting	Description	Options
Desktop height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 650px
Mobile height	Change the maximum height of the video on mobile. Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 450px


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Button	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** Adjust the alignment and width of the content blocks. `Click Video hero section to find settings`

Setting	Description	Options
Content width	Use the sliders to set the maximum width (in pixels) of the section content.	200-1000 px Default: 500
Text position	Set the position of the text content for desktop screens.	Top / Middle / Bottom Left / Center / Right
Mobile text position	Set the position of the text content for mobile screens.	Top / Middle / Bottom Left / Center / Right

## Section colors *** The section uses two color schemes. The first color scheme applies a section **background** color, and the **overlay** color scheme applies text, button, and overlay tint colors. ### Change background color *** The section background is visible when the section has **top and bottom** **padding** or when the section width is **page width** or **full width padded**. In the section settings, select a **color scheme** (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings. # Video with text {% hint style="info" %} The Video with text section was added in v1.2.0 — Learn how to [update your theme](/eclipse/changelog/update-your-theme) to access the latest features. {% endhint %} Use the **Video with text** section to combine an autoplay video (without sound) side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks. * Add a featured **video** and **content blocks**. * Customize the **layout** and change the **container color** for alternate looks. > Check out the related [Image with text section](/eclipse/sections/image-with-text). {% hint style="warning" %} **Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template. {% endhint %} ## Set up section *** In the editor side panel, click **(+) Add section** and select **Video with text**. Click and hold the drag handles **`⋮⋮`** to re-order sections. ### Section styles *** Click the section to edit general **section styles** for colors and spacing, available in all sections:


Section colors	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding

## Set up video *** The **Video with text** section displays an autoplay video (without sound). After uploading your video, you can select the **focal point** of your video and add a **color overlay**.


Using color overlays	Learn how to change overlay colors and use gradients.	/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors	/files/r6qvEikOKVMq5Hv30JkJ

{% tabs %} {% tab title="Video requirements" %} For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	< 20 seconds (Recommended)
Video size	< 10MB (Recommended)

{% endtab %} {% endtabs %} `Click Video with text section to find settings`

Setting	Description	Options
Shopify video	Select or upload a video that autoplays (without sound).
Mobile Shopify video	Select or upload an alternate video to show on mobile devices.
Video focal point	Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.	Center Default Top Bottom Left Right
Background link	Select a page or URL to make the entire video a clickable link.

### Change video layout *** `Click Video with text section to find settings`

Setting	Description	Options
Desktop video width	Set the maximum width of the video on desktop.	35-70 Default: 50
Desktop video position	Position the video to the left or right of the text content.	Left of content Right of content Default
Mobile video position	On mobile, show the video before or after the text.	Video first Default Video second
Video breathing room	Use the slider to add spacing around the video. Set the slider to 0 to display the video at the full width and height of the video area.	0-60 Default: 0


Heading	/pages/1RQDWwxKzKWmtVBL177n#heading-block
Text	/pages/1RQDWwxKzKWmtVBL177n#text-block
Overline text	/pages/1RQDWwxKzKWmtVBL177n#overline-block
Button	/pages/1RQDWwxKzKWmtVBL177n#button-block
Image	/pages/1RQDWwxKzKWmtVBL177n#image-block
Spacer	/pages/1RQDWwxKzKWmtVBL177n#spacer-block
Divider	/pages/1RQDWwxKzKWmtVBL177n#divider-block
Custom Liquid	/pages/1RQDWwxKzKWmtVBL177n#liquid-block

### Change content layout *** Change the width and alignment of all content blocks. `Click section to find settings`

Setting	Description	Options
Content width	Display the section at full width of the screen or set a custom width. Under Section, you can also set the section width.	Full width Custom width
Custom width	Use the sliders to set the maximum width (in pixels) of the section content.	200 - 1000 px
Content position	For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions. The horizontal and vertical placement applies when there's enough room in the content area.
Text alignment	Set the position of the text content for desktop screens.	Left Default Center Right

## Change container color *** Change the **Container color scheme** to show a background color for the content area. You can add and define different color schemes in Theme settings > Colors. [Learn more](/eclipse/sections/overview/section-styles#section-colors) # Custom Liquid Section {% hint style="warning" %} **We do not support code customizations**. This guide offers a basic reference for developers and advanced users familiar with HTML and Liquid. Always test code changes on unpublished theme copies. For assistance, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co/). {% endhint %} With the **Custom Liquid** section, you can extend your theme by adding snippets of Liquid or HTML code as a section in the theme editor. The Custom Liquid section provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code. ## Add Custom Liquid *** Click **(+) Add section** and select **Custom Liquid**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the section to start customizing. {% hint style="info" %} See Shopify's [Liquid reference guide](https://shopify.dev/docs/api/liquid) and [Liquid code examples](https://shopify.github.io/liquid-code-examples/) to learn more. {% endhint %} ## **Add anchor links to sections** *** {% hint style="info" %} Shopify dynamically generates ids for sections but these ids are not stable. The following instructions are a workaround for this platform limitation. {% endhint %} To link to a specific section on a page, you can use a **Custom Liquid** section with some HTML as a workaround. The HTML will include a special **`id`** property that will allow you to link directly to that section. Once set up, the Custom Liquid section will not affect the page layout. {% hint style="warning" %} **Anchor link in the Header doesn't work?** If your anchor link in the navigation menu points to a section on the same page, you will need to disable page transitions for the link to work. Go to **Theme settings > Animation** and deselect **Enable page transitions**. {% endhint %}

STEPS

In your theme editor (**Customize**): 1. Under **Template**, click **(+) Add section** and select **Custom Liquid**. 2. Click and hold the drag and drop handles **`⋮⋮`** to move the Custom Liquid section directly above the section you want to link to. 3. Click the **Custom Liquid** section to open the settings. 4. Enter the following HTML code and enter a unique **`id`** property in the opening tag. If using multiple words, you must use dashes (`-`) instead of spaces. > **``** > Recommended: Use an ID that's the same name as your section, and make sure the name is not used by other IDs. 5. Under **Section style**, set the **Padding** to **None**. 6. Find and click the section or block that will link *to* the Custom Liquid section. 7. In the link field, enter the **`id`** with a hashmark at the start (e.g. **`#our-values`**). > To **link from another page or menu link**, you must enter the full URL path with the anchor link at the end (e.g. **`www.store.com/#our-values`** or **`www.store.com/about#our-values`**). 8. Click **Save**.

# Announcement bar The **Announcement bar** displays rotating announcements at the top of every page. Let customers know about current promotions, new products, or other need-to-know updates with links to more info. * Add up to 3 announcements with links * Display announcements as **rotating slideshow** or **scrolling text** * Change announcement bar **colors** * Enable **sticky bar** to keep announcments visible

## Set up announcement bar *** * Show announcements on **all pages** or **homepage only** * Enable **sticky bar** to keep visible when scrolling * Change the **text size** of announcements `Click Announcement bar section to find settings`

Setting	Description	Options
Show on homepage only	Choose to show announcement bar only on the home page or on all pages.	Default: Enabled
Enable sticky announcement bar	When enabled, the bar remains visible at the top of the screen when scrolling down the page.	Never Default Desktop Mobile Both
Text size	Adjust the size of the section text from small to large.	Small Medium Default Large

## Change color scheme *** Select a set of colors to apply to the bar background and text. You can add and define different color schemes in Theme settings > Colors. [Learn more](/eclipse/sections/overview/section-styles#section-colors). ## Choose rotation style *** The announcements have two rotation styles. The **Slideshow** style rotates announcements vertically. The **Scrolling text** style scrolls announcement text across the screen continuously. `Click Announcement bar section to find settings`

Setting	Description	Options
Style	Display announcements as rotating slides or as a scrolling ticker.	Slideshow Default Scrolling text

### Customize slideshow style *** `Click Announcement bar section to find settings`

Setting

Description

Options

Auto-rotate announcements

When unchecked, visitors can click to view the next announcements.

Change every

Display each message between 4 to 15 seconds before rotating.

4 - 15 sec

Default: 4

### Change scroll duration and direction *** `Click Announcement bar section to find settings`

Setting

Description

Options

Scroll duration

Set the number of seconds it takes for announcements to scroll from beginning to end.

5 - 45 sec

Default: 10

Scroll direction

Choose to scroll content towards the left or right.

Left Default
Right

## Add announcements *** Add up to 3 announcements with rich text and alternate text for mobile screens. Click the arrow next to the **Header** section, then click **(+) Add Announcement**. Click an announcement block to add text. `Click Announcement block to find settings`

Setting	Description	Options
Text	Enter a text as a storewide message. We recommend between 4 and 8 words.	Default: "Free worldwide shipping..."
Text on mobile	Enter alternate text to display on mobile.

# Header Section The **Header** appears at the top of every page with a menu with icons for search and the cart.

## Set up header menu *** By default, the header menu uses the **Main menu** from your Shopify Admin. To edit this menu, go to **Content > Menus** in your admin. You can also create a new menu and select that as your header menu in the theme editor.


Mega menu	Display links in a multi-column dropdown menu.	/pages/NDNmiM6RXB5UBg2SGGk1

## Change layout and style *** Click the **Header** section to customize its appearance.


Color scheme	Choose a color scheme.	/pages/ZSIHHQbe5NAWDHiNfmNN#choose-color-scheme
Layout	Rearrange the elements of the header.	/pages/ZSIHHQbe5NAWDHiNfmNN#choose-header-layout
Logo	Replace the store name with an image.	/pages/ZpiYVrlNu4BjAF8WmMzZ
Transparent header	Make the header background transparent.	/pages/vzbzhwLnvVvUlOa9XOPB
Sticky header	Fix the header to the top of the screen.	/pages/ZSIHHQbe5NAWDHiNfmNN#enable-sticky-header
Cart icon	Change the icon for the cart.	/pages/ZSIHHQbe5NAWDHiNfmNN#change-cart-icon

## Show language and country selectors ***


Language selector	Allow visitors to view your store in another language that you've added.	/pages/QPwVUlA64AeE3jnzBChY#show-language-selector
Country selector	Allow visitors to select their preferred region and currency.	/pages/QPwVUlA64AeE3jnzBChY#show-country-selector

# Layout and style Header Customize the look of the **Header** in the section settings. * Choose color scheme for header * Change the **Layout** of the logo and menu * Enable the **Sticky header** to fix it to the top of the page * Change the **Cart icon** to a bag or cart ## Choose color scheme *** Use the **Color scheme** picker to change the color scheme. You can edit and add color schemes in your theme settings. ## Choose header layout *** Change the layout of the logo, search bar, and menu for both desktop and mobile. `Click Header section to find settings`

Setting	Description	Options
Header layout	Change the position of the logo and menu in the header.	Logo left menu left Logo left menu center Logo center menu left Default Logo center drawer menu
Width	Set the content width of the header contents. This setting applies to the mega menu as well	Page width Full width

## Enable sticky header *** The **Sticky header** option fixes the Header to the top of the screen or window when customers scroll down the page. {% hint style="info" %} The Delayed transition style will vary depending on the Announcement bar and Impact logo: * If there’s a sticky announcement bar, then sticky header appears immediately. * If Impact logo is present, sticky header appears after scrolling past the impact logo. * If there’s no sticky announcement bar or impact logo, sticky header appears when header is out of view. {% endhint %} `Click Header section to find settings`

Setting	Description
Enable sticky header	Choose to fix the Header to the top of the screen or window so it remains visible when visitors scroll down the page.
Sticky transition style	Choose to stick the header instantly or delay showing the sticky header until scrolling down.

## Change cart icon *** Choose to display the cart icon as either a **Cart** or **Bag**. `Click Header section to find settings`

Setting	Description	Options
Cart icon	Change the icon style for the cart in the header. No icon shows a simple button with the item count.	Cart Bag Default No icon

# Logo Header Replace the store title with a custom logo image. We recommend a logo image with a transparent background and a minimum width of 50px in PNG or SVG format. {% hint style="info" %} Check out the [Impact logo](/eclipse/header/impact-logo) to display a large full-width logo below the header on the home page. {% endhint %} `Click Header section to find settings`

Setting	Description	Options
Image	Upload a PNG or SVG image to display as your store logo in the header. The name of your store displays when no logo image is uploaded.	Default: Brand logo
Image width	Set the maximum width of your logo image on desktop screens.	20 - 350 px Default: 120
Mobile image width	Set the maximum width of your logo image on mobile screens.	20 - 250 px Default: 90

# Transparent header Make the header background transparent to display the full height of featured media sections. You can enable the transparent header on the home page and other selected pages. If the **sticky header** option is enabled, the header will transition to the default colors and logo when the page is scrolled down. ## Supported sections *** The transparent header requires a full-width section at the top of the page. Supported sections include: * [Image hero](/eclipse/sections/image-hero) * [Slideshow](/eclipse/sections/slideshow) * [Video hero](/eclipse/sections/video-hero) * [Collection banner](/eclipse/collections/collection-page/banner) {% hint style="info" %} **Important** Set **Section width** to `Full width` and **Top padding** to `0px`. Click the section and scroll to the bottom the find the settings.

{% endhint %} ## Enable on home page *** Click the **Header** section and scroll down the the **Transparent header** settings. Check the **Enable on home page** checkbox to turn on the transparent header. ## Enable on other pages *** To enable the transparent header on other pages, enter the template names separated by commas in the **Enable on additional templates** field. Enter the full template name with the template type and name, with a period in between (ex. **`page.about`**). ![](/files/1ZX3ywKVUKHeGD6vRkNE) The following are default templates in Eclipse: ```` ``` 404 cart collection list-collections page.contact password product search ``` ```` ## Add alternate logo *** You may want to use a different colored logo if the section image is darker or lighter than the default header color. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos. {% hint style="warning" %} Your alternate **logo image must have the same width and height as the default logo** {% endhint %} If the **sticky header** option is enabled, the header will change to the default logo and colors when the page is scrolled. `Click Header section to find settings`

Setting	Description
Logo image	Upload a PNG image to display as your store logo when the header is transparent.
Text	If no logo is uploaded, change the text color of the store title.

# Mega menu Header **Mega menus** display menu links in multiple columns so customers can quickly browse large catalogs. Add multiple sub-menus along with a featured image, text, and links to customize your mega menu.

Why is the mega menu not working in other languages?

If you've translated your store using an app, make sure the "Parent dropdown link" name is not translated, as this will break the mega nav. See instructions below for [fixing translated mega navigations](#translating-mega-navigations).

## Create nested menu in admin *** Before adding the mega menu block, you will need to create a menu with three levels of nested links. * The **top-level** link appears in the header and opens the mega menu. * The **2nd-level** links appear as column headings inside the mega menu. * The **3rd-level** links appear in columns below the second-level links. From your Shopify admin, go to **Content > Menus**. Choose a menu item to be the 'parent' or top-level link that will open the mega menu from the header. To create 2nd-level and 3rd-level links, use the drag-and-drop handles **`⋮⋮`** to move links under other links to nest them.

STEPS

In your **Shopify admin**: 1. Go to **Content > Menus**. 2. Select the main menu used for your header. 3. Add a top-level link that will open the mega menu and contain the nested sub-menus. 4. Add your 2nd-level menu links and use the drag handles ⋮⋮ to move them under the top-level link. 5. Add your 3rd-level menu links and use the drag handles ⋮⋮ to move them under the 2nd-level links. 6. Click **Save.**

## Add mega menu block *** Once you have created your nested menu, you can now add **mega menu blocks** to your **Header** in the theme editor. > 1. Click the arrow next to the **Header** section, and click **(+) Add Mega menu**. > 2. Click the **Mega menu block** to open the settings. > 3. Enter the exact name of the top-level link (e.g. "Shop") in the **Dropdown parent link** field. > 4. Click **Save**. ## Customize menu layout *** Change the number of columns and choose to display 2nd-level links without nested links in a single column. `Click Mega menu block to find settings`

Setting	Description	Options
Column count	Set the number of columns. If there are more submenus than columns, then submenus will appear in multiple rows.	1-4 Default: 4
Condense solo categories	Conserve space by stacking consecutive 2nd-level links without nested links.

## Change text styles *** Change the font used for the headings (2nd-level links) and submenu (3rd-level links). `Click Mega menu block to find settings`

Setting	Description	Options
Heading text style	Choose the font for the heading as set in the theme settings.	Heading Default Body Overline
Submenu text style	Choose the font for the submenu text as set in the theme settings.	Heading Default Body Overline

## Add promotions *** Add up to four **promotion blocks** in the mega menu. ### Create menu with only promotions *** You can create a mega menu with only promotions like the one below. > 1. In **Content > Menus**, click to open the menu used for the header. > 2. Add a top-level link to your header menu without any nested links. > 3. In the **Mega menu block** settings, add the top-level link name to **Dropdown parent link**. > 4. Enable and set up between 2 to 4 promos and add **Links** for each.

`Click Mega menu block to find settings`

Setting	Description
Enable	Show promo feature in the mega menu.
Image	Select or upload an image for the promo block.
Heading	The title of the promo.
Text	Add multiple lines of text to describe the promo.
Link	Select or paste a link to redirect visitors when they click the image.

### Customize promotion styles *** Change the promotions' **layout**, **position**, and **image shape**. `Click Mega menu block to find settings`

Setting	Description	Options
Image aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Portrait (2:3) Portrait (4:5) Square (1:1) Default Landscape (5:4) Landscape (3:2)
Position on desktop	For desktop screens, place promotions before or after the menu links.	First Last Default
Position on mobile	For mobile screens, place promotions before or after the menu links.	First Last Default
Show promos on mobile	Display promos on mobile devices.
Layout on mobile	Display promo features as a list or in a single rotating row.	Slider Default List

## Translating mega menus *** When translating your theme, make sure the "Dropdown parent link" text from the mega menu settings is **not** translated. If you've auto-translated your theme, the parent link text may have been translated, which will break the mega menu for other languages. If you're using the [Translate & Adapt app](https://apps.shopify.com/translate-and-adapt): > 1. In the Shopify admin, click **Translate & Adapt** to open the app. > 2. Go to **Theme > Section groups**. > 3. Click **Header Group** in the side panel. > 4. Scroll down to find the "Meganav Parent link" that's used for the dropdown parent link. > 5. Delete any translations of the parent link in the secondary language column. > 6. Click **Save**.

# Language and Currency Header

### Show language selector *** Eclipse supports selling in multiple languages. After you have [added and published languages](https://help.shopify.com/en/manual/markets/languages/translate) to your store, enable the **Language selector** to let customers select their preferred language. `Click Header section to find settings`

Setting	Description
Show language selector	Allow visitors to browse your store in another language that you've enabled in your settings. You can add multiple languages in your Shopify admin and use a translation app to translate your store content in multiple languages.

### Show country selector *** Enable the **Country selector** to let customers to view your products with their preferred currency. The selector displays countries with their currencies supported in your [Shopify Market settings](https://www.shopify.com/admin/settings/markets). {% hint style="success" %} See Shopify's [Sell in multiple currencies with Shopify Payments](https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency) guide to learn how to add multiple currencies. {% endhint %} `Click Header section to find settings`

Setting	Description	Options
Show country selector	Allow visitors to view prices in their preferred currency. The selector shows country currencies that are supported in your Shopify Market settings.
Show country flag	Display a flag icon next to country names in the selector.
Label	Display selector options as currencies only or as the currency and country.	Currency only Default Country and Currency

# Impact logo Header The **Impact logo** displays a prominent logo image below the header on the home page. The impact logo hides when the page is scrolled down.

Why is there extra space around the logo?

You can reduce the amount of padding Make sure to crop your image to avoid unwanted space around the logo. You can use [Shopify's built-in image editor ↗](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to crop, resize, and even remove image backgrounds. ![](/files/TlNfDXifR4JNa1KorBg0)
You can also

## Hide impact logo *** To remove the impact logo from your home page, click the **Hide** (eye) icon on the section.

## Set up impact logo *** Open the **Impact logo** section and upload your image with the following recommendations:


File format	Use .png, .svg, or .webp image with a transparent background.
Image width	Use images with a minimum width between 250px and 1200px. For full width impact logo, we recommend logo images that are wider than they are tall.
Logo color	For the Transparent impact logo, you may want to change the logo color to contrast with the underlying section image.

{% hint style="info" %} Make sure to crop your image to avoid unwanted space around the logo. You can use [Shopify's built-in image editor ↗](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to crop, resize, and even remove image backgrounds. ![](/files/TlNfDXifR4JNa1KorBg0)
{% endhint %} ### Choose visibility for screen sizes *** The impact logo can appear on **all screen sizes** or **on large screens** (desktop and tablet) only. {% hint style="info" %} If your image is taller than wide, you may want to show the logo **on large screens** only to keep the top section visible on mobile screens. {% endhint %} `Click Impact logo section to find settings`

Setting	Description	Options
Visibility	Choose to display on all screen sizes or only large screens.	On all screen sizes Default On large screens

### Set image width *** By default, the impact logo spans the **full width** of the screen. For smaller logos, you can set a **Custom width** between 250px to 1200px. {% hint style="info" %} We recommend setting the **image width** option to match the actual pixel width of the image. {% endhint %}

`Click Impact logo section to find settings`

Setting	Description	Options
Image width	Set the logo width to the page width, full width, or a custom width.	Page width Full width Default Custom width
Custom width	Set the maximum width of the impact logo.	250px - 1200px Default: 500px

### Change alignment and padding *** For logo images that are below full width, you can choose to **align** the impact logo to the left, center, or right of the screen. You can also adjust the **padding** above and below the impact logo.

`Click Impact logo section to find settings`

Setting	Description	Options
Alignment	If logo image is less than full width, position the logo either to the left, center, or right.	Left Center Default Right
Top padding	For desktop and mobile, add spacing above the impact logo.	0 - 80px Default: 40px
Bottom padding	For desktop and mobile, add spacing below the impact logo.	0 - 80px Default: 40px

### Disable transparent impact logo *** By default, the **transparent impact logo** overlays the section at the top of the page. The transparent logo requires a full-width [Slideshow](/eclipse/sections/slideshow) at the top of the page. {% hint style="info" %} **Important** Set **Section width** to `Full width` and **Top padding** to `0px`. Click the section and scroll to the bottom the find the settings.

{% endhint %} `Click Impact logo section to find settings`

Setting	Description	Options
Enable transparent impact logo	When enabled, the impact logo overlays the top section to display the full height of full width media sections.	Default: Enabled

### Change animation style *** By default, the impact logo is animated with a **parallax effect** and **fade effect** when scrolling down the page. You can disable the parallax effect and change the direction of the fade effect. `Click Impact logo section to find settings`

Setting	Description	Options
Enable parallax on scroll	When enabled, the impact logo moves at a different speed than the page when scrolling. This parallax effect creates an appearance of depth and perspective.	Default: Enabled
Fade effect on scroll	Choose how the impact logo fades when scrolling down the page.	Full fade Default Bottom to top fade Top to bottom fade Disabled

# Search Header The **Search drawer** in the header lets visitors search your collections, products, and pages.

{% hint style="success" %} You can customize search results with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Create custom filters, select result types, and add "synonym groups" to show relevant results. See Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery) to learn more. {% endhint %} ## Predictive search ***

Setting	Description	Options
Enable predictive search	Enable instant search results and auto-complete suggestions in the search drawer. When disabled, customers are redirected to the search results page.	Default
Results per category	Set the maximum number of results for each content type (pages, products, collections) in the search bar.	4 - 10 Default: 4
Show prices	Show prices for products that appear in search results.	Default
Show vendors	Show vendors for products that appear in search results.	Default

### Searchable fields *** Choose which parts of your store should be searchable to limit search results.

Setting	Description	Options
Author	Make the author field searchable.	Default
Body	Make body text for products, pages, and collections searchable.	Default
Product type	Make product types searchable.	Default
Tag	Make product tags searchable.	Default
Title	Make product, page, and collection titles searchable.	Default
Variant barcode	Make variant barcodes searchable.	Default
Variant SKU	Make variant SKUs searchable.	Default
Variant title	Make variant titles searchable.	Default
Vendor	Make vendors searchable.	Default

### Show quick links *** When a search hasn't been made yet, you can display suggested links to help customers get started. #### Create menu From your Shopify admin, go to **Content > Menus**. Click **Create menu** and **Add menu items**. Click **Save**. #### Connect menu In your theme editor, go to **Theme settings > Predictive search**. Under **Quick links**, select the menu you created in the Shopify admin.

Setting	Description	Options
Heading	Enter a title for the list of quick links.	Default: "Quick links"
Links	Select a menu of links (created in your Shopify admin) to display as quick links.

# Footer The **Footer** appears at the bottom of every page. It's a great place for quick-access links, contact details, and other store information. * Design the footer layout with **feature blocks** * Show **social media** and **payment icons** * Show l**anguage and country selectors**

## Set up section *** Click the section to edit the **general section colors and spacing**. Learn more:


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Add footer content blocks *** Use **footer blocks** to add menu links, text, images, an email signup, and social media icons. * Click **(+) Add block** to add feature blocks to the footer. * Use the drag handles **`⋮⋮`** to change the order of the footer blocks. * Click a block to customize the content and settings.


Links	/pages/R8zVGrspebrhwKErtVyR
Newsletter and socials	/pages/jS87oGXG6603Jcmp44ug
Image text and socials	/pages/87OckFXNujNUz6LA4s6p
Custom Liquid	/pages/F52gi2H6BLAjejvaYcBC

### Spacer block *** Add a spacer block and position it between other footer blocks to add extra space. `Click Spacer block to find settings`

Setting	Description	Options
Desktop width	Use the sliders to increase the amount of horizontal space on desktop.	10-100 px Default: 20
Mobile height	Use the sliders to increase the horizontal spacing on desktop.	0-100 px Default: 0

## Change layout *** Customize the general layout and style of the footer. In the footer section settings: * Change **alignment** of footer content * Increase the **gap** between columns * Change the **column heading font** `Click Footer section to find settings`

Setting	Description	Options
Footer alignment	Align the content of the footer to the left or center. When Center is selected, the subfooter content will also be centered (the selectors, copyright text, payment icons, and subfooter links).	Left Default Center
Column gap	Use slider to add space between the footer blocks. Set to `0px` to remove space.	0-60 px Default: 40
Column heading text style	Change the style of the heading text used by footer blocks. Text styles are based on your theme settings.	Heading Default Body Overline

## Show language and country selectors ***


Language selector	Allow visitors to view your store in another language that you've added.	/pages/I8ToYH6CIE6VhHzxtJTK#show-language-selector
Country selector	Allow visitors to select their preferred region and currency.	/pages/I8ToYH6CIE6VhHzxtJTK#show-country-selector

## Show payment icons *** Enable **Payment icons** to display a row of supported payment methods. {% hint style="info" %} The icons that are displayed depend on the payment methods that are available in your customer's region and currency. See [Shopify's Payments guide](https://help.shopify.com/en/manual/payments) {% endhint %}

`Click Footer section to find settings`

Setting	Description
Show payment icons	Show icons of your store's payment methods, as enabled in your Shopify admin.

## Add additional copyright text *** Add an additional line of text below the copyright text. Click the **Footer** section, and enter text in the **Additional copyright text** field.

Setting	Description
Additional copyright text	Add custom text to the end of the "Copyright" line.
Subfooter links	Show additional links at the bottom of the footer. Select a menu that you've created in your Shopify admin.

## Remove "Powered by Shopify" *** The "Powered by Shopify" text appears in the footer on every page. You can edit or remove this text in the default theme content editor. * In your theme editor, click the **Actions (****...****)** button and select **Edit default theme content**. * Search "Powered by Shopify" to find the default text in the **Checkout & system > Links** area. * To remove default text, replace the text in the field with a single space. # Image Text and Socials Footer In the footer, show a block with an image, text and social icons. It's a good place to show your logo with some text about your store.

## Add image text and socials block *** Click the arrow next to the **Footer** section, then click **(+) Add block** and select **Image, text, and socials**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content. ### Change desktop width *** Change the block width to adjust the layout with other footer blocks. `Click Image Text and Socials block to find settings`

Setting

Description

Options

Desktop width

Use the slider to increase the width of the footer block on desktop.

To keep all columns in a single row, make sure all footer block widths add up to 100%. To display block on its own row, set the desktop width to 100%.

10 - 100% Default: 20%

Mobile width

Set the width of the footer block on mobile. Set the width to `100%` to avoid line breaks in link names.

50% Default
100%

## Set up image *** Upload an image and adjust its **width** and **position**. `Click Image, text, and socials block to find settings`

Setting	Description	Options
Image	Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.
Desktop image width	Set the maximum width (in pixels) of the image on desktop.	50 - 500px Default: 100px
Mobile image width	Set the maximum width (in pixels) of the image on mobile.	50 - 500px Default: 100px
Image position	Show the image above or below the text.	Above text Default Below text

## Change heading and text *** Change the heading and subheading text. Leave fields blank to hide them. You can change the **size** and **font** of the text. `Click Image, text, and socials block to find settings`

Setting	Description	Options
Heading	The title of the block. Leave the field blank to remove the heading. However, a heading is required when collapsible rows on mobile are enabled.	Default: "About us"
Show heading on desktop	Choose whether to show the block heading on desktop screens.	Default: Enabled
Text	Add multiple lines of rich text.	Default: "Share contact information..."

## Display collapsible row on mobile *** On mobile screens, you can display the block in a collapsible row, instead of as a column. > **Note**: A **heading** is required for the collapsible row. `Click Image, text, and socials block to find settings`

Setting	Description	Options
Collapsible row on mobile	Display the block as an expandable row that reveals the block content when clicked.	Default: Disabled

## Show social icons *** Display social icons that link to your profile pages. Open the **Theme settings** tab in the settings panel to enter the full URL of your profile pages. `Click Image, text, and socials block to find settings`

Setting	Description	Options
Show social icons	Show icons for your social media accounts.	Default: Enabled
Heading	The title of social media area. Leave the field blank to remove the heading.	Default: Follow us

## Enable Follow on Shop *** Follow on Shop allows customers to follow your store on the Shop app and receive personalized recommendations and notifications about your products. {% hint style="warning" %} To use this feature, you need to have the Shop channel installed, and Shop Pay activated on your store. See [Shopify's Follow on Shop guide](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/follow-on-shop) for assistance. {% endhint %} `Click Image, text, and socials block to find settings`

Setting	Description	Options
Enable Follow on Shop	Allow visitors to follow you on Shop to receive recommendations and notifications about your products. You'll need to have the Shop channel installed and Shop Pay activated on your store. See Shopify's Follow on Shop guide	Default: Enabled

# Links block Footer In the footer, show menu links from one of your [Shopify navigation menus](https://help.shopify.com/en/manual/online-store/menus-and-links).

## Add links block *** Click the arrow next to the **Footer** section, then click **(+) Add block** and select **Links**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content. Click the **Links** block to **select a menu** that you've created in the Shopify admin. `Click Links block to find settings`

Setting	Description
Menu	Select a menu of links that you've created in your Shopify admin. Only top-level links are displayed, so dropdown menus will not appear.

## Change block width *** Change the block width to adjust the layout with other footer blocks. `Click Links block to find settings`

Setting

Description

Options

Desktop width

Use the slider to increase the width of the footer block on desktop.

To keep all columns in a single row, make sure all footer block widths add up to 100%. To display block on its own row, set the desktop width to 100%.

10 - 100% Default: 20%

Mobile width

Set the width of the footer block on mobile. Set the width to `100%` to avoid line breaks in link names.

50% Default
100%

## Select menu links *** Click a **Links block** to select a menu that you've created in the Shopify admin. `Click Links block to find settings`

Setting

Description

Options

Select a menu of links that you've created in your Shopify admin.

Only top-level links are displayed, so dropdown menus will not appear.

Default: Footer menu

## Change heading *** Change the heading text above the links and choose whether to show the heading on desktop. `Click Links block to find settings`

Setting	Description	Options
Heading	The title of the links block. Leave the field blank to remove the heading. However, a heading is required when collapsible rows on mobile are enabled.	Default: Links
Show heading on desktop	Choose whether to show the block heading on desktop screens.	Default: Enabled

## Display collapsible row on mobile *** On mobile screens, you can display the links block in a collapsible row, instead of as a column. > **Note**: A **heading** is required for the collapsible row. `Click Links block to find settings`

Setting	Description	Options
Collapsible row on mobile	Display the block as an expandable row that reveals the block content when clicked.	Default: Disabled

# Newsletter and Socials Footer In the footer, show an email signup form with social icons. {% hint style="info" %} Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. See Shopify's [Marketing guide](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/customer-contact-information) and learn about [Subscriber lists](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and using [Shopify Email](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email) {% endhint %}

## Add newsletter and socials block *** Click the arrow next to the **Footer** section, then click **(+) Add block** and select **Newsletter and socials**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content. ### Change desktop width *** Change the block width to adjust the layout with other footer blocks. `Click Newsletter and Socials block to find settings`

Setting

Description

Options

Desktop width

Use the slider to increase the width of the footer block on desktop.

To keep all columns in a single row, make sure all footer block widths add up to 100%. To display block on its own row, set the desktop width to 100%.

10 - 100% Default: 20%

Mobile width

Set the width of the footer block on mobile. Set the width to `100%` to avoid line breaks in link names.

50% Default
100%

## Change text headings *** Change the heading and subheading text. Leave fields blank to hide them. You can change the **size** and **font** of the text. `Click Newsletter and Socials block to find settings`

Setting	Description	Options
Heading	The title of the newsletter block. Leave the field blank to remove the heading. However, a heading is required when collapsible rows on mobile are enabled.	Default: Newsletter
Text	Add multiple lines of rich text to tell visitors about your subscriber list.	Default: "Sign up for exclusive offers..."
Text size	Adjust the size of the text from small to large.	1 - 8 Default: 7
Text style	Change the style of the text. Text styles are based on your theme settings.	Heading Body Default

## Show social icons *** Display social icons that link to your profile pages. Open the **Theme settings** tab in the settings panel to enter the full URL of your profile pages.

`Click Newsletter and Socials block to find settings`

Setting	Description	Options
Show social icons	Show icons for your social media accounts.	Default: Enabled
Heading	The title of social media area. Leave the field blank to remove the heading.	Default: Follow us

Setting	Description	Options
Enable Follow on Shop	Allow visitors to follow you on Shop to receive recommendations and notifications about your products. You'll need to have the Shop channel installed and Shop Pay activated on your store. See Shopify's Follow on Shop guide	Default: Enabled

# Language and Currency Footer ### Show language selector *** Eclipse supports selling in multiple languages. After you have [added and published languages](https://help.shopify.com/en/manual/markets/languages/translate) to your store, enable the **Language selector** to let customers select their preferred language. `Click Footer section to find settings`

Setting	Description
Show language selector	Allow visitors to browse your store in another language that you've enabled in your settings. You can add multiple languages in your Shopify admin and use a translation app to translate your store content in multiple languages.

Setting	Description	Options
Show country selector	Allow visitors to view prices in their preferred currency. The selector shows country currencies that are supported in your Shopify Market settings.
Show country flag	Display a flag icon next to country names in the selector.
Label	Display selector options as currencies only or as the currency and country.	Currency only Default Country and Currency

# Custom Liquid Footer {% hint style="warning" %} **We do not support code customizations**. This guide offers a basic reference for developers and advanced users familiar with HTML and Liquid. Always test code changes on unpublished theme copies. For assistance, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co/). {% endhint %} With the **Custom Liquid** block, you can extend your theme by adding snippets of Liquid or HTML code as a block or section in the theme editor. The Custom Liquid block provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code. ## Add Custom Liquid block *** Under **Footer**, click **(+) Add block** and select **Custom Liquid**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start customizing. `Click Custom Liquid block to find settings`

Setting	Description	Options
Desktop width	Use the slider to increase the width of the footer block on desktop. For best results, make sure all footer block widths add up to 100%.	10 - 100% Default: 20%
Custom Liquid	Add custom Liquid code for apps or custom content. See Shopify's Liquid reference guide to learn more.

# Product listings **Product listings** are products displayed on collection pages and in theme sections. Each product displays the product's image, title, and price, along with optional quick shopping features. In your theme editor, go to **Theme settings > Product listings** to customize the style and features of product cards.


Product card details	Show vendor, swatches, and rating stars.	/pages/x01s1vsbkaTmrz5vMCTM#product-card-details
Product image styles	Change image shape and show secondary image on hover.	/pages/x01s1vsbkaTmrz5vMCTM#product-card-images
Product badges	Show sale, sold-out, and custom badges.	/pages/lHkYr8Pi1m4nEvlL00o4
Quick shopping	Show Quick view or Quick add button.	/pages/8QM9MhSVD7IyUm1qmdWk

# Product card styles Go to **Theme settings > Product listing** to customize the appearance of product cards. ## Product card images *** Change the **shape (aspect ratio)** of the product images, and enable a **secondary image on hover**.

Setting	Description	Options
Show second image on hover	Display the second product image when a cursor hovers over a product card.
Aspect ratio	Make product images consistent by cropping them to a square or rectangular shape. Select Natural to maintain their original shape without cropping.	Natural Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

## Product card details *** Choose to show vendor names, swatches, and product ratings. ### Show vendor ***

Setting	Description	Options
Show vendor	Show vendor names on product cards.	Default

### Show swatches *** Go to **Theme settings > Swatches** to show swatches on product listings.

Setting	Description	Options
Enable product listing swatches	Show product variant swatches on hover. Go to Theme settings to set up swatches.	Default

### Show product ratings ***

Setting

Description

Options

Show product ratings

If you have a product reviews app, display ratings with either stars, the number of reviews, or both.

Rating & Count Default

Rating

Count

# Sale and sold out badges ## Sale badge *** When you set sale prices in your Shopify admin, you can display a **Sale badge** on products with a "sale" or discount message. {% hint style="success" %} Discounts and inventory are Shopify features. Learn about [Setting sale prices](https://help.shopify.com/en/manual/discounts/sales) and [Managing inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify. {% endhint %} shows when a **Compare at price** is added in the Shopify admin. `Go to Theme settings > Product badges to find settings`

Setting	Description	Options
Show sale badge	Show sale badge on products with a 'compare at price' that's higher than the current price.
Sale badge format	Display discounts as a percentage or dollar value, or simply show a "Sale" text label.	Sale 20% off -20% Save 20% $5 off -$5 Save $5

## Sold out badge *** The **Sold out** badges show when a product's inventory is zero.

Setting	Description
Show sold out badge	Display 'Sold out' badge on products with zero inventory.

# Product badges {% columns %} {% column width="83.33333333333334%" %} **Product badges** are labels that appear on listed products that are on **Sale**, **Sold out**, or you can add **Custom** badges.

Why are custom badges not showing?

Make sure the badge tags match the exact spelling of the product tags in your Shopify admin. Also, check that the **Show custom badges** option is enabled in *Theme settings > Product listing*.

{% endcolumn %} {% column width="16.666666666666657%" %} {% endcolumn %} {% endcolumns %}

Show badges on product listings

*** Sale, sold out, and custom badges are enabled by default. You can toggle off badges in theme settings. _{Go to Theme settings > Product listing to find settings}

Setting	Description
Show sale badge	Show sale badge on products with a 'compare at price' that's higher than the current price.
Show sold out badge	Display 'Sold out' badge on products with zero inventory.
Show custom badges	Display discounts as a percentage or dollar value, or simply show a "Sale" text label.

Sale badge

*** When you set sale prices in your Shopify admin, products will display a **Sale badge** with a "sale" or discount message. {% hint style="success" %} Product discounts is a Shopify feature. Learn about [Setting sale prices](https://help.shopify.com/en/manual/discounts/sales) and [Managing inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify. {% endhint %} _{Go to Theme settings > Product badges to find settings}

Setting	Description
Background	Set the color of the badge background.
Text	Set the color of the badge label.

Sold out badges

*** When products are out-of-stock, products will display a "Sold out" badge. To disable sale or sold-out badges, click **Theme settings** and open the Product listing tab. {% hint style="success" %} Product inventory is a Shopify feature. Learn about [Managing inventory](https://help.shopify.com/en/manual/products/inventory) on Shopify. {% endhint %} _{Go to Theme settings > Product badges to find settings}

Setting	Description
Background	Set the color of the badge background.
Tex	Set the color of the "sold out" message.

Custom badges

*** Add up to 4 badges with custom messages and colors to display on specific products. {% stepper %} {% step %} In **theme settings > product badges**, enter words in **Badge tags** want to display as a badge (e.g. "Limited edition"). > Use the color selector to change the **Badge color**. > {% endstep %} {% step %} In your **Shopify admin**, add tags to your products using the exact same words. > Learn more about [creating and using tags](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags) on Shopify.\ > \ > To use badge colors for multiple tags, enter the tags in a comma-separated list. For example: `Best seller, New, Special`. > {% endstep %} > {% endstepper %} _{Go to Theme settings > Product badges to find settings}

Setting	Description
Badge tags	Enter the words to display as the product badge. For badges to appear, badge tags must match the product tags entered in your Shopify admin.
Background	Set the color of the badge background.
Text	Set the color of the badge label.

### Translate custom badges You can use **Metaobjects** and Shopify's [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app to translate custom badge labels. There are three general steps: {% stepper %} {% step %} Add a new **Metaobject** with a field for each badge label {% endstep %} {% step %} Add the default language text for each label as **Entries** {% endstep %} {% step %} Use Shopify's **Translate & Adapt** app to translate the default label text. {% endstep %} {% endstepper %}

STEPS

**1. Add Metaobject with custom badge names** In the Shopify admin: 1. Go to **Content > Metaobjects**. 2. Click **Add definition**. 3. Enter `Custom badges` in the metaobject Name field. > This name must match exactly. 4. Under **Fields**, click **Add field**. 5. Select **Single line text**. 6. Enter the badge label in the **Name** field. > The name must exactly match the badge label.

7. (*Required*) Uncheck **Use this field as display name**. 8. Click **Add**. 9. **Repeat steps 4 to 8 for every badge label.** 10. Click **Save**. **2. Add Entries for badge labels in default language** 1. Go to **Content > Metaobjects**. 2. Click on the **Custom badges** definition 3. Click **Add entry**. 4. Enter the same name of each custom badge label. > Enter the exact name to match the field label. This text will be the label text for the default language.

5. Under **Handle**, click **Edit**. 6. Enter `custom_badges_translations` as the entry's unique identifier.

7. Click **Save**. **3. Use Translate & Adapt to add translations** 1. Go to **Apps > Translate & Adapt**. > If you haven't already, go to [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) on the app store and click **Install**. 2. Under **Products**, click **Metaobjects**. 3. Enter translations for each custom badge label.\\

4. Click **Save**.

# Prices and currencies In **Theme settings > Currency format**, customize how prices are displayed on products. ## Currency codes *** Choose to display currency codes next product prices.

Setting	Description	Options
Show currency codes on products	Show the three-letter country currency code next to product prices.	Default
Show currency codes on cart totals	Show the three-letter country currency code next to cart totals.	Default

## Prices *** For products that are **sold out** or have a **$0 price**, you can choose to hide the price or show custom text instead. Go to **Theme settings > Currency format** to find the settings.

Setting

Description

Options

$0 prices

Choose how to display "$0" prices. You can hide "$0" prices or replace them with a custom label.

Use the default theme content editor to add your custom label in the "zero price" field.

Show as '$0' Default

Show as custom label

Hidden

Sold-out prices

Choose how to display prices for sold-out products. You can hide prices for all sold-out products or replace them with a custom label.

Use the default theme content editor to add your custom label in the "sold out price" field.

Show as price Default

Show as custom label

Hidden

### Add custom label for prices *** By default, **$0 prices** use "Free" and **sold-out prices** use "Sold out" as custom labels. You can change these labels in your default theme content editor. {% hint style="warning" %} You can only access the **default theme content editor** for purchased themes on Shopify. {% endhint %}

STEPS

In the theme editor (**Customize**): 1. Go to **Theme settings > Product listing** and scroll down to **Prices**. > For price display options on the product page, go to **Theme settings > Product**. 2. Click the dropdown for **$0 prices** or **Sold out prices**, and select **Show as custom label**. 3. Click the **Actions** **`...`** menu at the top of the theme editor. > You can also open the Actions menu next to your theme in the **Online store** section of your Shopify admin. 4. Select **Edit default theme content**. > **Note**: You can only access the **default theme content editor** for purchased themes on Shopify. 5. Click **Products** and scroll down to the **Inventory** section. 6. Change the text in the fields for **Sold out price custom label** or **Zero price custom label**. 7. Click **Save**.

# Swatches Variant options Display your product variants as **Swatches** to make it easy for customers to view your product options at a glance.

Why are my swatches blank?

If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom swatch names match your variant names. You may also need to add custom swatches for multiple languages.

## **Enable swatches** *** Swatches are enabled in your theme settings by adding the option name for your variants. 1. Go to **Theme settings > Swatches**. 2. Enter the exact name of the product options that you want to display as swatches (e.g., 'Color'). Enter multiple option names as a comma-separated list. 3. Click **Save**.

## Set up swatch colors *** You can add swatches using **default colors** or **custom colors** added to your theme settings. You can also **upload custom images** to represent your product variants more precisely. [Use default colors for swatches](/eclipse/products/swatches/use-default-colors) [Use custom colors for swatches](/eclipse/products/swatches/use-custom-colors) [Upload custom images for swatches](/eclipse/products/swatches/use-custom-images) ## Swatch options *** Go to **Theme settings > Swatches** to change how swatches appear across your store.


Show product listing swatches	/pages/x01s1vsbkaTmrz5vMCTM#show-swatches
Show product filter swatches	/pages/0vzTP0Stl3Zu9uSeRacx#show-product-filter-swatches
Change product page swatch size	/pages/5TuK6lgxJb5c1H2WD2FA#swatches

# Use default colors Find a color you want to use on this list of [140 default web colors](https://htmlcolorcodes.com/color-names/), then enter that exact color name as the **Option value** for a product variant in your Shopify admin. {% hint style="warning" %} These default color names will appear on your product pages and in the cart. In order to choose your own product variant name or different color, you will need to use a custom web color. {% endhint %}

STEPS

In your **Shopify admin**: 1. Go to your **Products** to click the product you want to edit. 2. Under **Variants**, click **Add options like size and color** checkbox if you're adding variants for the first time. 3. Add the **Option name** (e.g. "Color" or "Material"). > Remember to add this option name in your **Theme settings** to enable swatches. > See Shopify's [Variants guide](https://help.shopify.com/en/manual/products/variants) for more information about product options. 4. Enter the exact name of a [default color](https://htmlcolorcodes.com/color-names/) in the **Option values** field for your variant. > If your store uses multiple languages, you will need to use custom colors or images. 5. Click **Done**. 6. Click **Save**.

# Use custom colors In **Theme settings > Swatches**, you can assign custom colors to product variants using a **hex code color** (e.g. `#00b300`). Custom colors will override any default colors. * In the **Custom swatch colors** field, list up to 100 variant names followed by a colon and the hex code (e.g. “Green: #00b300”). * If your store uses **multiple languages**, add each translated variants name on a separate line with the assigned hex code.

Why are my swatches blank?

Make sure the variant names match the exact spelling from your Shopify admin. If your store uses **multiple languages**, add each translated variant name with the assigned custom hex code on separate lines.

Why aren’t my collection pages loading?

Adding more than 100 custom swatch colors can cause a ‘500’ error on your store and stop collection pages from loading. Consider using Custom swatch images for larger sets of variant swatches.

### Watch video tutorial {% embed url="" %} ## Find color hex codes *** To find the hex code for the color you want, you can use a [HTML color picker like this one](https://htmlcolorcodes.com/). When you choose your color, select and copy the six-character hex code, including the hashtag symbol. ## Add custom colors *** In ***Theme settings > Swatches***, list variant names followed by a colon and the hex code (e.g. “Green: #00b300”). If you store uses multiple languages, add each translated variant name with the custom hex code on separate lines. {% hint style="warning" %} Adding more than 100 custom swatch colors can cause a ‘500’ error on your store and stop collection pages from loading. Consider using Custom swatch images for larger sets of variant swatches. {% endhint %}

STEPS

In your theme editor (**Customize**): 1. Click to open the **Theme settings**, then click **Swatches**. 2. In the **Custom swatch colors** field add the exact name of the **Option value** (e.g. the product variant "Green") followed by a colon and your hex code color (e.g. **`Green: #00b300`**). > To add more than one custom color, press the 'return' key to add each color on its own line. > For **sibling products**, use the **Option name** added to the metafield you created. See the sibling product swatches guide to learn more. 3. (*For multiple store languages*) Add the translated variant name for all languages, followed by a colon and the hex code. > For example, for stores that use English and German, add custom colors for both **`Green`** and **`Grün`** on separate lines. 4. Click **Save**.

# Use custom images Using custom images for swatches is great for product variants that have patterns or textures. Custom swatch images require image file names and variant names that match, which we will cover below. Adding custom swatches images involves two general steps: **(1) Create and upload your custom swatch images** and **(2) Set up your product variants with matching names**. ## 1. Create and upload custom swatch images *** For each product variant, you need to create a PNG image by screenshotting or cropping your product images. Each swatch image needs a file name that matches the variant name in your product options. {% hint style="info" %} **File names must be in lowercase and use hyphens instead of spaces. If your variant name has special characters (e.g. \* or &), replace them with hyphens.** For example, if the product variant is called "Sea Blue & Red", the swatch image file must be named **`sea-blue-red.png`**. {% endhint %} {% hint style="warning" %} If your store uses **multiple languages**, make sure to upload swatch images with file names that match the translated name of your product variants, for each language. For example, if your store uses English and German, you need two swatch image files for the default variant name (**`yellow.png`**) and the translated name (**`gelb.png`**). {% endhint %}

STEPS

1. You can create PNG image files by taking a **screenshot** (step 2) or **cropping** your product images (step 3). > We recommend images with minimum length or width of **70px**. 2. **Screenshots**: Use the **built-in screenshot tool** on your computer to capture swatches from your existing product images: > **Windows:** [How to use Windows Snipping Tool](https://support.microsoft.com/en-us/windows/use-snipping-tool-to-capture-screenshots-00246869-1843-655f-f220-97299b865f6b) > **Mac:** [Take a screenshots on your Mac](https://support.apple.com/en-us/HT201361) 3. **Cropped images**: Alternatively, **crop** a section of your product photo with a photo editing application (like Preview or Photoshop). > **Windows:** [How to Crop Images on Windows](https://www.windowscentral.com/how-crop-image-windows-10) > **Mac:** [How to crop an image in Preview on Mac](https://www.idownloadblog.com/2016/01/18/quickly-crop-image-preview-mac/) 4. Save your images as PNG files with a file name that matches the variant name. **File names must be in lowercase and use hyphens instead of spaces. Add image files for each store language matching the translated variant name.** \ For all image files, use lowercase only (no capitals): | Variant name | File name | | ------------ | --------- | | Gray | gray.png | | Green | green.png | \ For variants with multiple words, use hyphens **`-`** instead of spaces: | Variant name | File name | | ------------ | ---------------- | | Sea Blue | sea-blue.png | | Red and Blue | red-and-blue.png | \ For multiple languages, add image files for each language with the translated names of the product variant: | Language | Variant name | File name | | -------- | ------------ | ----------- | | English | Yellow | yellow\.png | | German | Gelb | gelb.png | | French | Jaune | jaune.png | 5. Once you have renamed your swatch images, go to **Content > Files** in your Shopify admin. 6. Click the **Upload files** button in the top-right corner and add all your swatch image files. You can select multiple files at once. 7. Go to Step two: **Set up your product variants**.

## 2. Set up product variants *** Once you've uploaded your images, you need to set up your product variants with names that match the file names of your swatch images.

STEPS

In your **Shopify admin**: 1. Go to **Products** and click the product you want to edit. 2. Under **Variants**, click **Add options like size and color** checkbox if you're adding variants for the first time. 3. Add the **Option name** (e.g. "Color" or "Material"). > Remember to add this option name in your **Theme settings** to enable swatches. > See Shopify's [Variants guide](https://help.shopify.com/en/manual/products/variants) for more information about product options. 4. Add the **Option values** (product variants) with a name that corresponds to the correct swatch image file. > For example, if you've uploaded **`dark-blue.png`** as a swatch image, the product variant must be named **`Dark Blue`**. > If your store uses multiple languages, add the translated variant names using [Shopify's Translate & Adapt](https://apps.shopify.com/translate-and-adapt) feature. | Variant name | File names | | ------------ | -------------------------------- | | Green | yellow\.png, gelb.png, jaune.png | | Sea blue | sea-blue.png | | Red and blue | red-and-blue.png | 5. Preview your store to confirm that the swatches now appear. > If the theme cannot locate a matching swatch image for a color variant, a *White* swatch is shown. In this case, make sure the file names match the variant name, use hyphens **`-`** instead of spaces, and are all lowercase (no capitals). 6. Click **Save**.

# Product page Template **Product templates** control the content, layout, and style of your product pages. In the theme editor, you can customize the product media, product overview, and overall page design. > To modify how products appear in collections and sections, go to the [product listing options](/eclipse/products/product-listings) in your theme settings. {% hint style="success" %} Products are created and managed in your Shopify admin. To learn more, refer to [Shopify's Products manual](https://help.shopify.com/en/manual/products). {% endhint %} ## Customize page style *** Click the **Product overview** section to edit the page colors, spacing, and layout.


Color scheme	/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme	/files/OZ4h4v0qfTnncw43MKk6
Section width	/pages/3wq6hFMr3k1BDOHIgjqZ#section-width	/files/lMLsRWOpgxDLC0CvtnAt
Section padding	/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding	/files/3ddmAtuVNo9MtYTf38ov

## Sticky effect *** The **Sticky effect** makes either the gallery or product details remain at the top of the screen when scrolling down. You may want to enable this option to keep the add-to-cart button visible or keep the product images visible. * **Sticky gallery** only applies to thumbnail gallery layouts. * **Sticky product details** applies when the gallery is longer than the product details. * Select **No sticky effect** to disable this option. ## Media gallery *** Click the Product overview section to customize the layout of your product media.


Gallery layout	Change the layout, size, position, and shape of your images		/pages/xHSCxA4JXppUU1PTbj98
Media grouping	Reveal images for the selected variant only.		/pages/VH11cL5rsvxSCaLSYnbH

## Sticky add to cart *** The **Sticky 'Add to cart'** allows customers to add a product directly to their cart anywhere on the product page. When the product form's add-to-cart button is not visible, the sticky bar appears at the bottom of the page with an add-to-cart button. The sticky bar displays the product title, price, image, and variant. Next to the variant, visitors can click the 'Change' link to jump to the variant selectors in the product form. Click the **Product overview** section to toggle the Sticky add to cart for Desktop and Mobile. ## Product overview blocks *** The **Product overview** section contains all the blocks that make up your product form, including product details, variant selectors, buy buttons, and additional feature blocks. ### Default blocks *** The **Product overview** includes blocks for product information and purchasing options. Click a block to find its settings.


Title
Vendor
SKU

Description

Show as collapsible row

/pages/uxw9wBof0eQyNvDNNiEh

Price

Show discounts

Sale and sold out badges
Shop Pay Instalments

/pages/owNdA6drNyY8S3NShhdG

Quantity selector

Show or hide quantity label

Variant selector

Choose selector style

Show swatches

Add info popup (product guide)

/pages/5TuK6lgxJb5c1H2WD2FA

Buy buttons

Choose button style

Show dynamic checkout buttons

Show pickup availability

/pages/1CS5FY9RBOnUjMR3qRzL

### Content blocks *** Add more blocks with custom content and features for your product page.


Collapsible row	Description.	/pages/JXwSFrWS5WBrWKjkJiXK
Complementary products		/pages/wKfSEZOr3mnW5sKVCczG
Custom options		/pages/6I0nlgPMeAiZGNJXUWxg
Featured icon with text	Description.	/pages/Ug0RI0DCr5i244UFarCz
Icon with text	Description.	/pages/ykErZ4eoIOQjwRT4yOhb
Image	Description.	/pages/g0rogOOuSRCdVEa7prHv
Inventory status		/pages/7TyZyf4lqbCZOs5nL5kg
Popup		/pages/O9dOcoiSiVJSYwEonE0f
Product rating		/pages/BsPF0lvW6wZkEzLm7NW3
Share icons		/pages/ymEUveqYE6JoZvpbGYx6
Text	Description.	/pages/ifHgmaXAmEhxBJVGq9If
Custom Liquid		/pages/zbbxSdlA7oVIq8PjG1Gq

## Product recommendations *** Add a full [product recommendations section](/eclipse/product-pages/product-recommendations) to your product pages. # Gift card product On Gift card product pages, you can allow customers to send gift cards to a recipient's email on a scheduled date with an optional message. ## Set up gift card product *** The **Recipient information form** appears on gift card product pages, so make sure you've set up a gift card product in your Shopify admin. Go **Products > Gift cards** to view or create a gift card product. {% hint style="success" %} **Shopify** Gift card products are a Shopify feature. See their [Gift card guide](https://help.shopify.com/en/manual/products/gift-card-products) to learn more, and contact [Shopify support](https://help.shopify.com/en/) for related questions. {% endhint %}

STEPS: Create gift card product

In your **Shopify admin**: 1. Click **Products** > **Gift cards**. 2. Click **Add gift card product**. 3. Set up your product details, including a title, description, product media, and denominations. See Shopify's [Gift card guide](https://help.shopify.com/en/manual/products/gift-card-products) to learn more. 4. Click **Save**.

### Enable gift recipient form *** In the **Product overview** section settings, select the **Show recipient information form for gift cards** option.

STEPS

In the theme editor (**Customize**): 1. Open the **Product template**. 2. Click the **Product overview** section to open the settings. 3. Under **Gift card**, select **Show recipient information form for gift cards**. 4. Click **Save**.

# Media gallery The **Media gallery** displays product images and videos for Product pages and Featured products. Change the position and layout of the gallery media, and change the size and shape of images and videos. {% hint style="info" %} To show images only for the selected variant, you can set up [media grouping](/eclipse/product-pages/media-gallery/media-grouping). {% endhint %} ## Choose layout style *** Display product media as a **grid**, **stacked** list, or show additional images as **thumbnails**.

`Click Product overview or Featured product section to find settings`

Setting	Description	Options
Desktop gallery layout	Choose how gallery media are displayed.	Grid Default Stacked Thumbnails below Thumbnails left
Thumbnail size	Set the maximum size of thumbnail images in the gallery.	50 - 100 px Default: 75

## Gallery position and size *** Position the media gallery on the left or right side of the product details. You can increase the width of the gallery on the page. `Click Product overview or Featured product section to find settings`

Setting

Description

Options

Desktop media position

Choose whether the media gallery appears on the left or right side of the product details.

Left Default
Right

Desktop gallery size

Set the maximum width of the media gallery. The product overview will adapt to the remaining width of the page.

35 - 70%

Default: 55

### Mobile gallery *** Customize the media gallery for mobile screens. `Click Product overview or Featured product section to find settings`

Setting	Description	Options
Media size	Set the size of product media on mobile devices.	Full width Default Contained
Enable slider looping	Return to the first image after swiping through the last image.

## Image aspect ratio *** Make your product media a uniform shape or use their original proportions. `Click Product overview or Featured product section to find settings`

Setting	Description	Options
Aspect ratio	Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.	Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

## Enable autoplay videos *** Choose to **autoplay and loop videos** in the product media gallery. Videos will be automatically muted and will not show controls. 1. Upload a `.mp4` or `.mov` video file to the product media in your Shopify admin. 2. Open the product template in your theme editor, then select **Enable autoplay videos**. #### Requirements *** For **autoplay videos**, make sure your video files meet the following requirements:


Video file type	`.mp4` or `.mov` Embedded YouTube or Vimeo videos are not supported.
Video length	1 minute (Recommended)
Video size	> 10MB (Recommended)

## Enable image zoom *** Allow customers to zoom in on product images for a closer look. `Click Product overview or Featured product section to find settings`

Setting	Description
Enable image zoom	When enabled, customers can click or hover over product images to see a zoomed-in view.

# Media grouping With **media grouping**, your product pages will show only the relevant media for the selected variant and hide the rest. {% hint style="info" %} If you want to show different product details as well as images, you may want to use [Sibling product swatches](/eclipse/product-pages/sibling-product-swatches), which links variants to their own product pages. {% endhint %} ### Set up media groups *** To create **media groups** for variants, first **re-order the product media for each of variant *****in sequence***, so that they are grouped together and follow the same order as your product options. Then **assign the first image of each group to the related variant**. {% hint style="info" %} When selected, variants will display the assigned image and all following images up until the *next* variant's assigned image. {% endhint %} In your **Shopify admin**, go to **Products** to open the product you want to edit: {% stepper %} {% step %} ### Re-order product media in the same order as variants Using the drag-and-drop handles **`⋮⋮`**, re-order your product media to **group together items for each variant.** The order of the groups should match the order of the variants. > All media for the first variant should be in the top positions, followed by all media for the second variant, followed by all media for the third variant, etc. ![Images ordered for the color variants 'Purple', 'Green,' and 'Yellow'.](/files/lKVGptcGcP9z3n5TMxL3) {% endstep %} {% step %} ### Assign the first image of each group to variants In the **Variants** section, click the **Add image** button next to each variant. Select the first image of the group related to that variant. > If no image is assigned, the media gallery will not update and will continue to show images of the previously selected variant. If your product has **multiple options**, assign the first image to each variant of that option. > For example, if your product has both color and size options, assign the first group image to variants with the same color.

Assign the first group image to the related variant.

For multiple product options, assign the first group image to each related variant.

{% endstep %} {% endstepper %} ### Enable media grouping *** After you've set up media groups for your variant images, you can enable media grouping in the **Product overview** settings of your product template. In your theme editor (**Customize**): 1. Open the product template. 2. Click the **Product overview** section. 3. Toggle on **Enable media grouping** option. 4. Click **Save**. # Product overview blocks The **Product overview** section contains all the blocks that make up your product form, including product information, variant selectors, buy buttons, and additional feature blocks.

Default blocks

*** The **Product overview** consists of essential product information and purchasing options. Click a block to find its settings.


Title
Vendor
SKU

Description

Show as collapsible row

/pages/uxw9wBof0eQyNvDNNiEh

Price

Show discounts

Sale and sold out badges
Shop Pay Instalments

/pages/owNdA6drNyY8S3NShhdG

Quantity selector

Show or hide quantity label

Variant selector

Choose selector style

Show swatches

Add info popup (product guide)

/pages/5TuK6lgxJb5c1H2WD2FA

Buy buttons

Choose button style

Show dynamic checkout buttons

Show pickup availability

/pages/1CS5FY9RBOnUjMR3qRzL

Content blocks

*** Add more blocks with custom content and features for your product page.


Badges		/pages/ZFD0vQisguZdOKn9q63U
Collapsible row	Description.	/pages/JXwSFrWS5WBrWKjkJiXK
Complementary products		/pages/wKfSEZOr3mnW5sKVCczG
Custom options		/pages/6I0nlgPMeAiZGNJXUWxg
Featured icon with text	Description.	/pages/Ug0RI0DCr5i244UFarCz
Icon with text	Description.	/pages/ykErZ4eoIOQjwRT4yOhb
Image	Description.	/pages/g0rogOOuSRCdVEa7prHv
Inventory status		/pages/7TyZyf4lqbCZOs5nL5kg
Popup		/pages/O9dOcoiSiVJSYwEonE0f
Product rating		/pages/BsPF0lvW6wZkEzLm7NW3
Share icons		/pages/ymEUveqYE6JoZvpbGYx6
Text	Description.	/pages/ifHgmaXAmEhxBJVGq9If
Custom Liquid		/pages/zbbxSdlA7oVIq8PjG1Gq

Add layout blocks

*** Use the **Divider** and **Spacer** blocks to add a border line and extra spacing between blocks. ### Divider block _{Click Divider block to find settings}

Setting	Description	Options
Bottom padding	Add spacing below the border line.	1-50 Default: 36

### Spacer block _{Click Spacer block to find settings}

Setting	Description	Options
Space	Add spacing between two blocks.	1-100 Default: 30

# Description The **Description** block displays the product description as added in your Shopify admin. {% hint style="success" %} Product descriptions are added in the Shopify admin. Themes cannot modify product descriptions. See [Shopify's product guide](https://help.shopify.com/en/manual/products/details#title-and-description) to learn more. {% endhint %} ## Set up description block *** Change the **title** and **text size** of the description block, then choose to display the description as a **collapsible row**. `Click Description block to find settings`

Setting	Description	Options
Title	Enter text to display as a heading.	Default: Description
Text size	Change the text size of the description text.	Small Medium Default Large
Display as collapsible row	Show an expandable title that reveals the description when clicked.
Expand by default	Display the collapsible row as open with the description revealed.

### Add bottom padding *** Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks. Bottom padding will not apply when another collapsible row is positioned below. `Click Description block to find settings`

Setting

Description

Options

Bottom padding

Add spacing below the block

1 - 50px

Default: 36px

# Price The **price block** displays the product price, discounts, and sale and sold-out badges. You can also enable the Shop pay instalments banner. ## Show discounts *** If your products have a 'compare-at price', you can display the discount as a percentage or curreny amount off, or show a 'Sale' badge. `Click Price block to find settings`

Setting	Description	Options
Show discount	Show discount amount as set up in the 'compare at price' setting in the Shopify admin.
Discount format	Display discounts as percentage or currency amount.	Sale 20% off Default -20% Save 20% $5 off -$5 Save $5

## Shop pay instalments banner *** If you have Shopify's Shop Pay enabled, you can allow customers to pay in instalments. Choose to display the Shop Pay banner below the price.

Setting	Description
Show Shop Pay Instalments banner	Show Shop Pay instalments banner. To display the banner, Shop Pay must be enabled for your store. Learn more

## Show sale and sold out badges *** The **Sale badge** shows when a **Compare at price** is added in the Shopify admin. The **Sold out badge** shows when a product's inventory is zero.

Setting	Description	Options
Show sale badge	Display a sale badge on products with a 'compare at price' that's higher than the current price.
Show sold out badge	Display a 'Sold out' badge on products with zero inventory.
Alignment	Set position of sale and sold out badges.	Above price Left of price Right of price
Sale badge format	Choose how to display discounts for sale badges. Show the discount as a percentage or dollar value, or simply show a "Sale" text label.	Sale 20% off -20% Save 20% $5 off -$5 Save $5

# Buy buttons The **Buy button** block shows the "Add to cart" button with an optional dynamic checkout button. ### Change button style *** Change the buy button style to **Solid** or **Outline.** Click the **Buy buttons** block to open the settings and change the **"Add to cart" button style.** ### **Sticky add-to-cart** *** ### Dynamic checkout button *** The **Dynamic checkout button** lets customers quickly buy the product they're viewing with a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method. To enable this option, click on the **Buy buttons** block to access its settings and check the **Show dynamic checkout buttons** checkbox. {% hint style="success" %} The Dynamic checkout button is a Shopify feature. The theme includes an option to enable the dynamic checkout button, but settings, icons, and functionality are controlled by Shopify. See Shopify's [Dynamic checkout button guide here](https://help.shopify.com/en/manual/online-store/dynamic-checkout). {% endhint %} ### Local pickup banner *** If you've set up local pickup in your Shopify admin, the theme automatically displays a banner below the buy buttons that tells customers whether the product is available at your location. {% hint style="success" %} Local pickup is a Shopify feature and is not controlled by the theme. See [Shopify's Local pickup guide](https://help.shopify.com/en/manual/sell-in-person/shopify-pos/order-management/local-pickup-for-online-orders) to learn more. {% endhint %} `Click Buy buttons block to find settings`

Setting	Description	Options
Add to cart button style	Change the appearance of the buy button.	Solid Outline Default
Show dynamic checkout buttons	Show "Buy it now" button with the returning customer's preferred checkout method.
Show pickup availability	Show banner with availability at your local stores.

### Add bottom padding *** Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks. `Click Buy buttons block to find settings`

Setting

Description

Options

Bottom padding

Add spacing below the block

1 - 50px

Default: 36px

# Badges Add the **Badges** block to show the sale, sold out, and custom badges. Badges colors and custom labels can be customized in [Theme settings > Product badges](/eclipse/products/product-badges). _{Go to Theme settings > Product listing to find settings}

Setting	Description
Show sale badge	Show sale badge on products with a 'compare at price' that's higher than the current price.
Show sold out badge	Display 'Sold out' badge on products with zero inventory.
Show custom badges	Display discounts as a percentage or dollar value, or simply show a "Sale" text label.
Sale badge format	Display discounts as a percentage or dollar value, or simply show a "Sale" text label.
Bottom padding	Set the amount of space below the badge block.

# Collapsible row **Collapsible row blocks** reveal additional text when opened. Use these blocks to organize product details and extra information.

## Add collapsible row blocks *** Under **Product overview**, click **(+) Add block** and select **Collapsible row**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click a row block to start adding content. {% hint style="warning" %} **Editing a template will change all pages that use that template**. [Create and assign new templates](https://github.com/fluorescent/kb-horizon/tree/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts. [Add dynamic content](https://github.com/fluorescent/kb-horizon/tree/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template. {% endhint %} `Click Collapsible row block to find settings`

Setting	Description	Options
Expand by default	Show row as already opened with the text revealed.
Heading	The title of the row.	Default: Collapsible row
Content	Add text that's revealed when the row is opened. Use the buttons to make the text bold or italicized, or to add a link.
Page for content	Display content from a page create in your Shopify admin. This option is useful for creating and displaying tables (for product guides).
Custom liquid	Add custom Liquid code for apps or custom content. See Shopify's Liquid reference guide and Liquid code examples to learn more.

### Add bottom padding *** Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks. Bottom padding does not apply when another collapsible row is positioned below. `Click Collapsible block to find settings`

Setting

Description

Options

Bottom padding

Add spacing below the block

1 - 50px

Default: 48px

# Complementary products The **Complementary products** block displays recommended products that pair well with the main product. * Change the **heading** text * Choose to show recommendations from a **collection** or a **custom list of products**. * Choose how many product recommendations to show

## Add complementary products *** Under **Product overview**, click **(+) Add block** and select **Complementary products**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start customizing. {% hint style="warning" %} **Editing a template will change all pages that use that template**. [Create and assign new templates](/eclipse/pages/templates/using-templates) to design different page layouts. [Add dynamic content](/eclipse/general/editing-themes/dynamic-content-with-metafields) to show page-specific content in the same template. {% endhint %} ### Select source for recommendations *** `Click Complementary products block to find settings`

Setting	Description	Options
Recommendations to show	Choose the source of product recommendations for cross-sells.	From product list Search & Discovery app recommendations
Max number of products to show	Set the maximum number of recommended products.	3 - 9

### Customize appearance *** Change the **heading** text and choose whether to show **product images**. `Click Complementary products block to find settings`

Setting	Description	Options
Heading	Enter a title for the complementary products block.	Default: "Pairs well with"
Show product thumbnails	Show product images next to the product title and price.

### Add bottom padding *** Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks. `Click Complementary products block to find settings` | Setting | Description | Options | | ----------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | Bottom padding | Add spacing below the block |

1 - 50px

Default: 36px

| --- [Next Page](/llms-full.txt/1)

Section Studio App

Eclipse

Stiletto

Stiletto

Cornerstone

Cornerstone

Lorenza

Lorenza

Spark

Spark

Static sections

Dynamic sections

Show badges on product listings

Sale badge

Sold out badges

Custom badges

Default blocks

Content blocks

Add layout blocks