Here is the step by step video. Enjoy! For Multiple pages of collections choose the 2nd video which is below this video.
Adding a custom page template to your Shopify Simple theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
]]>Adding a custom page template to your Shopify Simple theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
You will Create a Custom Page template for each Custom Collections Page of Collections you need. For example: You could have a template for page.bracelet-collections.liquid and a template for page.jewelry-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
As always I recommend you make a backup of your Shopify Theme before beginning.
To create a template in theme code editor under Templates choose add a new template. Select page from the dropdown, then enter the name of your template. Copy just the portion in orange below for the name.
Copy the 1 line of code in blue for page template.
{% section 'list-collections-1' %}
Find this code in the template: {{ page.content }} and place the cursor after the last bracket, then hit enter to create a new blank line below the code.
Paste the copied code in the line below the {{ page.content }}.
Copy code in blue from <!-- /templates/page.liquid --> to the last </div> below. Note the section name in Green. each new page template will need the new unique section name.
<!-- /templates/page.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="rte">
{{ page.content }}
{% section 'list-collections-1' %}
</div>
Note: You Need a unique Schema(see green text below) name for each Section you create. For example necklace-collections.liquid So you will need to create a new page and a new section for this custom collection and edit the new schema name in the new section.
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
list-collections-template-1.liquid
Delete the prepopulated code and replace with the code below:
Copy code in blue from {% commment%} to {%endschema%} below. The Code in green containing schema name can be changed when adding new sections.
New Code
{{% comment %}
This page represents the /collections and /products pages.
{% endcomment %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% else %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% endcase %}
<h1>{{ page_title }}</h1>
<div class="grid grid--uniform">
{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign collections = collections | sort: 'published_at' -%}
{% endcase %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
{% for collection in collections %}
<div class="grid__item {{ grid_item_width }}">
{% include 'collection-grid-item' %}
</div>
{% endfor %}
{% else %}
{% for collection in collections reversed %}
<div class="grid__item {{ grid_item_width }}">
{% include 'collection-grid-item' %}
</div>
{% endfor %}
{% endif %}
{% else %}
{% for block in section.blocks %}
<div class="grid__item {{ grid_item_width }}">
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item' %}
</div>
{% endfor %}
{% endif %}
</div>
{% schema %}
{
"name": {
"de": "Kategorien-Liste Seite",
"en": "Collections list page 1",
"es": "Lista de colecciones",
"fr": "Liste des collections",
"it": "Elenco collezioni",
"ja": "コレクションリストのページ",
"pt-BR": "Lista de coleções"
},
"settings": [
{
"type": "paragraph",
"content": {
"de": "Alle kategorien sind automatisch gelistet. Zum Ändern der Liste wählen Sie 'Ausgewählt' und fügen Sie Kategorien hinzu.",
"en": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections.",
"es": "Todas tus colecciones se muestran por defecto. Para personalizar tu lista, elige 'Seleccionadas' y agrega colecciones.",
"fr": "Toutes vos collections sont listées par défaut. Pour personnaliser votre liste, cliquez sur « Sélection » et ajoutez des collections.",
"it": "Tutte le collezioni vengono elencate per impostazione predefinita. Per personalizzare il tuo elenco, scegli \"Selezionato\" e aggiungi delle collezioni.",
"ja": "すべてのコレクションがデフォルトで一覧表示されます。一覧をカスタマイズするには、「選択済み」を選択してコレクションを追加します。",
"pt-BR": "Todas as suas coleções são listadas por padrão. Para personalizar sua lista, escolha \"Selecionado\" e adicione coleções."
}
},
{
"type": "radio",
"id": "display_type",
"label": {
"de": "Collections auswählen, die angezeigt werden sollen",
"en": "Select collections to show",
"es": "Selecciona colecciones para mostrar",
"fr": "Sélectionner les collections à afficher",
"it": "Seleziona le collezioni da mostrare",
"ja": "表示するコレクションを選択する",
"pt-BR": "Selecione coleções para exibir"
},
"default": "all",
"options": [
{
"value": "all",
"label": {
"de": "Alle",
"en": "All",
"es": "Todas",
"fr": "Toutes",
"it": "Tutti",
"ja": "すべて",
"pt-BR": "Todos"
}
},
{
"value": "selected",
"label": {
"de": "Ausgewählt",
"en": "Selected",
"es": "Seleccionadas",
"fr": "Sélection",
"it": "Selezionato",
"ja": "選択済み",
"pt-BR": "Selecionado"
}
}
]
},
{
"type": "select",
"id": "sort",
"label": {
"de": "Kategorien sortieren nach:",
"en": "Sort collections by:",
"es": "Ordenar colecciones por:",
"fr": "Trier les collections par :",
"it": "Ordina le collezioni per:",
"ja": "コレクションの並べ替え方法:",
"pt-BR": "Ordenar coleções por:"
},
"info": {
"de": "Sortieren funktioniert nur, wenn 'Alle' ausgewählt ist",
"en": "Sorting only applies when 'All' is selected",
"es": "La función ordenar solo se aplica cuando se selecciona \"Todas\"",
"fr": "Le tri ne s'applique que lorsque « Toutes » est sélectionné",
"it": "L'ordinamento viene applicato solo quanto è selezionato \"Tutto\"",
"ja": "「すべて」が選択されている場合にのみ並べ替えを適用する",
"pt-BR": "A classificação só se aplica quando \"Tudo\" está selecionado"
},
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": {
"de": "Produktanzahl, hoch zu niedrig",
"en": "Product count, high to low",
"es": "Recuento de productos, de mayor a menor",
"fr": "Nombre de produits, par ordre décroissant",
"it": "Conteggio decrescente prodotti",
"ja": "商品数の多い順",
"pt-BR": "Contagem de produtos, alta para baixa"
}
},
{
"value": "products_low",
"label": {
"de": "Produktanzahl, niedrig zu hoch",
"en": "Product count, low to high",
"es": "Recuento de productos, de menor a mayor",
"fr": "Nombre de produits, par ordre croissant",
"it": "Conteggio crescente prodotti",
"ja": "商品数の少ない順",
"pt-BR": "Contagem de produtos, baixa para alta"
}
},
{
"value": "alphabetical",
"label": {
"de": "Alphabetisch, A-Z",
"en": "Alphabetically, A-Z",
"es": "Alfabéticamente, A-Z",
"fr": "Alphabétique, de A à Z",
"it": "In ordine alfabetico, A - Z",
"ja": "アルファベット順, A-Z",
"pt-BR": "Ordem alfabética, A–Z"
}
},
{
"value": "alphabetical_reversed",
"label": {
"de": "Alphabetisch, Z-A",
"en": "Alphabetically, Z-A",
"es": "Alfabéticamente, Z-A",
"fr": "Alphabétique, de Z à A",
"it": "In ordine alfabetico, Z - A",
"ja": "アルファベット順, Z-A",
"pt-BR": "Ordem alfabética, Z–A"
}
},
{
"value": "date",
"label": {
"de": "Datum, alt zu neu",
"en": "Date, old to new",
"es": "Fecha: antiguo(a) a reciente",
"fr": "Date, de la plus ancienne à la plus récente",
"it": "Data, dal più vecchio al più recente",
"ja": "古い商品順",
"pt-BR": "Data, mais antiga primeiro"
}
},
{
"value": "date_reversed",
"label": {
"de": "Datum, neu zu alt",
"en": "Date, new to old",
"es": "Fecha: reciente a antiguo(a)",
"fr": "Date, de la plus récente à la plus ancienne",
"it": "Data, dal più recente al più vecchio",
"ja": "新着順",
"pt-BR": "Data, mais recente primeiro"
}
}
]
},
{
"type": "range",
"id": "grid",
"label": {
"de": "Kategorien per Reihe",
"en": "Collections per row",
"es": "Colecciones por fila",
"fr": "Collections par rangée",
"it": "Collezioni per riga",
"ja": "行あたりのコレクション数",
"pt-BR": "Coleções por linha"
},
"min": 2,
"max": 5,
"step": 1,
"default": 3
}
],
"blocks": [
{
"type": "collection",
"name": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
},
"settings": [
{
"label": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
},
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}
Go to pages in the Shopify Admin: Choose Add a Page. Name Your Page with a Title. For expample if your page is a page of Jewelry Collections, you could name your page "Jewelry". Once named, you can choose the template dropdown and choose the custom-collection-1 template.
You will need a way to Navigate to your page of Collections in Shopify. Here are the steps to create navigation menus in Shopify.
First Go to Navigation in the Admin and Click the Main Menu in Blue to expand the menu.
Click Add menu item if you do not already have a Menu where you want to connect the page.
Otherwise, Click edit on the menu you want to Connect. Add the Name and Select Page then Select the Pages.
Now Select the page of collections where you wish to connect the menu and Apply the changes.
Finally, You can go to online store and choose Customize theme, navigate to your page and start customizing the collections that appear. Click on the Collection list page section.
You will have the Choice to Show all or just selected collections. Choose selected and start customizing your page.
Let me know how it worked for you!
]]>Adding a custom page template to your Shopify Narrative theme will allow you to create a custom page with only collections you specify. This tutorial also allows you to add additional custom content to create a landing page. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
]]>Adding a custom page template to your Shopify Narrative theme will allow you to create a custom page with only collections you specify. This tutorial also allows you to add additional custom content to create a landing page. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
You will Create a Custom Page template for each Custom Collections Page of Collections you need. For example: You could have a template for page.bracelet-collections.liquid and a template for page.jewelry-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
As always I recommend you make a backup of your Shopify Theme before beginning.
To create a template in theme code editor under Templates choose add a new template. Select page from the dropdown, then enter the name of your template. Copy just the portion in orange below for the name.
Copy the 1 line of code in blue for page template.
{% section 'custom-content-1' %}
Find this code in the template: {{ page.content }} and place the cursor after the last bracket, then hit enter to create a new blank line below the code.
Paste the copied code in the line below the {{ page.content }}.
Copy code in blue from <!-- /templates/page.liquid --> to the last </div> below. Note the section name in Green. each new page template will need the new unique section name.
<div class="page-width">
<header class="section-header text-center">
<h1 class="section-header__title h2">{{ page.title }}</h1>
</header>
<div class="grid">
<div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
<div class="rte">
{{ page.content }}
{% section 'custom-content-1' %}
</div>
</div>
</div>
</div>
Note: You Need a unique Schema(see green text below) name for each Section you create. For example necklace-collections.liquid So you will need to create a new page and a new section for this custom collection and edit the new schema name in the new section.
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
list-collections-template-1.liquid
Delete the prepopulated code and replace with the code below:
Copy code in blue from {% commment%} to {%endschema%} below. The Code in green containing schema name can be changed when adding new sections.
New Code
{<style>
.custom-content-wrapper--{{ section.id }} .custom-content__section-header {
color: {{ section.settings.heading_color }};
}
{% if section.settings.background_color != blank %}
.custom-content-wrapper--{{ section.id }} {
background-color: {{ section.settings.background_color }};
}
{% endif %}
</style>
<div class="custom-content-wrapper custom-content-wrapper--{{ section.id }} {% if section.settings.top_margin %}custom-content-wrapper--top-margin{% endif %} {% if section.settings.bottom_margin %}custom-content-wrapper--bottom-margin{% endif %} one-whole" data-section-id="{{ section.id }}" data-section-type="custom-content">
<div class="page-width">
{% if section.settings.heading_text != blank %}
<h2 class="custom-content__section-header text-center">{{ section.settings.heading_text | escape }}</h2>
{% endif %}
<div class="custom-content">
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign block_width = 'medium-up--one-quarter' -%}
{% when '33%' %}
{%- assign block_width = 'medium-up--one-third' -%}
{% when '50%' %}
{%- assign block_width = 'medium-up--one-half' -%}
{% when '66%' %}
{%- assign block_width = 'medium-up--two-thirds' -%}
{% when '75%' %}
{%- assign block_width = 'medium-up--three-quarters' -%}
{% when '100%' %}
{%- assign block_width = 'one-whole' -%}
{% endcase %}
<div class="custom__item custom__item--{{ block.id }} small--one-whole {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}">
{% case block.type %}
{% when 'image' %}
{% comment %}
Custom Image Block
{% endcomment %}
{% if block.settings.image != blank %}
<div class="custom__block-image-container" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%">
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="custom__block-image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
<noscript>
<img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="custom__block-image">
</noscript>
</div>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
{% comment %}
Custom Text Block
{% endcomment %}
<style>
.custom-content-wrapper--{{ section.id }} .custom__item--{{ block.id }} .custom__block-heading-text {
color: {{ block.settings.heading_color }};
}
.custom-content-wrapper--{{ section.id }} .custom__item--{{ block.id }} .custom__block-body-text {
color: {{ block.settings.paragraph_color }};
font-size: {{ block.settings.paragraph_size | append: 'em' }};
}
</style>
<div class="text-{{ block.settings.align_text }}">
{% if block.settings.heading_text != blank %}
<h2 class="custom__block-heading-text {{ block.settings.heading_style }}">{{ block.settings.heading_text | escape }}</h2>
{% endif %}
{% if block.settings.paragraph_text != blank %}
<div class="custom__block-body-text rte-setting">{{ block.settings.paragraph_text }}</div>
{% endif %}
</div>
{% when 'video' %}
{% comment %}
Custom Video Block
{% endcomment %}
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
{% when 'product' %}
{% comment %}
Custom Product Block
{% endcomment %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
<a href="{{ product.url }}" class="card__wrapper text-center{% if block.settings.show_spacing %} card__wrapper--padding{% endif %}">
{% if product.featured_image != blank %}
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%">
{% assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="card__image lazyload fade-in"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
<noscript>
<img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.featured_image.alt | escape }}" class="card__image">
</noscript>
</div>
{% endif %}
<div class="card__info">
<div class="card__brand">{{ product.vendor }}</div>
<div class="card__name h4">{{ product.title }}</div>
<div class="card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="card__price--sale">{{ product.price | money_without_trailing_zeros }}</span>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="card__price--regular-strike">
<span class="card__price--regular">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
</span>
{% endif %}
{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% endif %}
</div>
</div>
</a>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
<div class="card__info">
<div class="card__brand">{{ 'homepage.onboarding.product_vendor' | t }}</div>
<div class="card__name h4">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="card__price">$19.99</div>
</div>
{% endif %}
{% when 'collection' %}
{% comment %}
Custom Collection Block
{% endcomment %}
{%- assign collection = collections[block.settings.collection] -%}
{% unless collection == empty %}
<a href="{{ collection.url }}" class="card__wrapper text-center">
{% if collection.image %}
{% assign collection_image = collection.image %}
{% else %}
{% assign collection_image = collection.products.first %}
{% endif %}
{% if collection_image != blank %}
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: collection_image.aspect_ratio | times: 100}}%">
{% assign img_url = collection_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="card__image lazyload fade-in"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ collection_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ collection_image.alt | escape }}">
<noscript>
<img src="{{ collection_image | img_url: '1024x1024' }}" alt="{{ collection_image.alt | escape }}" class="card__image">
</noscript>
</div>
{% endif %}
<div class="card__info">
<div class="card__name h4">{{ collection.title }}</div>
{% if section.settings.show_description and collection.description != blank %}
<div class="rte card__description">
{{ collection.description | strip_html | truncatewords: 15 }}
</div>
{% endif %}
</div>
</a>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
<div class="card__info">
<div class="card__name h4">{{ 'homepage.onboarding.collection_title' | t }}</div>
</div>
{% endunless %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{% endcase %}
</div>
</div>
{% endfor %}
</div>
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Custom content 1",
"class": "index-section index-section--custom-content",
"settings": [
{
"type": "text",
"id": "heading_text",
"label": "Heading",
"default": "Custom content"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#3a3a3a"
},
{
"type": "color",
"id": "background_color",
"label": "Background color"
},
{
"type": "checkbox",
"id": "top_margin",
"label": "Top margin",
"default": true
},
{
"type": "checkbox",
"id": "bottom_margin",
"label": "Bottom margin",
"default": true
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "text",
"id": "heading_text",
"label": "Text",
"default": "Talk about your brand"
},
{
"type": "color",
"id": "heading_color",
"label": "Color",
"default": "#3a3a3a"
},
{
"type": "select",
"id": "heading_style",
"label": "Style",
"default": "h3",
"options": [
{
"value": "h1",
"label": "Heading 1"
},
{
"value": "h2",
"label": "Heading 2"
},
{
"value": "h3",
"label": "Heading 3"
},
{
"value": "h4",
"label": "Heading 4"
},
{
"value": "h5",
"label": "Heading 5"
},
{
"value": "h6",
"label": "Heading 6"
}
]
},
{
"type": "header",
"content": "Paragraph"
},
{
"type": "richtext",
"id": "paragraph_text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "color",
"id": "paragraph_color",
"label": "Color",
"default": "#4a4a4a"
},
{
"type": "select",
"id": "paragraph_size",
"label": "Size",
"default": "1",
"options": [
{
"value": "1",
"label": "Medium"
},
{
"value": "1.25",
"label": "Large"
},
{
"value": "1.5",
"label": "Extra large"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "Video link",
"accept": ["youtube", "vimeo"],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "100%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "header",
"content": "Image"
},
{
"type": "checkbox",
"id": "show_spacing",
"label": "Enable image spacing"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "html",
"name": "Custom HTML",
"settings": [
{
"type": "html",
"id": "code",
"label": "HTML",
"default": "<div><p>Write your own custom HTML content.</p></div>"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
}
]
}
{% endschema %}
Go to pages in the Shopify Admin: Choose Add a Page. Name Your Page with a Title. For expample if your page is a page of Jewelry Collections, you could name your page "Jewelry". Once named, you can choose the template dropdown and choose the custom-collection-1 template.
You will need a way to Navigate to your page of Collections in Shopify. Here are the steps to create navigation menus in Shopify.
First Go to Navigation in the Admin and Click the Main Menu in Blue to expand the menu.
Click Add menu item if you do not already have a Menu where you want to connect the page.
Otherwise, Click edit on the menu you want to Connect. Add the Name and Select Page then Select the Pages.
Now Select the page of collections where you wish to connect the menu and Apply the changes.
Finally, You can go to online store and choose Customize theme, navigate to your page and start customizing the collections that appear. Click on the Collection list page section.
You will have the Choice to Show all or just selected collections. Choose selected and start customizing your page.
Let me know how it worked for you!
]]>Adding a custom page template to your Shopify theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
You will Create a Custom Page template for each Custom Collections Page of Collections you need. For example: You could have a template for page.bracelet-collections.liquid and a template for page.jewelry-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
As always I recommend you make a backup of your Shopify Theme before beginning.
To create a template in theme code editor under Templates choose add a new template. Select page from the dropdown, then enter the name of your template. Copy just the portion in orange below for the name.
Copy the 1 line of code in blue for page template.
{% section 'list-collections-1' %}
Find this code in the template: {{ page.content }} and place the cursor after the last bracket, then hit enter to create a new blank line below the code.
Paste the copied code in the line below the {{ page.content }}.
Copy code in blue from <!-- /templates/page.liquid --> to the last </div> below. Note the section name in Green. each new page template will need the new unique section name.
<div class="page-width">
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="content-block">
<div class="rte rte--indented-images">
{{ page.content }}
{% section 'list-collections-1' %}
</div>
</div>
{% section 'featured-products-subsection' %}
</div>
Note: You Need a unique Schema(see green text below) name for each Section you create. For example necklace-collections.liquid So you will need to create a new page and a new section for this custom collection and edit the new schema name in the new section.
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
list-collections-template-1.liquid
Delete the prepopulated code and replace with the code below:
Copy code in blue from {% commment%} to {%endschema%} below. The Code in green containing schema name can be changed when adding new sections.
New Code
{% if section.settings.layout == 'grid' %}
{% if section.settings.display_type == 'all' %}
{%- assign collection_count = 0 -%}
{% for collection in collections %}
{% unless collection.handle == 'frontpage' %}
{%- assign collection_count = collection_count | plus: 1 -%}
{% endunless %}
{% endfor %}
{% else %}
{%- assign collection_count = section.blocks.size -%}
{% endif %}
{% assign number_rows = 1 %}
{% case collection_count %}
{% when 1 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 2 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 3 %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% when 4 %}
{% assign grid_item_width = 'medium-up--one-quarter' %}
{% assign height = 235 %}
{% else %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
{% endcase %}
{% endif %}
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="collections-list">
{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign list_collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign list_collections = collections | sort: 'published_at' -%}
{% else %}
{%- assign list_collections = collections -%}
{% endcase %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
<div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{% for collection in list_collections %}
{%- assign featured_collection = collection -%}
{% unless collection.handle == 'frontpage' %}
{% if section.settings.layout == 'list' %}
{% include 'collection-list-item' %}
{% else %}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% else %}
<div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{% for collection in list_collections reversed %}
{%- assign featured_collection = collection -%}
{% unless collection.handle == 'frontpage' %}
{% if section.settings.layout == 'list' %}
{% include 'collection-list-item' %}
{% else %}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% else %}
<div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{% for block in section.blocks %}
{%- assign featured_collection = collections[block.settings.collection] -%}
{% if section.settings.layout == 'list' %}
{% include 'collection-list-item' %}
{% else %}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
{% schema %}
{
"name": {
"de": "Kategorien-Liste Seite",
"en": "Collections list page-1",
"es": "Lista de colecciones",
"fr": "Liste des collections",
"it": "Elenco collezioni",
"ja": "コレクションリストのページ",
"pt-BR": "Lista de coleções"
},
"settings": [
{
"type": "paragraph",
"content": {
"de": "Alle kategorien sind automatisch gelistet. Zum Ändern der Liste wählen Sie 'Ausgewählt' und fügen Sie Kategorien hinzu.",
"en": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections.",
"es": "Todas tus colecciones se muestran por defecto. Para personalizar tu lista, elige 'Seleccionadas' y agrega colecciones.",
"fr": "Toutes vos collections sont listées par défaut. Pour personnaliser votre liste, cliquez sur « Sélection » et ajoutez des collections.",
"it": "Tutte le collezioni vengono elencate per impostazione predefinita. Per personalizzare il tuo elenco, scegli \"Selezionato\" e aggiungi delle collezioni.",
"ja": "すべてのコレクションがデフォルトで一覧表示されます。一覧をカスタマイズするには、「選択済み」を選択してコレクションを追加します。",
"pt-BR": "Todas as suas coleções são listadas por padrão. Para personalizar sua lista, escolha \"Selecionado\" e adicione coleções."
}
},
{
"type": "radio",
"id": "display_type",
"label": {
"de": "Collections auswählen, die angezeigt werden sollen",
"en": "Select collections to show",
"es": "Selecciona colecciones para mostrar",
"fr": "Sélectionner les collections à afficher",
"it": "Seleziona le collezioni da mostrare",
"ja": "表示するコレクションを選択する",
"pt-BR": "Selecione coleções para exibir"
},
"default": "all",
"options": [
{
"value": "all",
"label": {
"de": "Alle",
"en": "All",
"es": "Todas",
"fr": "Toutes",
"it": "Tutti",
"ja": "すべて",
"pt-BR": "Todos"
}
},
{
"value": "selected",
"label": {
"de": "Ausgewählt",
"en": "Selected",
"es": "Seleccionadas",
"fr": "Sélection",
"it": "Selezionato",
"ja": "選択済み",
"pt-BR": "Selecionado"
}
}
]
},
{
"type": "select",
"id": "layout",
"label": {
"de": "Layout auswählen",
"en": "Select layout",
"es": "Seleccionar diseño",
"fr": "Sélectionner la mise en page",
"it": "Seleziona layout",
"ja": "レイアウトを選択する",
"pt-BR": "Selecione o layout"
},
"default": "grid",
"options": [
{
"value": "grid",
"label": {
"de": "Raster",
"en": "Grid",
"es": "Cuadrícula",
"fr": "Grille",
"it": "Griglia",
"ja": "グリッド",
"pt-BR": "Grade"
}
},
{
"value": "list",
"label": {
"de": "Liste",
"en": "List",
"es": "Lista",
"fr": "Liste",
"it": "Elenco",
"ja": "リスト",
"pt-BR": "Lista"
}
}
]
},
{
"type": "select",
"id": "sort",
"label": {
"de": "Kategorien sortieren nach:",
"en": "Sort collections by:",
"es": "Ordenar colecciones por:",
"fr": "Trier les collections par :",
"it": "Ordina le collezioni per:",
"ja": "コレクションの並べ替え方法:",
"pt-BR": "Ordenar coleções por:"
},
"info": {
"de": "Sortieren funktioniert nur, wenn 'Alle' ausgewählt ist",
"en": "Sorting only applies when 'All' is selected",
"es": "La función ordenar solo se aplica cuando se selecciona \"Todas\"",
"fr": "Le tri ne s'applique que lorsque « Toutes » est sélectionné",
"it": "L'ordinamento viene applicato solo quanto è selezionato \"Tutto\"",
"ja": "「すべて」が選択されている場合にのみ並べ替えを適用する",
"pt-BR": "A classificação só se aplica quando \"Tudo\" está selecionado"
},
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": {
"de": "Produktanzahl, hoch zu niedrig",
"en": "Product count, high to low",
"es": "Recuento de productos, de mayor a menor",
"fr": "Nombre de produits, par ordre décroissant",
"it": "Conteggio decrescente prodotti",
"ja": "商品数の多い順",
"pt-BR": "Contagem de produtos, alta para baixa"
}
},
{
"value": "products_low",
"label": {
"de": "Produktanzahl, niedrig zu hoch",
"en": "Product count, low to high",
"es": "Recuento de productos, de menor a mayor",
"fr": "Nombre de produits, par ordre croissant",
"it": "Conteggio crescente prodotti",
"ja": "商品数の少ない順",
"pt-BR": "Contagem de produtos, baixa para alta"
}
},
{
"value": "alphabetical",
"label": {
"de": "Alphabetisch, A-Z",
"en": "Alphabetically, A-Z",
"es": "Alfabéticamente, A-Z",
"fr": "Alphabétique, de A à Z",
"it": "In ordine alfabetico, A - Z",
"ja": "アルファベット順, A-Z",
"pt-BR": "Ordem alfabética, A–Z"
}
},
{
"value": "alphabetical_reversed",
"label": {
"de": "Alphabetisch, Z-A",
"en": "Alphabetically, Z-A",
"es": "Alfabéticamente, Z-A",
"fr": "Alphabétique, de Z à A",
"it": "In ordine alfabetico, Z - A",
"ja": "アルファベット順, Z-A",
"pt-BR": "Ordem alfabética, Z–A"
}
},
{
"value": "date",
"label": {
"de": "Datum: alt bis neu",
"en": "Date, old to new",
"es": "Fecha: antiguo(a) a reciente",
"fr": "Date, de la plus ancienne à la plus récente",
"it": "Data, dal più vecchio al più recente",
"ja": "古い商品順",
"pt-BR": "Data, mais antiga primeiro"
}
},
{
"value": "date_reversed",
"label": {
"de": "Datum: neu bis alt",
"en": "Date, new to old",
"es": "Fecha: reciente a antiguo(a)",
"fr": "Date, de la plus récente à la plus ancienne",
"it": "Data, dal più recente al più vecchio",
"ja": "新着順",
"pt-BR": "Data, mais recente primeiro"
}
}
]
}
],
"blocks": [
{
"type": "collection",
"name": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
},
"settings": [
{
"label": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
},
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}
Create a true funnel for your sales process with all the tools you need to move your customer through the sales process. Try it today!
Go to pages in the Shopify Admin: Choose Add a Page. Name Your Page with a Title. For expample if your page is a page of Jewelry Collections, you could name your page "Jewelry". Once named, you can choose the template dropdown and choose the custom-collection-1 template.
You will need a way to Navigate to your page of Collections in Shopify. Here are the steps to create navigation menus in Shopify.
First Go to Navigation in the Admin and Click the Main Menu in Blue to expand the menu.
Click Add menu item if you do not already have a Menu where you want to connect the page.
Otherwise, Click edit on the menu you want to Connect. Add the Name and Select Page then Select the Pages.
Now Select the page of collections where you wish to connect the menu and Apply the changes.
Finally, You can go to online store and choose Customize theme, navigate to your page and start customizing the collections that appear. Click on the Collection list page section.
You will have the Choice to Show all or just selected collections. Choose selected and start customizing your page.
Let me know how it worked for you!
]]>As always I recommend you make a backup of your Shopify Theme before beginning.
Simple go to online store then click the "action" drop down on the Supply Theme and choose "edit code".
Scoll down the left hand menu to snippet and find site-nav.liquid. click on it, highlight the code, them copy the code below in blue and right click and paste the new code to replace the old code. Save the changes and you can now create nested menus.
]]>
This Shopify tutorial is on adding code to the Supply theme which will allow you to add nested Multilevel Navigation Menus. By default, all of the free themes are only coded for straight drop down menus.
As always I recommend you make a backup of your Shopify Theme before beginning.
Simple go to online store then click the "action" drop down on the Supply Theme and choose "edit code".
Scoll down the left hand menu to snippet and find site-nav.liquid. click on it, highlight the code, them copy the code below in blue and right click and paste the new code to replace the old code. Save the changes and you can now create nested menus.
NEW CODE:
<ul class="site-nav" id="accessibleNav">
{% unless linklists[section.settings.menu].links.first.url == '/' %}
<li class="large--hide">
<a href="/">{{ 'general.breadcrumbs.home' | t }}</a>
</li>
{% endunless %}
{% for link in linklists[section.settings.menu].links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
<a href="{{ link.url }}">
{{ link.title }}
<span class="icon-fallback-text">
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</span>
</a>
<ul class="site-nav--dropdown">
{% for childlink in linklists[child_list_handle].links %}
<li {% if childlink.active %}class="site-nav--active"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
{% if childlink.links != blank %}
<ul class="grandchild">
{% for grandchild_link in childlink.links %}
<li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li {% if link.active %}class="site-nav--active"{% endif %}>
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="customer-navlink large--hide"><a href="/account">{{ 'layout.customer.view_account' | t }}</a></li>
<li class="customer-navlink large--hide">{{ 'layout.customer.log_out' | t | customer_logout_link }}</li>
{% else %}
<li class="customer-navlink large--hide">{{ 'layout.customer.sign_in' | t | customer_login_link }}</li>
<li class="customer-navlink large--hide">{{ 'layout.customer.create_account' | t | customer_register_link }}</li>
{% endif %}
{% endif %}
</ul>
Thats it! Let me know how it worked for you.
]]>
This tutorial uses the Supply Theme to create a Subset of Collection on a page in Shopify, but the principle will work on other themes. You can use existing code within the theme with minor changes for your custom page. The code changes should only take a few minutes.
Adding a custom page template to your Shopify theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
]]>This tutorial uses the Supply Theme to create a Subset of Collection on a page in Shopify, but the principle will work on other themes. You can use existing code within the theme with minor changes for your custom page. The code changes should only take a few minutes.
Adding a custom page template to your Shopify theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
You will Create a Custom Page template for each Custom Collections Page of Collections you need. For example: You could have a template for page.bracelet-collections.liquid and a template for page.jewelry-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
As always I recommend you make a backup of your Shopify Theme before beginning.
To create a template in theme code editor under Templates choose add a new template. Select page from the dropdown, then enter the name of your template. Copy just the portion in orange below for the name.
yourname-collections
Copy the 1 line of code in blue for page template.
{% section "yourname-collections" %}
Find this code in the template: {{ page.content }} and place the cursor after the last bracket, then hit enter to create a new blank line below the code.
Paste the copied code in the line below the {{ page.content }}.
Copy code in blue from {% include 'breadcrumb' %} to the last </div> below. Note the section name in Green. each new page template will need the new unique section name.
{% include 'breadcrumb' %}
<div class="grid">
<div class="grid-item large--two-thirds push--large--one-sixth">
<h1>{{ page.title }}</h1>
<div class="rte">
{{ page.content }}
{% section 'yourname-collections' %}
</div>
</div>
</div>
</div>
</div>
Note: You Need a unique Schema(see green text below) name for each Section you create. For example necklace-collections.liquid So you will need to create a new page and a new section for this custom collection and edit the new schema name in the new section.
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
yourname-collections
Delete the prepopulated code and replace with the code below:
Copy code in blue from{% include 'breadcrumb' %} to {%endschema%} below. The Code in green containing schema name can be changed when adding new sections.
New Code
{% include 'breadcrumb' %}
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when '2' %}
{%- assign featured_collection_width = 'one-half' -%}
{%- assign featured_collection_size = '485x' -%}
{%- assign width = '480' -%}
{%- assign height = '480' -%}
{% when '3' %}
{%- assign featured_collection_width = 'small--one-half one-third' %}
{%- assign featured_collection_size = '315x' %}
{%- assign width = '310' -%}
{%- assign height = '310' -%}
{% when '4' %}
{%- assign featured_collection_width = 'small--one-half one-quarter' %}
{%- assign featured_collection_size = '225x' %}
{%- assign width = '225' -%}
{%- assign height = '225' -%}
{% when '5' %}
{%- assign featured_collection_width = 'small--one-half medium--one-third large--one-fifth' %}
{%- assign featured_collection_size = '175x' %}
{%- assign width = '175' -%}
{%- assign height = '175' -%}
{% endcase %}
{% endif %}
{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign list_collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign list_collections = collections | sort: 'published_at' -%}
{% else %}
{%- assign list_collections = collections -%}
{% endcase %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
<div class="{% if section.settings.layout == 'grid' %}grid text-center {% endif %}list-collections-template" data-section-id="{{ section.id }}" data-section-type="list-collections-template">
{% for collection in list_collections %}
{% unless collection.handle == 'frontpage' %}
{% if section.settings.layout == 'list' %}
{% include 'collection-list-item' %}
{% unless forloop.last %}<hr>{% endunless %}
{% else %}
{% assign featured = collection.handle %}
{% include 'featured-collection' %}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% else %}
<div class="{% if section.settings.layout == 'grid' %}grid text-center {% endif %}collection-grid" data-section-id="{{ section.id }}" data-section-type="list-collections-template">
{% for collection in list_collections reversed %}
{% unless collection.handle == 'frontpage' %}
{% if section.settings.layout == 'list' %}
{% include 'collection-list-item' %}
{% unless forloop.last %}<hr>{% endunless %}
{% else %}
{% assign featured = collection.handle %}
{% include 'featured-collection' %}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% else %}
<div class="{% if section.settings.layout == 'grid' %}grid text-center {% endif %}list-collections-template" data-section-id="{{ section.id }}" data-section-type="list-collections-template">
{% for block in section.blocks %}
{% if section.settings.layout == 'list' %}
{% assign collection = collections[block.settings.collection] %}
{% include 'collection-list-item' %}
{% unless forloop.last %}<hr>{% endunless %}
{% else %}
{% assign featured = block.settings.collection %}
{% include 'featured-collection' %}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% schema %}
{
"name": "yourname collections",
"settings": [
{
"type": "paragraph",
"content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
},
{
"type": "radio",
"id": "display_type",
"label": "Select collections to show",
"default": "all",
"options": [
{
"value": "all",
"label": "All"
},
{
"value": "selected",
"label": "Selected"
}
]
},
{
"type": "select",
"id": "layout",
"label": "Select layout",
"default": "grid",
"options": [
{
"value": "grid",
"label": "Grid"
},
{
"value": "list",
"label": "List"
}
]
},
{
"type": "select",
"id": "sort",
"label": "Sort collections by:",
"info": "Sorting only applies when 'All' is selected",
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": "Product count, high to low"
},
{
"value": "products_low",
"label": "Product count, low to high"
},
{
"value": "alphabetical",
"label": "Alphabetically, A-Z"
},
{
"value": "alphabetical_reversed",
"label": "Alphabetically, Z-A"
},
{
"value": "date",
"label": "Date, old to new"
},
{
"value": "date_reversed",
"label": "Date, new to old"
}
]
},
{
"type": "select",
"id": "grid",
"label": "Collections per row",
"default": "3",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
]
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"label": "Collection",
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}
Go to pages in the Shopify Admin: Choose Add a Page. Name Your Page with a Title. For expample if your page is a page of Jewelry Collections, you could name your page "Jewelry". Once named, you can choose the template dropdown and choose the custom-collection-1 template.
You will need a way to Navigate to your page of Collections in Shopify. Here are the steps to create navigation menus in Shopify.
First Go to Navigation in the Admin and Click the Main Menu in Blue to expand the menu.
Click Add menu item if you do not already have a Menu where you want to connect the page.
Otherwise, Click edit on the menu you want to Connect. Add the Name and Select Page then Select the Pages.
Now Select the page of collections where you wish to connect the menu and Apply the changes.
Finally, You can go to online store and choose Customize theme, navigate to your page and start customizing the collections that appear. Click on the Collection list page section.
You will have the Choice to Show all or just selected collections. Choose selected and start customizing your page.
Let me know how it worked for you!
]]>Adding a custom page template to your Shopify theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
]]>Adding a custom page template to your Shopify theme will allow you to create a custom page with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Designer Jewelry and list only the Designer Bracelet Collection, Designer Necklace Collection, and Designer Earrings Collections.
You will Create a Custom Page template for each Custom Collections Page of Collections you need. For example: You could have a template for page.bracelet-collections.liquid and a template for page.jewelry-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
As always I recommend you make a backup of your Shopify Theme before beginning.
To create a template in theme code editor under Templates choose add a new template. Select page from the dropdown, then enter the name of your template. Copy just the portion in orange below for the name.
Copy the 1 line of code in blue for page template.
{% section 'list-collections-template-1' %}
Find this code in the template: {{ page.content }} and place the cursor after the last bracket, then hit enter to create a new blank line below the code.
Paste the copied code in the line below the {{ page.content }}.
Copy code in blue from <!-- /templates/page.liquid --> to the last </div> below. Note the section name in Green. each new page template will need the new unique section name.
<!-- /templates/page.liquid -->
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
<header class="section-header text-center">
<h1>{{ page.title }}</h1>
<hr class="hr--small">
</header>
<div class="grid">
<div class="grid__item large--four-fifths push--large--one-tenth">
<div class="rte rte--nomargin rte--indented-images">
{{ page.content }}
{% section 'list-collections-template-1' %}
</div>
</div>
</div>
</div>
</div>
Note: You Need a unique Schema(see green text below) name for each Section you create. For example necklace-collections.liquid So you will need to create a new page and a new section for this custom collection and edit the new schema name in the new section.
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
list-collections-template-1.liquid
Delete the prepopulated code and replace with the code below:
Copy code in blue from {% commment%} to {%endschema%} below. The Code in green containing schema name can be changed when adding new sections.
New Code
{% comment %}
This page represents the /collections and /products pages.
It is an optional, but highly recommended, template for your theme.
More info:
- http://docs.shopify.com/manual/configuration/store-customization/taking-control-of-collections-listing
Loop through each collection, except 'frontpage'.
{% endcomment %}
{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{% comment %}
Count how many collections we have to show
{% endcomment %}
{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign list_collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign list_collections = collections | sort: 'published_at' -%}
{% else %}
{%- assign list_collections = collections -%}
{% endcase %}
{% for collection in list_collections %}
{% unless collection.handle == 'frontpage' %}
{%- assign collection_count = collection_count | plus: 1 -%}
{% endunless %}
{% endfor %}
{% else %}
{%- assign collection_count = section.blocks.size -%}
{% endif %}
{% if collection_count > 0 %}
{%- assign isEmpty = false -%}
{% endif %}
{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}
<div class="grid collection-grid">
{% if section.settings.display_type == 'all' %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
{% if isEmpty %}
{% comment %}
Add default collections to help with onboarding
{% endcomment %}
{% include 'onboarding-featured-collections' %}
{% else %}
{% for collection in list_collections %}
{%- assign collection_handle = collection.handle -%}
{% if collection_handle == 'frontpage' %}
{% continue %}
{% else %}
{%- assign collection_index = collection_index | plus: 1 -%}
{% endif %}
{% include 'collection-grid-collage' %}
{% endfor %}
{% endif %}
{% else %}
{% if isEmpty %}
{% comment %}
Add default collections to help with onboarding
{% endcomment %}
{% include 'onboarding-featured-collections' %}
{% else %}
{% for collection in list_collections reversed %}
{%- assign collection_handle = collection.handle -%}
{% if collection_handle == 'frontpage' %}
{% continue %}
{% else %}
{%- assign collection_index = collection_index | plus: 1 -%}
{% endif %}
{% include 'collection-grid-collage' %}
{% endfor %}
{% endif %}
{% endif %}
{% else %}
{% for block in section.blocks %}
{%- assign collection = collections[block.settings.collection] -%}
{%- assign collection_handle = collection.handle -%}
{%- assign collection_index = forloop.index -%}
{% include 'collection-grid-collage' %}
{% endfor %}
{% endif %}
</div>
{% schema %}
{
"name": "Collections list page 1",
"settings": [
{
"type": "paragraph",
"content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
},
{
"type": "radio",
"id": "display_type",
"label": "Select collections to show",
"default": "all",
"options": [
{
"value": "all",
"label": "All"
},
{
"value": "selected",
"label": "Selected"
}
]
},
{
"type": "select",
"id": "sort",
"label": "Sort collections by:",
"info": "Sorting only applies when 'All' is selected",
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": "Product count, high to low"
},
{
"value": "products_low",
"label": "Product count, low to high"
},
{
"value": "alphabetical",
"label": "Alphabetically, A-Z"
},
{
"value": "alphabetical_reversed",
"label": "Alphabetically, Z-A"
},
{
"value": "date",
"label": "Date, old to new"
},
{
"value": "date_reversed",
"label": "Date, new to old"
}
]
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"label": "Collection",
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}
Go to pages in the Shopify Admin: Choose Add a Page. Name Your Page with a Title. For expample if your page is a page of Jewelry Collections, you could name your page "Jewelry". Once named, you can choose the template dropdown and choose the custom-collection-1 template.
You will need a way to Navigate to your page of Collections in Shopify. Here are the steps to create navigation menus in Shopify.
First Go to Navigation in the Admin and Click the Main Menu in Blue to expand the menu.
Click Add menu item if you do not already have a Menu where you want to connect the page.
Otherwise, Click edit on the menu you want to Connect. Add the Name and Select Page then Select the Pages.
Now Select the page of collections where you wish to connect the menu and Apply the changes.
Finally, You can go to online store and choose Customize theme, navigate to your page and start customizing the collections that appear. Click on the Collection list page section.
You will have the Choice to Show all or just selected collections. Choose selected and start customizing your page.
Let me know how it worked for you!
Want to learn the secrets of Sales Funnels?
I am a believer in sales funnels. As a disclaimer, I am an Affiliate and will receive a commission if you end up signing up for a paid subscription. If you want to learn about the sales process it is a good place to learn the correct way.
]]>
Adding a custom page template to your Shopify theme will allow you to create custom Pages with only collections you specify. For instance, you can make a page called Jewelry and have only the Bracelet Collection, Necklace Collection, and Earrings Collections, then you could create another page called Blue Jewelry and list only the Blue Bracelet Collection, Blue Necklace Collection, and Blue Earrings Collections.
If you are using a free theme from Shopify I have created specific tutorials with theme-specific code for most of these themes. I am including links to the tutorials here for you.
If you are not using 1 on the previous theme you can use the following tutorial. Depending on your theme you made need to add custom CSS to format your collection grid layout exactly the way you want. Here is how to get started.
Step 1 Create Custom Page Template (First Check your theme for this template page.list-collections)
It is always a good idea to create a backup of your template before begging this process. To Create a backup of your template choose the online store menu, then choose the action drop down from the current them and choose Duplicate in the drop down.
Some premium themes may already have this template so check the listed templates to see if this already exist page.list-collections. To check Go to the Online Store Menu then choose the action dropdown from your current theme and Choose edit code. Now under the templates scroll and search the page templates. If it does not exist you can create it.
To add code click here to get code from github.
{% comment %} Collections are listed here. {% endcomment %} {% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %} {% if uses_minimal_framework contains 'Liquid error' %} {% assign uses_minimal_framework = false %} {% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %} {% else %} {% assign uses_minimal_framework = true %} {% assign grid_item_width = 'span3' %} {% endif %} {% assign image_size = 'large' %} {% if linklists[page.handle].links.size > 0 %} {% assign number_of_links = 0 %} <div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix"> {% for link in linklists[page.handle].links %} {% if link.type == 'collection_link' %} {% comment %} If we have a collection link. {% endcomment %} {% assign collection = link.object %} {% assign number_of_links = number_of_links | plus: 1 %} <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center"> <div class="grid__image product-grid-image"> <a href="{{ link.url }}" class="grid-image--centered"> {% comment %} Bring in the featured image of the first product in the collection if no collection image has been uploaded for it. {% endcomment %} {% if collection.image %} <img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}"> {% else %} {% assign product = collection.products.first %} <img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}"> {% endif %} </a> </div> <p class="collection-grid__item-title"> <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a> </p> </div> {% if uses_minimal_framework %} {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %} {% endif %} {% elsif link.type == 'page_link' %} {% comment %} If we have a page link. {% endcomment %} {% assign number_of_links = number_of_links | plus: 1 %} {% assign linked_page = link.object %} {% assign have_image = false %} {% comment %} Does the page contain an image? If so, let's use it. {% endcomment %} {% if linked_page.content contains '<img' %} {% assign have_image = true %} {% assign src = linked_page.content | split: 'src="' %} {% assign src = src[1] | split: '"' | first %} {% capture image_suffix %}_{{ image_size }}.{% endcapture %} {% assign src = src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %} {% comment %} If the page contains no image, and that page features collections, let's grab the image of the first collection on it. {% endcomment %} {% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %} {% assign have_image = true %} {% assign collection = linklists[linked_page.handle].links.first.object %} {% if collection.image %} {% assign src = collection | img_url: image_size %} {% else %} {% assign src = collection.products.first | img_url: image_size %} {% endif %} {% endif %} <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center"> <div class="grid-image product-grid-image"> <a href="{{ link.url }}" class="grid-image--centered"> {% if have_image %} <img src="{{ src }}" alt="{{ link.title | escape }}" /> {% else %} <img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" /> {% endif %} </a> </div> <p class="collection-grid__item-title"> <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a> </p> </div> {% if uses_minimal_framework %} {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %} {% endif %} {% endif %} {% endfor %} </div> {% if number_of_links == 0 %} <div class="grid"> <div class="grid__item grid-item rte text-center"> <p> There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list. Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections. </p> </div> </div> {% endif %} {% else %} <div class="grid"> <div class="grid__item grid-item rte text-center"> <p> You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty. Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here. Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>. </p> </div> </div> {% endif %} <style> kbd { background-color: #FBFBE4; padding: 1px 4px; border-radius: 3px; } </style>
Congratulations you are done!
I am a believer in sales funnels. As a disclaimer, I am an Affiliate and will receive a commission if you end up signing up for a paid subscription. If you want to learn about the sales process it is a good place to learn the correct way.
Create a true funnel for your sales process with all the tools you need to move your customer through the sales process. Try it today!
Want to Drive More traffic to your site subscribe to my Website for helpful tips!
Comment below and Let us know how you are using custom collection pages in Shopify.
]]>Binance is currently the largest centralized cryptocurrency exchange by volume and allows you to sell Bitcoin BTC , Ethereum ETH, Tether USDT, and the Binance Coin BNB for some of the most popular Altcoins.
Like many other cryptocurrency exchanges, Binance had to temporarily close down new signups due to the rush of new investors to the cryptocurrency market at the end of 2017. Exchanges were signing up over 100,000 new users per day before closing. Binance signed up over 200,000 on it last open day.
]]>Binance is currently the largest centralized cryptocurrency exchange by volume and allows you to sell Bitcoin BTC , Ethereum ETH, Tether USDT, and the Binance Coin BNB for some of the most popular Altcoins.
Like many other cryptocurrency exchanges, Binance had to temporarily close down new signups due to the rush of new investors to the cryptocurrency market at the end of 2017. Exchanges were signing up over 100,000 new users per day before closing. Binance signed up over 200,000 on it last open day.
Binance has been intermittently allowing signups while still closed via referral links, and the CEO shared that in one day , 240,000 people created new accounts in just one hour.
If you don't have any Bitcoin how are you going to trade on an exchange for Altcoins like ETH and XPR? You will need to open an account with an Online Wallet like Coinbase which allows you to use your fiat currency, such as US Dollars, from your Bank Account, Wire Transfer or Credit/ Debit Card and purchase Bitcoin, Litecoin, Ethereum or Bitcoin Cash.
]]>
Customize a Page of Collections in Shopify by Creating a Custom Page Template and a Custom Section.
page.my-custom-page.liquid
Copy the 1 line of code in blue for page template.
{% section 'my-custom-page' %}
]]>Customize a Page of Collections in Shopify by Creating a Custom Page Template and a Custom Section.
Create a Custom Page template for each Custom Collections Page. For example: You could have a template for page.bracelet-collections.liquid and a template for page.necklace-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.
Copy the 1 line of code in blue for page template.
{% section 'my-custom-page' %}
Note: You Need a unique Schema(see green text below) name for each Section. For example necklace-collections.liquid
Sample do not copy:
{% schema %}
{
"name": "necklace-collections",
"settings": [
{
Copy code in blue from {% commment%} to {%endschema%} below. Code in green containing schema name can be changed when adding new sections.
{% comment %}
Loop through each collection, except 'frontpage'
{% endcomment %}
<header class="section-header">
<h1 class="section-header__title">{{ 'collections.general.title' | t }}</h1>
</header>
{% case section.settings.grid %}
{% when '2' %}
{%- assign collection_item_width = 'small--one-whole medium--one-half post-large--one-half' -%}
{%- assign collection_width = 625 -%}
{% when '3' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}
{% when '4' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-quarter' -%}
{%- assign collection_width = 330 -%}
{% when '5' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-fifth' -%}
{%- assign collection_width = 330 -%}
{% endcase %}
<div class="grid-uniform" data-section-id="{{ section.id }}" data-section-type="list-collections-template">
{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign list_collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign list_collections = collections | sort: 'published_at' -%}
{% else %}
{%- assign list_collections = collections -%}
{% endcase %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
{% for collection in list_collections %}
{% assign featured = collection.handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% else %}
{% for collection in list_collections reversed %}
{% assign featured = collection.handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% endif %}
{% else %}
{% for block in section.blocks %}
{% assign featured = collections[block.settings.collection].handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% endif %}
</div>
{% schema %}
{
"name": "My Custom page",
"settings": [
{
"type": "paragraph",
"content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
},
{
"type": "radio",
"id": "display_type",
"label": "Select collections to show",
"default": "all",
"options": [
{
"value": "all",
"label": "All"
},
{
"value": "selected",
"label": "Selected"
}
]
},
{
"type": "select",
"id": "sort",
"label": "Sort collections by:",
"info": "Sorting only applies when 'All' is selected",
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": "Product count, high to low"
},
{
"value": "products_low",
"label": "Product count, low to high"
},
{
"value": "alphabetical",
"label": "Alphabetically, A-Z"
},
{
"value": "alphabetical_reversed",
"label": "Alphabetically, Z-A"
},
{
"value": "date",
"label": "Date, old to new"
},
{
"value": "date_reversed",
"label": "Date, new to old"
}
]
},
{
"type": "select",
"id": "grid",
"label": "Collections per row",
"default": "3",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
]
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"label": "Collection",
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}
What to dive and convert traffic to your sales funnel. Get all the tools and training you need.
I am a believer in sales funnels. As a disclaimer, I am an affiliate and will receive a commission if you end up signing up for a paid subscription. If you want to learn about the sales process it is a good place to learn the correct way.
]]>
This Video Tutorial shows customization of the Shopify Debut Theme allows you to add custom content on a page using the sections feature.
This Article contains the code blocks need for this theme customization seen in the video:
Page Template Code
page.my-custom-collections.liquid
{% section 'my-custom-collections' %}
This customization of the Shopify Debut Theme allows you to add custom content on a page using the sections feature.
Make a Duplicate copy of your theme before beginning. Don't forget to sign up for my newsletter for the latest tips on traffic generation, Shopify integration and updates.
Below are the code blocks need for this theme customization seen in the video:
Copy the one line of blue code and paste into your new page template.
{% section 'my-custom-collections' %}
Note I have made a code change to this section so it now a Static instead of a Dynamic Section. This means it will only show on your custom page and not on the home page.
my-custom-collections.liquid
Add the Following Code to the new section, but note every custom page needs it own section with a unique name in the schema. Note the section of code in Green within the blue code.
"name": "My Custom Page"
Copy the Blue code from <div class="page-width"> to the {% endschema %}.
<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4 class="h2">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}
<div class="custom-content">
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 250px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-quarter' -%}
{%- assign image_size = '250x250' -%}
{% when '33%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 345px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-third' -%}
{%- assign image_size = '345x345' -%}
{% when '50%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 530px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-half' -%}
{%- assign image_size = '530x530' -%}
{% when '66%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 720px;
}
</style>
{%- assign block_width = 'medium-up--two-thirds' -%}
{%- assign image_size = '720x720' -%}
{% when '75%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 810px;
}
</style>
{%- assign block_width = 'medium-up--three-quarters' -%}
{%- assign image_size = '810x810' -%}
{% when '100%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 1090px;
}
</style>
{%- assign block_width = 'one-whole' -%}
{%- assign image_size = '1090x1090' -%}
{% endcase %}
<div class="custom__item custom__item--{{block.id}} {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}">
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign image_alt = block.settings.image.alt -%}
{{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: image_alt, 'custom__image' }}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte-setting">{{ block.settings.text }}</div>
{% endif %}
</div>
{% when 'video' %}
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
{% include 'product-card-grid', grid_image_width: image_size %}
{% else %}
{% comment %}
No product yet. Show onboarding one.
{% endcomment %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
{{ 1999 | money }}
</div>
</a>
</div>
{% endif %}
{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item', collection_image_size: image_size %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{% endcase %}
</div>
</div>
{% endfor %}
</div>
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
{% schema %}
{
"name": "My Custom Page",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Custom content"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Talk about your brand"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{"value": "top-middle", "label": "Top"},
{"value": "center", "label": "Middle"},
{"value": "bottom-middle", "label": "Bottom"}
]
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "left",
"options": [
{"value": "left", "label": "Left"},
{"value": "center", "label": "Centered"},
{"value": "right", "label": "Right"}
]
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-middle",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-middle",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "YouTube or Vimeo link",
"accept": ["youtube", "vimeo"]
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "100%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "top-middle",
"options": [
{
"value": "top-middle",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom-middle",
"label": "Bottom"
}
]
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-middle",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-middle",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
}
]
},
{
"type": "html",
"name": "Custom HTML",
"settings": [
{
"type": "html",
"id": "code",
"label": "HTML"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
}
]
}
]
}
{% endschema %}
That the end of the code. Are you driving traffic to your website? Learn the secrets to funnels and conversions.
I am a believer in sales funnels. As a disclaimer, I am an Affiliate and will receive a commission if you end up signing up for a paid subscription. If you want to learn about the sales process it is a good place to learn the correct way.
]]>
Step by Step instructions for creating your e-commerce store on Shopify by Kevin King. This step by step course for beginners covers everything from signing up for Shopify to adding a payments processor to your website. I take you through the process of adding products to your site and creating collections and subcollection and creating and connecting navigation menus.
We go through the process of adding a theme and setting up the home page on your website.
]]>This is Kevin with Pinehurst Websites and we are going over doing SEO on the products by adding alt text and then changing the page handle, so that it is a little better for SEO. So let's go into one of the products and take a look at it
]]>This is Kevin with Pinehurst Websites and we are going over doing SEO on the products by adding alt text and then changing the page handle, so that it is a little better for SEO. So let's go into one of the products and take a look at it. So this is a T-shirt. It doesn't have T-shirt in the name. So if it had T-shirt in the name, it's going to help the SEO, because the title creates the h1 tag, which is the most important SEO feature of a page.
So, by having a good title, you are going to have better SEO. So, something that has T-shirt in the name is definitely going to be better. So let's go with T-shirt. And if we want it to even be more specific, we could say men's T-shirt. And we can even be more specific and say "brown" since this does not come in variance. So, this would be very good SEO title. This would also be helpful in the alt text and in the description as well. So we want to go to the alt text and add that in the alt text. This is also handmade in the U.S.A.
We don't want to get carried away with the title necessarily, because these can get a little long, but you could put that in the title as well. And these are going to be the most searchable...this right here is going to be the most searchable component for SEO in your site. So that should also be somewhere in this description. But down here, we have the page handle for the title and it would be good that it's in here as well.
So, we can see the title has already changed, which is going to help the SEO. So the page handle is down here, and you can't have spaces in the URL. So you just want to have everything that we just had in the title, but you want to have a dash between every word. And you can't have special characters, so I took out the apostrophe as well in men's. So, this should be good...much better page handle because it's going to match the title. And that's all that you have to do to create a little bit better SEO on your page. You want to go in and also add some of these elements within the description.
So if you have any questions, you can tune in at pinehurstwebsites.com and check out for more tutorials on SEO for Shopify. You can also click the link in the description below this video and that will take you to pinehurstwebsites.com. Thanks for tuning in.
I have had a number of Customers who have moved to there sites from other eCommerce platforms on their own, with out considering the SEO implications. Shopify has excellent SEO features built into the platform, but when ever you move from one platform to another, URL changes generally occur for all other URL's other than the homepage.
]]>I have had a number of Customers who have moved to there sites from other eCommerce platforms like Wordpress WooCommerce, Magento and BigCommerce on their own, with out considering the SEO implications. Shopify has excellent SEO features built into the platform, but when ever you move from one platform to another, URL changes generally occur for all other URL's other than the homepage. Sometimes these other pages can have very good page ranks in searches, which help the page rank of your entire site. This is why when you move your site, if you do not create URL redirects, you can suffer a significant traffic drops and loss of SEO ranking power.
When you change eCommerce platforms, URL's for products, pages and categories will often change. When a URL change occurs, any links to the page will still go to your website, but they will do so as a 404 error or "page not found". When you have a page that ranks high in search engines like Google you will want to preserve your SEO rankings when you move your site by creating 301 redirects for all of your current pages.
Shopify has a built in Tool for creating redirects. Simple go to the online store section and choose Navigation from the sub-menu. in the upper right hand corner of the screen choose URL redirects. You can enter the URL from the old site, and then enter the URL on the new site. Then simply click create URL redirect. This creates a 301 redirect or a permanent redirect. According to Moz.com a 301 redirect passes between 90-99% of link juice (also know as ranking power) to the page that has been redirected.
How to I find my URLs to be redirected?
The easiest way to find URL's that need to be redirected is to use Google Search Console. You can find 404's under crawl errors. You can even download them in an excel spreadsheet.
Here is a short video on creating redirects in Shopify Manually and in Bulk using an App.
Video Tutorial Transcription:
This is Kevin with Pinehurst websites. Today, I'm gonna go over how to do redirects in Shopify. If you're migrating an old site to Shopify, and during that migration, a lot times you'll have broken links. What you wanna do is go into the online store section of your site, and then choose navigation. When you go to navigation, you're gonna see a place called URL redirects at the very top in the upper right-hand corner. All you do is click on that, and then you can go in and you can create a redirect.
If you know the current page that is having the 404, which will be generated within Google search console which is formally Google webmaster tools, you can go in and check your 404's in Google and then you can redirect to the new page here. All you do is put in the forward slash. Let's just look an example here of one of the redirects. The old URL that was getting a 404 was this right here, and then when we made the redirect.
A lot of times when you do a legacy site, this gonna end in HTML. In Shopify, when we make a page, it will be a forward slash instead of ratings, it's gonna be forward slash pages ratings. All we did to do that was, we put in the old URL here, and then we went to the page that we wanted which was the ratings page. We just went to this ratings page, and we copy the entire URL, or we can just copy the new part for search pages ratings, and then we just pasted that in there, and we hit a URL redirect. We can put the whole page, or we can just put that part of the page like this, and then you just add that redirect. Now I've already created one but used hit the button that adds redirect.
These were manually created redirects, but you can also go in and you can create redirects using an app. This is a very useful app right here, and it's called Redirectify. Using an app is a good way to do redirects and bolt. This particular one integrates with google search console which it will automatically produce those so you don't have to find the 404, it will show you your 404s. You can also download those from Google search console. What you wannna do is you wanna go in and these are ones that are 404s. If we want to go in and find one, it will usually show recommendation especially on the main pages. Let's just go into one where we know where we wanna redirect it from. This one right here is the category for Mac, so we'll probably go in and it's gonna give us these particular pages for Mac ratings guides. All we need to do is go in and I think redirecting it to the collection, which is like a category and many other eCommerce platforms. This is probably the best one. All we do is hit Fix and Next, and then we gonna get recommendations for all the URLs.
This is a product where we wanna go is probably just go to this one under ratings packages, and just go in this to all of our products, and people can find the specific product they're looking for. If you know the specific product, you can redirect it to the product page. All we gonna do is, if we don't like the recommendation, which is a search query, we can go in and we can paste this collection which is all the collections. We just hit Fix and Next then you just go through your URLs. If you see when you're not sure about, you can recreate a page if it doesn't exist anymore under pages, and that would give you somewhere to redirect it to.
This is an easy way to go in and do your redirects and you can just choose whatever looks like the best. Here's a good example. All you have to do is look for the specific products, so this is towable guide for 2016, you can kind of see in here and just some special characters inserted into the URL, but this is the MAC guide, this one is where the Mac ratings guides are. Let's see, we can just sort by Mac or we can just look Windows, Windows, Mac, Mac, so it's gonna be this one towables. I take that back. It's this one right here. We simply copy this and I think that was one of the suggestions here. This was the one right here, and we can fix that.
That's all you have to do if you're using this Redirectify app. There's a number of different apps that do this, but I like this because it creates recommended suggestions, so you don't have to go and copy and paste all those URLs. If you have more questions about it, you can check out pinehurstwebsites. com and then I'm always putting up new Shopify tutorials for different things especially if you're moving a legacy site from one platform over Shopify, or if you're moving from any other platform over Shopify. Usually the URLs are gonna be different, so it's important to do redirects so that you don't lose the page rankings that you have, and you won't have time to do those redirects, so you can actually do it live. You do want your customers, when they're clicking on those links not to end up getting a 404 if possible, so you wanna go through and do your redirects as quickly as possible.
Thanks for tuning into Pinehurst websites. You can click the link in the description of this video and it will take you to Pinehurst websites tutorials.
The Shopify Buy Button allows you to embed any item into a blog post. This can be a blog post on your own website or it can be a blog post on an external website such as a word press website. If you or an external blogger are doing a blog post, it helps to have buy button on the page where you or a blogger are blogging about one of your products because you have the ability to instantly convert the sales without having to leave the current page.
]]>
See this short video for a detailed look at creating a Buy Button
The Shopify Buy Button allows you to embed any item into a blog post. This can be a blog post on your own website or it can be a blog post on an external website. If you or an external blogger are doing a blog post, it helps to have buy button on the page where you or a blogger are blogging about one of your products because you have the ability to instantly convert the sales without having to leave the current page.
Many time blog content ranks high in search queries people use on search engines like Google, Bing and Yahoo. As an example here is a search query in Google for "accessorizing country chic helens heart"
Notice the results from the blog on
in the red box.
When you click on the blog you have the option to buy while reading the blog without ever leaving the page.
The buy button can prevent customers from getting lost on your site or distracted on another site helping you to convert more sales. Before using the buy button, I have had people actually call our retail store and ask where they could purchase items seen in our onsite blog post despite links to the items and navigation menus with the categories, and advanced search on the website. The buy button simplifies the conversion process.
Before using the buy button, I have had people actually call our retail store and ask where they could purchase items seen in our onsite blog post despite links to the items and navigation menus with the categories, and advanced search on the website.
If you want detailed training on optimizing SEO on your Shopify website hire Pinehurst Website.
We will make it easy by adding this buy button.
]]>
As part of Shopify Experts program, I get a fair amount of inquiries for website work and consultation. But one of my most recent inquiries, was just different enough to start raising tiny alarm bells in the back of my mind. The first inquiry was seemed innocent enough, an email about a site.
They use a legit site agroamerica.com as the site they want to use as a model.
Hi I'm Alex,
I would like to know if you can handle website design for my company? kindly get back to me so i can send you the job details,
Thank you
I was a little skeptical because of the grammar, and I do websites of course, I can handle a project for you. but I replied because I have had seemingly less legitimate request that turned out to be real projects.
Here was the second email.
Thanks for your response,
here is the job details
i have small scale business which i want to turn into large scale business now it located in LA and the company is based on importing and exporting of Agriculture products such as Kola Nut, Cacilia Nut and Cocoa so i need a best of the best layout design for it. Can you handle that for me ?.
So i need you to check out this site but i need something more perfect than this if its possible http://www.agroamerica.com.... the site would only be informational, so i need you to give me an estimate based on the site i gave you to check out, the estimate should include hosting and i want the same page as the site i gave you to check out and i have a private project consultant, he has the text content and the logos for the site.
Note:
@brevlyagro.com or @brevlyagro.net
Kindly get back to me with:
(1) an estimate
(2) your cell phone number with your location
(3) And will like to know if you are the business owner ??
Regards
I was still skeptical because of the grammar and now the odd question. I was able to contact this "Alex" and it was a very poor connection, and his English was labored. He wanted to pay with Credit Card and wanted to pay a higher amount so that I could pay his project manager who supposedly had all the content and logos. As soon as I heard this it confirmed my previous suspicions "SCAM".
He wanted to pay with Credit Card and wanted to pay a higher amount so that I could pay his project manager who supposedly had all the content and logos. As soon as I heard this it confirmed my previous suspicions "SCAM".
After getting off the phone, (scammers phone number (925) 318-1402 )I did a Google search for scams targeting website designers and found the exact second email I received in the comments for the article about the new scam.
So beware designers you are one of the newest targets. I was able to detect this threat in time but sooner would have been better. I am sure many of my fellow designers will also be targeted so I wanted to get the word out quickly. Please share this with your communities.
]]>
Hiring a Shopify Expert can help you significantly speed up your progress in your eCommerce venture. The right expert can show you where you need to target you efforts to be most productive. The correct expert can help you understand how to setup your products so they are optimized for search engines(SEO). Having they correct guidance can help you set up a solid foundation for a successful business.
]]>
To embed HTML 5 consider Sound Cloud this will insure your audio player works on mobile devices.
]]>
Hi, this is Kevin King with Pinehurst Websites and I'm going to do an SEO introduction tutorial for Shopify. I am a member of the Shopify Experts program and also have a retails store and 3 Shopify Websites. Shopify's structure has Search Engine Optimization in mind by automatically completing important information that search engines like Google, Bing, and Yahoo use to index and find your website. I am going to show you where this occurs in Shopify and why you need to know to optimize your site so it can be found in search. I am also going to show you how to fill out this important information on the Home page, your products,pages ,blog post and collections. I am also going to teach you about alternate text and why it is important in search. I will also teach you an expert shortcut to add this to your site. Knowing about where to enter information and how it relates to search results is the first step to being found in search results.
I'm on one of my websites right now and we're taking a look at a product and this is an anchor coral bracelet. Let's go ahead and look and see what's built into Shopify and what you have to add.
So if we go ahead and we take a look at the products page on Shopify, we're going to see that this item right here, you put in the title and you're going to put in the description. When you put those in Shopify, it's going to automatically add the meta title and the meta description for you. Those are at the bottom of the page. So this is the meta title and the meta description, and this is the URL handle. What that means is these items are going to come up on a search page. So if I did a Google search, ideally, for not just the word, but for synonyms for this word, I'd like to come up in search for this.
So let's just go to Google search real quick and let's see where these particular things come into play. I'm just going to go do a Google search. We're going to go to that search and we're going to get 121,000 results you'll see here in 0.58 seconds. We're getting images that come up in the search results and we're also getting Pinterest here, we're getting Teramesu.com which is our homepage. I'm sorry, we're getting the collection, our Nautical Jewelry collection and then we're getting the actual product page. So if you click on this it takes you to the product page and we're getting a couple other. But most of the results that we're getting are Teramesu. So that's pretty good if you can come up on the first page. Then, of course, you're getting your ads over here on the right.
So if we hover over this, we're going to see the URL or the alternate text sometimes. It will show us basically where this file is located. So this is on Pinterest, Kevin King, which is me. Then this here is on Teramesu.com and this is on Teramesu.com and those are some of the images coming up.
So let's go ahead and break down this search result right here. You'll see this is the title and then you'll see right here is the URL handle. Then over here, this is the meta description, so this is where these come in. This is the title, this is the meta description, which really they get filled in down here and here. Then this is the handle. So the handle is what comes up when you go to the actual page of the product.
So if you go to the page of the product on the top, what's in blue here, that's the product handle. So you want to make sure that you fill out all of those. But also, importantly, you're going to see when I hover over this, you'll see text comes up and that's called alternate text. If you don't have the alternate text on every one of your images, that's going to negatively affect your SEO.
So one of the reason these come up is because they all have alternate text. So Google knows these are images of a coral anchor, orange enamel, gold bracelet. So here's where we put in the alternate text. When we're putting in images under umages in your products in Shopify, the alternate text is right here. If you go there and that's blank, it does not fill it out by default.
So what I always do is I just go, when I'm doing the title I copy it and when I do my images I just paste it in here after I've uploaded my images. That's really one of the number one things that you want to do is make sure that you put in the alternate text to help you come up in a search result, so that search engines know what is on your site and that's one of the best tips that anyone will give you. It's one of the basic of SEOs.
Okay, so let's say that you realize now, "Oh, I haven't been putting in any of the alternate text. Does that mean I have to go and copy it into every single product?" Well, there's a quick way to do that and it's an expert shortcut. So here's what you want to do. You can export all of your products.
I'm just going to export a few products. So if you go to the products page which I'm on right now by clicking on the left-hand menu, and let's just say I'm going to do it just with a couple items right here. So I'll just do like three or four items and then I'll do an export. This will export these items to a CSV file.
Let's just say I selected four, but I could do the entire, I could do all products by just clicking right here. So I'm only going to do the ones that are selected just to show you what it looks like.
So I'm going to export that into an CSV file, which is simply an Excel spreadsheet basically that's formatted in a certain type of format. It stands for comma-separated values. But it looks just like a regular Excel spreadsheet.
So here's all my items and the title is what I normally copy. So if I just want to copy these titles right here, I can just go through and I can copy my titles and I can copy right here and I can go to the field where my alternate text is. So my alternate text is right here. I've already got it in here. But then, I can just simply click paste and it's going to put, if I do a Control-V, it's going to copy my alternate text. So this is where the alternate text goes in the import file. So if this were blank that's what I would do, just like I just showed you.
Then you just go to this file and you import it. So if we take this file, let's go to Save As and I'll just call it my import file. So we go to Product Import. It doesn't really matter, you don't even have to necessarily rename it. But I think it's a good idea and we'll call it Test.
Then you can import these items right back in with the alternate text. So make sure that you always look at where you save that. So when you do your Save As, look at where you're going to. This one is going to Download, so it in as Test, then Download. So if I were to go and look for that file, I'll know where to find it.
So I'm looking for that Product Imports. So I'm just going to close that here and let's go over to the Import on the products screen. Then we're just going to choose this file and we're going to overwrite and that's all you're going to do. So we would just go to Downloads and we look for that Test file. Here it is, Product Imports Test. I'm going to go ahead and import it and upload that file and then that will show me the first item that I'm getting ready to import and what it looks like and I can just start Import. Once that's finished importing, I've got all my alternate text in there.
So there's a quick way. If you do not have alternate text on your items, that you don't have to go into every single item. All you need to do is copy your titles into your alternate text column which is in the Import spreadsheet and it's very simple. If you have any questions on this, you might want to contact Pinehurst Websites and this is something that we can do for you very quickly. But it's something that most people who are proficient in Excel, they can do it pretty easily as well. So just make sure you copy into the correct column and you'll be all set and you'll have your alternate text on all your images.
You can make your alternate text more specific on certain items and a little more detailed. That will help you to come up for certain words in search, I think, and especially your images in the image search for Google. Let's move on to the next section here. Make sure you always have alternate text.
So let's just go to our homepage real quick and this is also important, is when you go to your homepage, so if we go down to Settings, this is where it puts in the meta description of your homepage on your site.
This will be the name of your site. This will be your title. Then this will be your meta description. So let's go ahead and take a look at that on a Google search.
So if we go to Teramesu.com, and you'll see you've got your description just as it is where I was showing you. Then you've got your URL and then you've got your meta description and it's exactly as you see it, where we had it over here.
So this is where you need to put this in. This is very important because this tells Google what your whole page is about and what you can expect to find on the page. But it also tells customers when they get to a search result on your page, what they can expect to find on your page.
So those are some of the basics of SEO. We'll get into more depth, things about SEO. But some of the most important things that you can do are to fill out that alternate text, make sure that you have those settings on the Settings page with the description of your page filled out. That will fill out the meta title and meta description and it will definitely help you to come up for the keywords that you're trying to come up for.
Another tip is to make sure that you put it in a natural language. See how this is a natural language and it's just not stuffed with keywords? But it's put in more naturally and you just want to put in the right number. You're going to see that there's a limit to what you can put in in meta description.
So if we go to one of the items, if we go to Products or if we go to this title page, it's going to give you a limit of what you want to put in there. If you go over that limit, it's going to show up like this with a dot, dot, dot for instance. So it's only going to recognize the first 70 characters.
So that's all you need to know for getting started with SEO on Shopify. A lot of it is automatically created. But you want to put the most important characters forward in those descriptions when you're setting up products, for instance. So that things in your meta description are the most important items and they will come up in your meta description. Use as much as you can of that 160 characters. Then use the 70 characters as much as possible. I think that will give you a good head start on SEO for Shopify.
So thanks for tuning in. You can find out more at my website by clicking the link in the description below this video and you can check out my tutorials at PinehurstWebsites.com.
Shopify just introduced a new free version of its POS included with any website hosting plan.
This is a first look at the Shopify POS app for the Iphone and how it works seamlessly with the existing Shopify Mobile app.
Using these two app you can manage your brick and mortar retail store and your website with one inventory. Watch the video to see how to get started and get an overview. Watch the video to see both apps in action.
]]>This is a first look at the Shopify POS app for the Iphone and how it works seamlessly with the existing Shopify Mobile app.
Using these two app you can manage your brick and mortar retail store and your website with one inventory. Watch the video to see how to get started and get an overview. Watch the video to see both apps in action.
See a step by step guide to building you Shopify Website. Learn everything from taking picture of product to optmizing your site for search engines like Google and Bing.
Hello, this is Kevin King with Pinehurst Websites. Today, I'm going to do an overview of the brand new POS app for the iPhone from Shopify. This just came out today and I'm going to just go through how to quickly use it.
If you want to get started with the free trial on Shopify any time during this video, just click below the video, you'll see a description. If you're on a mobile device, there'll be a drop down here and in the description there's going to be a link. Just click on that and it'll take you to the setup for a free trial on Shopify. So, let's go ahead and get going with this tutorial and show you how everything works.
This is the main screen and it's very simple to ring up a sale. All the items from your web store will automatically come over. You just tap on the item and it goes right into the cart. If you want to tap on the item again, it will add multiple items to the cart. Or you can search items as well. Let's search for apparel for instance and we'll just tap on one of the items.
Once you're ready, you tap on the top where the price is and it'll take you to pay for the item. Then from there, you just click on Pay at the top of the screen. If you tap on one of the items, you can remove it. You can also add a discount right there, either a percentage or you can do a dollar amount.
So just click on Pay, it takes you to the cart. If you're using a credit card, you can swipe it with the mobile swiper from Shopify. So it's very simple. You swipe it and it brings in the customer's information, their name and then it will ask you if you want to do an email address. So let's just go and do . . . say it was cash payment. Let's just check. Then we could put in the customer's name at that point. And email. We can send an email at that point. Then you have the option to send a receipt. It's that simple. I'm going to go through a review of how to do this. Also I will go through a review of the Shopify Mobile app.
Basically, you can have the Shopify Mobile app, which manages your web store on your iPhone. You can have the Shopify POS, which manages your brick and mortar store. The two will work together. I'm going to show you the Shopify Mobile app really quickly and then I will show you how to work the Shopify POS.
Briefly, I'm just going to go over the Shopify Mobile app, and this is just a way to manage your website and you can put items on to your website right from your mobile phone. This has been out for quite a while and it's pretty much a fantastic app. It has a dashboard which shows you the total number of visitors, total number of orders that you've had. If you click on the three bars on the right-hand side, you can check out your orders, you can check out your products, you can go to your customers and you can add products directly on to your site just by hitting this "+" button at the top of the screen. You put in a title and a price and it will go right on to your website. It'll ask you for . . . let's just call this, as a sample price, $500.
And when you hit the check mark, it automatically creates that right away on your site. Then you can pull from your photo library and you can pull an item right onto your site. So, we'll just say that we're throwing . . . I know I put Dress in there, but you'll see that it just uploads that image and that image will immediately be available on your site. Once that image uploads, you can go in and you can change other settings within the product as well. You can add barcode, you can put the item type, you can put the weight. It gives you quite a lot of power in the palm of your hand to actually create products immediately from your mobile phone. You can shoot a picture if you're in the store, and you can just shoot a picture of a new product that just came in and you can add it right to your website. This synchronizes everything with this, with the POS right away. When it takes you over to this from the POS, you can just click back over to the POS.
Actually, it's going to show me that I can go right to the POS, see at the bottom of the screen. I click on that and it'll take me right to the POS. So now let's just go through an overview of how to install and set up the POS and really some of the settings on the POS, which is a separate app.
These are two separate apps, not to be confused. This one controls your website and the other one controls your store. They use the same inventory. You can toggle items off if you only want to sell it in one location. You can go to Products and you can say, okay, I only want to sell this on my website, for instance. So if I go to edit the product, I can make it only visible on my website, or I can make it only visible on the POS. It's very simple to work with. This is the Shopify Mobile app, and then the Shopify POS app is going to be the one that we're going to go look at right now.
You can see at the top of my screen under Top Hits it says Shopify POS, I'm just going to click on that. I've already put in my user name and password. What you put in is your store name, and then you'll put in your user email address and then your password, and it'll take you right into your store.
If you've used the Shopify POS on the iPad, it's very similar but it's obviously optimized for the iPhone. And this integrates directly with the Shopify Mobile app. If we go to the menu on the upper left hand corner, you'll see that you've got your checkout, your orders, and your settings. You can go to Orders and you can see your current orders. You'll have to log in to get your current orders. So let's just go in and log in real quick.
Once you click on Orders, it will take you over to the Shopify Mobile app. If you've used the mobile app before, it will take you to where your orders are and you can check out your products and your customers right from the mobile app. If you want to go back over to the POS, at the bottom of the screen you'll see that you can click on the POS. So let's go back over and start using the checkout.
You can just add a custom item. If you don't have an item in, you don't have to put in a title at all, you can just put in a price. And you just hit the check mark. Or you can choose an item, so it goes to the cart. If I want to ring out with that, I just touch on the Custom Sale and it goes to that item. It has my tax calculated and then I just click on pay. And then it takes me to the cart.
You want to allow the microphone because that's what allows the swipe. I've got all my different payments that I want to use, so I can use any one of these different payments or a combination. I can do a partial by paying part in cash, so if I put in, let's just say, $22 in cash, then it's going to ask me for the remaining amount. And then I would Add Payment. I could Add Payment for, say, credit card for instance or store credit.
If I wanted to cancel out and item, all I would do is touch on that item. But let's first just add another item. If I add another item, I've added . . . it tells me, of course you can see which items are out of stock and it tells me how many are in stock..
So if I hit this anchor bracelet, the second one down, and add that as well, I've taken the last one. So let's go back over to that. I've got two of them. It's not giving me a warning that's it's out of stock, but it tells me the actual stock as I was tapping on it before. So if I wanted to adjust this, I'm just going to touch this item, and you see how I can minus it out. So, I minus that to one, minus it to zero, and then it takes that out of my cart. And then I can take out every item that way by just touching the item and hit minus to zero. And if I take all my items out of the cart, then you can see it empties the cart and just takes me back to the page. So there's a quick overview of that.
You can search products by bar code or by UPC, almost any product information that you have. Or you can search by category. So let's just go to the search. You should be able to put in any kind of information that you want to search by. If you happen to have a SKU number, you could search by that.
In your settings, you can set up overrides, you can order a card reader right from your settings and you can set your location on your settings.
That's pretty much a quick overview. It's just a nice, handy thing. As long as you have your phone with you, you always have a register with you. If you're doing a trade show or something along those lines, or a fair, then you can ring up orders. This was a quick overview of the new POS app from Shopify and it just shows you how to navigate and how to use it. Thanks for tuning in to Pinehurst Websites.
If you need help with your website . . . of course the best thing about this is it integrates your inventory with your web store. So, all of your inventory is integrated. You can go to your mobile app and you can add products on your mobile store and they'll show up in the POS and on your website. So that's the exciting thing about it. You've got everything integrated. You really just need an iPhone to manage your web store and your brick and mortar store.
Thanks for tuning in to Pinehurst Websites. If you need any help with any of this, you can check me out at PinehurstWebsites.com.
Hello, this is Kevin King with Pinehurst Websites. And today, I'm going to do a quick overview of Shopify, and I'm going to show you how to quickly get started with Shopify and just to explain some of the benefits to using Shopify as your e-commerce platform.
Hello, this is Kevin King with Pinehurst Websites. And today, I'm going to do a quick overview of Shopify, and I'm going to show you how to quickly get started with Shopify and just to explain some of the benefits to using Shopify as your e-commerce platform.
So, as you can see this is one of my websites, pinehurstwebsites.com, and I set up Shopify wwbsites. So, I do have a vested interest in having people do Shopfiy. However, I also have an e-commerce store. This is my e-commerce store. I mean my fiancé have had retail and wholesale businesses for over probably about 15 or 20 years now, so since 1999. And we've sold on several different e-commerce platforms, and Shopify is by far the easiest for business owners to set up their own shops. And it does take a little bit of learning, but there's a lot of information available on Shopify. And you can do anything from a very basic level website to a really extremely slick website. Very nice, this has a Twitter feed on it.
Get a first Look at the new Shopify POS app for the iPhone and how it works with the Shopify Mobile app to manage your website and your store from the palm of your hand.
This is our website. So, we have pictures from our Instagram and Tumblr come up in our feed as well as our tweets. And then we have our blog post right here that come up on our site as well. So, they preview on the front page. And the site has an actual blog built in to the site, which is really good for SEO. And then we've got down here at the bottom, we've got an email newsletter signup where people can just put in their email and sign up for our newsletter so we can directly contact the customers. We have a little app built in to our site so that people can chat with us. And it will buzz right on our cell phone or on our iPad or whichever device, even on our computer, whichever device we happen to be on, which is nice. So you can be notified when somebody needs help on the website.
So of course, all the basic important things that you would think of in an e-commerce website are built in to Shopify websites. Very powerful features are built in to Shopify. Yet, it's very affordable for anyone, whether they're starting out or they're on maybe more of a professional type plan. So, plans start at $29 for the introductory plan, then 79 for the professional plan, and then 199 a month for the unlimited plan. And then there's also an enterprise plan that is around $999 a month. And that gives people the ability to start out small and grow their business. So those are the monthly hosting plans.
But if we go down and just take a look at some of the-, what I think are really cool features is they have a mobile app where you can actually just put in items on the fly. From your cell phone, you can take a picture of a product and create it in just a few seconds right on your cell phone by clicking on Product. You can either add a picture of the product from your camera roll or you can create a picture on the fly.
So, if you happen to have a store and you're getting product in really quickly, you can add that product immediately because it goes live onto your website right at that time. You can also accept payments if you're doing a trade fair or something. You can use this mobile app to accept payments for any of the products that are in your system. And you can check your orders as well. And then you can go through, and you can look at your customers. You can look at the dashboard and see your traffic for the day. So, it's got a lot of powerful features built into it. And the pricing is right.
t really has just about everything that you could think of. But then in addition to that, you've got a fabulous app store that allows you to add features ala carte that are specific to your industry. So, if you offer local delivery, there's for instance an app for that. If you do something with recurring payments, it can automatically charge your customers. Other several apps for that, there's apps for integrating with accounting if you're using QuickBooks or FreshBooks or Zero. So, there's really quite a few apps. It's one of the most prolific app stores for any e-commerce platform. And the reason is it's a fantastic platform for designers. And so, you have a lot of designers that are designing apps for Shopify, because it's a platform that's growing fast. And they've recently received, I think, it was $100 million in investment capital. There's also rumors that they'll be going public this year. So, there's definitely going to be a lot of money behind new developments on Shopify. So as good as it is now, it's only going to get better.
So, let's go through some of the features that I like most about Shopify. Stunning design is really you have a lot of different choices when you're setting up your site on how it's going to look. And you use templates, which in Shopify are called themes. And you can either use one of their free themes or you can use one of their paid themes, and you can really make your site look extremely polished by using one of the paid themes. But you can use a free theme to get started, and it's a great way to have a place where people can go to purchase right away. And the nice thing is there's secure checkout, is built-in to Shopify. They take care of what's called PCI compliance, so that you don't have to. And when we were doing PCI compliance for our wholesale and retail sites, we had to do a scan through a PCI-compliant company, because we were storing credit card. And we had to do that scan every month, I mean, every quarter, that is. And that cost us $100 for each business that we were doing. So, that was $200 every quarter, so it's $800 a year just for PCI compliance. So, having that secure checkout where they have that built-in to it, and you automatically have a Cart button on your page. And it's very simple to set up with your bank account and have it just deposit right into your bank account when people make a sale. And it just takes a couple days for that money to go directly into your account.
Social media integration is very important. Some people, all they have is a Facebook, or maybe they're selling on Facebook or Instagram and Twitter. But that puts those social media companies in between you and your customers. So, if you can get that customer and create that same content on your own website, you're going to actually come up for search results, using that content by posting out on your website first then syndicating it to social media. Still using social media, but also getting a benefit of being able to build and drive traffic to your own website and drive sign-ups through your email newsletter. So you can directly communicate with the customer without having to pay to boost the post, for instance, or to advertising. Although you can still do those things, but this just gives you a place where you can have direct control or direct contact with your customers.
]]>
Merchants have never had so many available sales channels as they do today. But these new opportunities have come with new challenges. Today's merchants may sell in a store with a POS, on a website, and sell on Amazon, eBay and other market places. This type of scenario has made it very difficult for sellers to manage there inventories, purchases and order fulfillment without very expensive custom solutions...
]]>
There are a number of eCommerce integration companies springing up to fill the void for this very lucrative market, but until now, most have either been very expensive and/or some what incomplete. ecomdash is the most comprehensive and affordable solutions I have found in the multi-channel inventory management market.
Their SaaS(Software as a Service) platform breaks the previous price barriers that prevented these types of solutions from being ubiquitous for small business. In fact, their pricing policy is exceedingly fair, you are charged the pricing plan tier each month for what you actually use. Charges are automatically adjusted for slow or busy months.
Starting at only $49.99 per month, ecomdash allows you to synchronize your inventory on Amazon, eBay,Etsy and includes integration's with Shopify and Big Commerce websites and many more. It includes supplier and purchase order management. You can manage your orders, shipping and drop shipping with integration to US postal and stamps.com and Endicia.
ecomdash includes listing tools that allow you to create a product and syndicate it to multiple channels. This eliminates the need for manually entering new products into multiple channels saving time entering and formatting for each channel.
]]>It's great to have a business where your customers have recurring payments. Spending your time manually processing payments takes time away from servicing those customers or adding new customers. Whether you are processing those payments, or you hire someone to do it, the time that your business spends is time that could be spent on other money making activities. In fact, time is not only money, it is a precious commodity that can not be replenished.
As we all know opportunity cost is choosing one activity at the expense of another choice.
]]>It's great to have a business where your customers have recurring payments. Spending your time manually processing payments takes time away from servicing those customers or adding new customers. Whether you are processing those payments, or you hire someone to do it, the time that your business spends is time that could be spent on other money making activities. In fact, time is not only money, it is a precious commodity that can not be replenished.
As we all know opportunity cost is choosing one activity at the expense of another choice. This is where leveraging technology can save you time and money.
Business owners frequently make evaluation on price and without considering cost. For example, if I were almost out of gas in the middle of nowhere and I saw a gas station with sky high prices, and made my evaluation solely on price, the cost might end up being a tow truck, plus gas, plus lost time.
If you give lessons, sell subscription services or consumable products, or have service contracts, the time you spend charging cards every month can be spent selling, giving lessons, providing support, or expanding your business by using one of the recurring payment apps on your Shopify Website. You could be promoting your website to gain more subscribers!
The following video is a quick tutorial showing how easy it is to manage subscription payments on your Shopify Website.
Free trials are available for Shopify and recurring payment apps. See below the video how you can easily integrate with your affiliate program to grow your business and make automatic payments to affiliates,
Shopify Ecommerce - Start your FREE trial now!
Now that you have seen how easy it is to get started give it a try by clicking the free trail.
You can use recurring payments apps with affiliate programs to charge referred customers and make automatic to affiliates.
Check out this link to see how easy it can be to grow your business with an automatic affiliate program.
]]>
The easiest way to create nested menus in Shopify is to buy a theme from the Shopify Theme store that has nested menus built into the theme.
Shopify Shopping Cart Software - Start your FREE trial today!
Remember is you already have a Shopify website, changing or Publishing a new theme to you website will loses the any customization from your previous theme.
Here are a couple of examples of multilevel sub menus on websites
]]>Shopify Shopping Cart Software - Start your FREE trial today!
Remember is you already have a Shopify website, changing or Publishing a new theme to you website will loses the any customization from your previous theme.
Here are a couple of examples of multilevel sub menus on websites
The first is the Vanity Theme which enables pop out menus. A link to this Shopify Theme is at the end of this Blog.
The next example is the Editions Theme which has subcategory choices.
These are just a couple of examples to see more sub menu options check out the links at the end of this article.
If you want a powerful e-commerce platform that is easy to use, Shopify offers a tremendous platform.
Here is a list of themes that include the ability to do a multiple level submenu or pop out sub menu.
]]>Helens Heart Shoe Banner Created Using PSTouch Iphone App
Website Banner created on the iphone with PS Touch This Video contains a PhotoShop Touch App tutorial showing you how to create a sized banner for your website on the IPhone.
To see how to create images on a white background and a complete overview on the PSTouch App check out this Adobe PhotoShop Touch Tutorial.
]]>Professional Images made on an IPhone.
Professional looking product images are a must for eCommerce websites. Consumers base up to 80% their perception of a business from a companies website. The good news is now you do not have to hire a professional photographer or buy expensive software to make your images look professional. The image below what taken with an iPhone 4s and cleaned up and re-sizes using an inexpensive Photoshop app.
Tunic Photo taken with IPhone and edited on PS Touch App. The video below gives a comprehensive review of the Photoshop Touch App and tutorial Demo on how this tunic photo was edited using cropping, Borders, scribble select, layers, re-sizing, refine edges, transform,Flatten and filters.
Sea Life Jewelry images using Photoshop Touch[/caption] This Photoshop Touch tutorial iphone video provides step by step directions for advanced photo editing in Photoshop directly on your IPhone allowing you to quickly take photo's and complete sophisticated edits for you website quickly with out having to sync or share your photo's with other devices.
]]>