Fluorescent Logo
Back to the index

Theme settings

From Lorenza’s “Customize” screen, you can click on the Theme settings tab to access theme-wide settings.

The "Customize" settings panel, showing the Sections and Theme settings tabs

The articles in this section provide more detail about how these theme settings work, and link out to Shopify documentation when these settings reach outside of Lorenza’s scope.

  • Colors
  • Fonts
  • Social media
  • Search
  • Product
  • Cart
  • Favicon
  • Checkout

Colors

From the Colors theme settings panel, you can set the colors Lorenza uses across the theme.

For each setting, you can use Shopify’s color picker to change the color. Use the Save button in the top-right corner of your “Customize” screen once you’re finished editing.

Settings

Lorenza has many color settings available, so you can completely customize Lorenza’s look so it matches your branding and style.

We realize that having so many settings is a bit confusing, so as we define each setting we’ll include an image that describes where and how the color is displayed.

Here are quick links to each sub-section of color settings:

  • General
  • Header
  • Footer
  • Contrast
  • Popovers

General

Accent

The accent color is used for buttons, badges, and elements that should stand out all over the store.

See examples in red:

Badge Compare at price Call to action button Buy button

Text

This setting changes the color of most text across the store.

Note that some home page sections allow you to override this text color.

See examples in red:

Text Text Text

Background

This setting changes the color of the background across the store.

Note that some home page sections allow you to override this text color. See an example in red:

Background

Border

Change the color of border lines that can appear between sections and page elements.

See examples in red:

Border Border

Input text

Change the color of text inside of inputs. Inputs can be quantity selectors or fields that the customer might fill in, like the ones on the contact page template. It also changes placeholder text and labels above form fields, like the one above cart notes.

See an example in red:

Input text color Input text color

Icon

Change the color of icons. This applies to the featured product section, especially if you have social sharing icons enabled. It also changes the color of quantity selectors (+/-) on product pages.

See an example in red:

Contrast icon color

Header

Text

Changes the text in the store header area. See an example in red:

Header text

Background

Changes the background color of the store header. See an example in red:

Header background

Border

Changes the border color at the bottom of the store header. See an example in red:

Header border

Footer

Text

Change the color of all text and links in the footer. See an example in red:

Footer text

Background

Change the color of the footer background. See an example in red:

Footer background

Border

Change the color of border lines that appear in the footer. See an example in red:

Footer border

Button background

Change the color of the button backgrounds in the footer. See an example in red:

Footer button background

Change the color of button text for buttons in the footer. See an example in red:

Footer button text

Contrast

Contrast colors are provided to offer an alternative to your default color scheme.

Many page sections let you choose a Style. Select the Contrast style to use these colors.

Text

Change the text color in sections using contrast colors. See an example of a quote section in red:

Contrast text

Background

Change the background color in sections using contrast colors. See an example in red:

Contrast background

Border

Change the color of borders in sections using contrast colors. Call to action buttons have a border. See an example in red:

Contrast border

Input text

Change the color of input text in sections using contrast colors. See an example in red:

Contrast input text

Icon

Change the color of icons in contrast sections. This applies to the featured product section, especially if you have social sharing icons enabled.

See an example in red:

Contrast icon color

Popovers

Popovers are any parts of the page appear as popups or mini-windows. The popup, quick cart, and the search bar are all popovers.

Text

Change the text color in popovers. See examples in red:

Popover text Popover text

Background

Change the background color in popovers. See an example in red:

Popover background

Border

Change the border color in popovers. See an example in red:

Popover border

Input text

Change the color of input text in popovers. If you use the quick cart feature, the labels above variant chooser dropdown menus use this text color.

See an example in red:

Popover input text

Icon

Change the color of icons in popovers. This color is used for the quantity selectors (+/-) in the mini cart. See it in red:

Popover icons

Fonts

From the Fonts theme settings panel, you can change the fonts used across your store.

Settings

The following font settings are available:

Headings
The font used for header text store-wide.
Body
The font used for body, link, and button text store-wide.
Logo font
The font used for your store’s logo text in the header.

Note that if you upload a logo image, this font is not used.

Social media

From the Social media theme settings panel, you can add links to all of your social media accounts, set up a social sharing image, and add enable share buttons across your storefront.

Social sharing options

You can enable buttons on product pages and featured product sections that let your customers share links to products to their Facebook, Twitter, and Pinterest networks.

In addition to toggling these options here, you’ll need to head to those sections to display these buttons.

