Skip to content

Instantly share code, notes, and snippets.

View carolineschnapp's full-sized avatar

Caroline carolineschnapp

533 followers · 5 following
  • Shopify
  • Montreal
View GitHub Profile
@carolineschnapp
carolineschnapp / 1-remove-gray-frame-in-Brooklyn.md
Last active May 24, 2022 03:53
How to get rid of the gray product image frame, when the collage treatment is disabled. For those who want a more conventional grid when using the #Brooklyn theme. This isn't a customization I support. If you have questions, please post them in this community forum: https://ecommerce.shopify.com/c/ecommerce-design

What you want

You want to go from this:

Alt text

... to that:

Alt text

@carolineschnapp
carolineschnapp / Add Color Swatches using hex values.md
Last active May 11, 2022 18:39
Add Color swatches to #Brooklyn theme. Use hexadecimal values or images.

What we want

We want to go from this:

Alt text

... to that:

Alt text

@carolineschnapp
carolineschnapp / True color social media icons
Created May 19, 2015 21:44
If a customer wants the social icons in the footer to display in the actual social media colours, you can add this to the bottom of the timber.scss.liquid file. Colour reference: http://brandcolors.net/
_
@carolineschnapp
carolineschnapp / Disable full height on slideshow.md
Created May 19, 2015 21:01
Disable the 'full height' feature on hero slideshow in #Brooklyn

What you want

You want a slideshow that goes from the left edge to the right edge but no clipping of the slides on the left and right. You want a theme that looks like Mobilia from Out of the Sandbox. For this, you will lose the navigation + logo over the slide feature. Maybe that's exactly what you want! No more worries about having your navigation readable over your slides.

This is what you want:

Alt text

Alt text

@carolineschnapp
carolineschnapp / Reorder tags when they contain numbers in Supply.md
Created May 13, 2015 21:58
Reorder tags inside groups when they contain numbers. Deal with number ranges (that is, a tag that contains two numbers), including price ranges that use a currency symbol. #Supply

What you want

You would like to re-order this:

Alt text

... so that it becomes that:

Alt text

@carolineschnapp
carolineschnapp / Reduce vertical white space in header by half in Supply.md
Created May 12, 2015 07:42
Reduce vertical white space in header by half in #Supply theme.

What you have

Alt text

Alt text

What you want

Alt text

@carolineschnapp
carolineschnapp / instructions.md
Last active June 21, 2021 20:35
Reduce the width of the slideshow by 50% and center it in the desktop view. #slideshow #flexslider

Problem

Your slideshow is too big, and you need to scroll down quite a lot to see the content below. Ideally, you need different images: some that aren't so tall. Alas, all you have are portrait-type images, not landscape-sized images.

Solution

  1. Open the snippet file slider.liquid in your online code editor. Direct link for this here.
  2. Replace line no 2 with the code in the gist file below.
@carolineschnapp
carolineschnapp / Add compare at price to Supply theme.md
Last active October 9, 2022 10:00
Add compare at price to Supply theme.

  1. Add the compare at price to the product-grid-item.liquid snippet. See gist file product-grid-item.liquid below.

  2. Add the compare at price to the product-list-item.liquid snippet. See gist file product-list-item.liquid below.

  3. Add the compare at price to the search-result-grid.liquid snippet. See gist file search-result-grid.liquid below.

  4. Add the compare at price to the product.liquid template. See gist file product.liquid below.

  5. For a more attractive strike-through, you can add some CSS to your stylesheet. See gist below.

@carolineschnapp
carolineschnapp / instructions.md
Last active June 21, 2021 20:35
Turn off the 'more' feature in navigation. #navigation #supply
@carolineschnapp
carolineschnapp / instructions.md
Last active June 21, 2021 20:35
Change layout style of Featured Products on homepage from Collage to Grid. #Brooklyn

Problem

The “collage” style is enforced on the homepage, it cannot be turned off in the theme settings. Turning that style off in theme settings only turns it off on collection pages.

Solution

In the snippet file featured-products.liquid, replace <div class="grid grid-collage"> with <div class="grid grid-uniform">. In the same file, replace {% include 'product-grid-collage' %} with {% include 'product-grid-item' %}.

Direct link to snippet file: https://www.shopify.com/admin/themes/current?key=snippets/featured-products.liquid