Ask A Guru: Customizing Your Theme

Highlighted
Explorer
43 5 4

Hi guys,

On my Brooklyn theme shop,

I created a new Collection template (Collection.new.liquid)

its the same as the regular collection.liquid template, I only created it so i'll be able to have a separate collection template with a different background color.

 

Can you please help with the needed code to change the background color to white for any collection which uses the new collection template (Collection.new.liquid)?

 

thanks

0 Likes
Highlighted
Shopify Partner
261 26 39

Hi @ZivHodiva

It will require editing the HTML on your collection.new.liquid, add a class on it or a style to set the background color to white. We can help you with this task, if you want we can send you an invitation to your Shopify as staff and we will do it for you.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
Highlighted
Explorer
43 5 4

thanks @PremierStores , I prefer to add the code by myself.
the new Template collection.new.liquid has just a single paragraph of code:

 

<!-- /templates/collection.liquid -->
{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section 'collection-template' %}

 

The code for the Section collection-template below, I can create a new section (collection-template-new) so changes will not affect 'regular' collections.

 

<!-- /templates/collection.liquid -->
<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
  {% include 'collection-template' %}
</div>


{% schema %}
{
  "name": {
    "de": "Kategorieseiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fr": "Pages de collection",
    "it": "Pagine delle collezioni",
    "ja": "コレクションページ",
    "pt-BR": "Páginas de Coleções"
  },
  "settings": [
    {
      "type": "select",
      "id": "collection_products_grid",
      "label": {
        "de": "Rasterstil",
        "en": "Grid style",
        "es": "Estilo de cuadrícula",
        "fr": "Style de grille",
        "it": "Stile griglia",
        "ja": "グリッドスタイル",
        "pt-BR": "Estilo da grade"
      },
      "options": [
        {
          "value": "collage",
          "label": {
            "de": "Collage",
            "en": "Collage",
            "es": "Collage",
            "fr": "Collage",
            "it": "Collage",
            "ja": "コラージュ",
            "pt-BR": "Colagem"
          }
        },
        {
          "value": "grid",
          "label": {
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fr": "Grille",
            "it": "Griglia",
            "ja": "グリッド",
            "pt-BR": "Grade"
          }
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "collection_sort_enable",
      "label": {
        "de": "Kategoriesortierung aktivieren",
        "en": "Enable collection sorting",
        "es": "Habilitar la la función ordenar colecciones",
        "fr": "Activer le tri de la collection",
        "it": "Abilita ordinamento collezione",
        "ja": "コレクションの並べ替えを有効にする",
        "pt-BR": "Ativar a ordenação de coleções"
      }
    },
    {
      "type": "checkbox",
      "id": "collection_tags_enable",
      "label": {
        "de": "Kategorie-Tags anzeigen",
        "en": "Show collection tags",
        "es": "Mostrar etiquetas de colección",
        "fr": "Afficher les balises de la collection",
        "it": "Mostra tag della collezione",
        "ja": "コレクションのタグを表示する",
        "pt-BR": "Exibir tags de coleção"
      }
    },
    {
      "type": "checkbox",
      "id": "product_vendor_enable",
      "label": {
        "de": "Produktverkäufer anzeigen",
        "en": "Show product vendor",
        "es": "Mostrar proveedor del producto",
        "fr": "Afficher le distributeur du produit",
        "it": "Indica fornitore prodotto",
        "ja": "商品の販売元を表示する",
        "pt-BR": "Exiba o fornecedor do produto"
      }
    }
  ]
}
{% endschema %}

 

 

0 Likes
Highlighted
Explorer
43 5 4

Thanks @PremierStores , I prefer to edit the code by myself if thats ok.

 

the new Template collection.new.liquid has just a single paragraph of code:

 

<!-- /templates/collection.liquid -->
{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section 'collection-template' %}

 

the code for Section collection-template.liquid below, I can create a new section (collection.template.new.liquid) so the changes will not affect 'regular' collections.

 

<!-- /templates/collection.liquid -->
<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
  {% include 'collection-template' %}
</div>


{% schema %}
{
  "name": {
    "de": "Kategorieseiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fr": "Pages de collection",
    "it": "Pagine delle collezioni",
    "ja": "コレクションページ",
    "pt-BR": "Páginas de Coleções"
  },
  "settings": [
    {
      "type": "select",
      "id": "collection_products_grid",
      "label": {
        "de": "Rasterstil",
        "en": "Grid style",
        "es": "Estilo de cuadrícula",
        "fr": "Style de grille",
        "it": "Stile griglia",
        "ja": "グリッドスタイル",
        "pt-BR": "Estilo da grade"
      },
      "options": [
        {
          "value": "collage",
          "label": {
            "de": "Collage",
            "en": "Collage",
            "es": "Collage",
            "fr": "Collage",
            "it": "Collage",
            "ja": "コラージュ",
            "pt-BR": "Colagem"
          }
        },
        {
          "value": "grid",
          "label": {
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fr": "Grille",
            "it": "Griglia",
            "ja": "グリッド",
            "pt-BR": "Grade"
          }
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "collection_sort_enable",
      "label": {
        "de": "Kategoriesortierung aktivieren",
        "en": "Enable collection sorting",
        "es": "Habilitar la la función ordenar colecciones",
        "fr": "Activer le tri de la collection",
        "it": "Abilita ordinamento collezione",
        "ja": "コレクションの並べ替えを有効にする",
        "pt-BR": "Ativar a ordenação de coleções"
      }
    },
    {
      "type": "checkbox",
      "id": "collection_tags_enable",
      "label": {
        "de": "Kategorie-Tags anzeigen",
        "en": "Show collection tags",
        "es": "Mostrar etiquetas de colección",
        "fr": "Afficher les balises de la collection",
        "it": "Mostra tag della collezione",
        "ja": "コレクションのタグを表示する",
        "pt-BR": "Exibir tags de coleção"
      }
    },
    {
      "type": "checkbox",
      "id": "product_vendor_enable",
      "label": {
        "de": "Produktverkäufer anzeigen",
        "en": "Show product vendor",
        "es": "Mostrar proveedor del producto",
        "fr": "Afficher le distributeur du produit",
        "it": "Indica fornitore prodotto",
        "ja": "商品の販売元を表示する",
        "pt-BR": "Exiba o fornecedor do produto"
      }
    }
  ]
}
{% endschema %}

 

0 Likes
Highlighted
Shopify Partner
261 26 39

Thanks for sharing us your code, it's helpful,
Add this to the line 5.

<style>
body{
background-color: #fff;
}
</style>

 

Let's make the best store!
Contact us at: thepremierstores@gmail.com
1 Like
Highlighted
Explorer
43 5 4

Thanks @PremierStores 

works perfectly :)

0 Likes
Highlighted
New Member
5 0 0

I hope that you are well?

 

I am using the Out of Sandbox Turbo theme and my related products are not centered when viewing a product. It was always centered and now suddenly the products are sitting to the right.

 

Where in the code editor will this problem be? I am not a developer.

 

Please view my website - https://bigcatch.co.za

 

Please help me!

 

Thank you very much

0 Likes
Highlighted
Shopify Partner
261 26 39

Hi @Big_Catch1

This happens because you activated the sidebar.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
Shopify Partner
16 0 0

Hi, I have posted on the main board but can someone help with this please?

 

https://community.shopify.com/c/Shopify-Design/Move-a-collection-from-main-collection-group/m-p/6928...

 

Am I going to have to delete the collection and recreate it as a seperate 'collection' or category so that it only appears in the navigation menu?
I'd like it to have it's own page ideally and nested menu items from it's main menu.

Many thanks in advance

0 Likes
Highlighted
New Member
1 0 0

Hi, guys!

 

I have a question regarding customizing Shopify product page.

 

So far I was using WooCommerce for my first stores, but I'm thinking to give a Shopify a try.

My question: Is it possible to customize product page to looks more like sales page?

 

Something like this

marko-primer.png

 

Where click on the main CTA will bring you at the bottom of the page where you could choose your options, quantity and add a product to the cart.

I understand that I will need to hire a Shopify expert, but before I start building my store on Shopify, I would like to know how customizable the product page actually is? 

 

Also is it possible to build 3 column grid sections with photos as on the attached example?

 

Big thanks for any tip!

Jaka

0 Likes