Sharing links

These links activate buttons that link to each social media page. These buttons can be configured to appear in Lorenza’s footer.

Here’s what the buttons look like when active:

Social media icons, all enabled

Configure social media accounts

To set social links up, put your social media page’s URL into the matching field of your social media settings.

For example, a YouTube channel URL would look something like https://www.youtube.com/user/shopify, where shopify would be your own username.

Search

The Search theme settings panel lets you customize how search results appear to customers. For example, you may want to include blog posts in search results, or include the product’s vendor name.

Search bar in use

Configure search results

To change the presentation of search results:

  1. From your theme’s “Customize” screen, select the Theme settings tab at the bottom of the customize panel.

  2. Select the Search section from the list.

  3. Use the Results per category slider to change the number of results per product category returned in a search. The slider ranges from 1 to 6 results.

    When you add or edit products in Shopify, you can add a product category.

  4. Check the Show articles and Show pages checkboxes to let articles and pages show up in search results.

    When enabled, article and page search results are added to results as separate result sections:

    Search results with article results

  5. Check the Show price and Show vendor checkboxes to make the price and product vendor name appear next to each product search result.

  6. Use the Save button in the top-right corner when you are finished editing.

Settings

Search results have the following settings:

Results per category
For each type of search result, set the maximum amount of results that should be displayed for a search.

This setting ranges from 1 to 6 results.

Show articles
Include your store’s articles (blog posts), if relevant, in search results.
Show pages
Include your store’s pages, if relevant, in search results.

For each product search result, the following settings are available:

Show price
Show the product’s price inline with its search results.
Show vendor
Show the product’s vendor name inline with its search results.

Product

From the Product theme settings panel, you can change how customers choose from variants of a product. These settings allow you to choose which variant option types should use swatches and chips.

There’s a whole article about how to configure swatches. See Swatches for more information.

Swatches look like this:

Color swatches

And chips look like this:

Product chips

By default, swatches are enabled for the Color option type. Chips are enabled for the Size option type.

Option types that do not use swatches or ships instead have dropdown menus for each type:

Swatches and chips disabled

Cart

From the Cart theme settings panel, you can add some functionality to your cart pages.

Cart

Here, you can also enable Lorenza’s “quick shop” functionality.

Quick shop

Change your cart presentation

  1. From your theme’s “Customize” screen, select the Theme settings tab at the bottom of the customize panel.

  2. Select the Cart section from the list.

  3. Check the Enable quick shop checkbox to enable Lorenza’s quick shop feature.

    Customers can now hover over a product image and quick a Quick add button, which makes a mini-cart popover appear.

    Mini quick-add cart

  4. Check the Enable quick show quantity input if you expect customers to want to buy more than one item at a time.

  5. Check the Enable cart notes checkbox to allow customers to enter special shipping instructions for their order.

  6. Enter a Quick cart note to customize text shown on the cart page.

    Add the [subtotal] keyword to your note to show the current cart’s subtotal amount.

    The quick cart note appears here:

    Cart notes

  7. Use the Save button in the top-right corner when you are finished editing.

Settings

The cart has the following settings:

Enable quick shop
Check this checkbox to enable Lorenza’s quick shop feature.
Show quick shop quantity input
Check this checkbox to allow customers to choose how many of a product to add to cart.

If this setting is disabled, then the default amount, 1 is used.

Enable cart notes
Check this checkbox to let customers add special shipping instructions for their order.
Quick cart note
Add custom text to be shown on the cart page, where [subtotal] is a special keyword that shows the cart’s current subtotal amount.

Favicon

From the Favicon theme settings panel, you can upload a favicon.

Favicons are tiny icons that appear next to your site’s title or URL in browser tabs, bookmark menus and address bars. The recommended image dimensions are 32px by 32px.

Favicon
An upload form that takes a favicon.
Width Height
32 pixels* 32 pixels*

* Minimum recommended dimensions. We strongly recommend that you upload a square icon.

All modern desktop browsers support ICO, PNG and GIFs as favicons. See Favicons on Wikipedia for more information.

Checkout

From the Checkout theme settings panel, you can change the look and feel of your checkout pages.

Shopify checkout

Checkout styles are a Shopify feature. So, Lorenza uses Shopify’s standard settings. For more information about these settings, see Shopify’s Customizing the style of your checkout article.

© 2014-2020 Fluorescent Design Inc.   •   hello@fluorescent.co