Venture Theme product page.

Solved
Highlighted
New Member
5 0 0

Hello, 

I have a question about product page and collection layout I am using the free venture theme and was wondering if anyone can help with changing the layout page for my product page and collections page, 

 

In the collection page, my text does not follow through the whole site. is this in theme.csc.liquid and how do i change it to constrain with the site as well as product page ... ?Screenshot 2019-09-08 17.02.06.pngScreenshot 2019-09-08 17.02.20.png

0 Likes
Highlighted

Success.

Shopify Expert
166 40 71
So your wanting your collection and product description to span the full width of the screen, correct? If so, please private message me your product-template.liquid file and your collection-template.liquid file.

Also, a link to your store would be helpful. Thanks!
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Highlighted
New Member
5 0 0
Highlighted
Excursionist
40 0 1

Hi,

 

I have the exact same problem (want the text on both collection and product page to span all over the page). Is there anyway you can help me too? Site isn't launched yet. Thank you. Kindly Linda

0 Likes
Highlighted
Excursionist
40 0 1

Hi,

 

I have the exact same problem (want the text on both the collection and product page to span all over the page). Is there any way you can help me too? Site isn't launched yet. Thank you. Kindly Linda

0 Likes
Highlighted
Tourist
5 0 0

Product Description Instructions:

 

Go to product-template.liquid file

and do changes as per below screenshot

Product Description Full page widthProduct Description Full page width

Collection Description Instructions:

 

Open Templates/collection.liquid file

  <header class="grid medium-up--grid--table section-header small--text-center">

"small--text-center" is the cause of this behavior. You can remove it so that the text will always be left-aligned.  Or you can change it to "text-center" so that the text will always be center-aligned within their container.

 

Step 2:

<header class="grid medium-up--grid--table section-header small--text-center">

    <div class="grid__item medium-up--one-half section-header__item">      ...
    </div>

    <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">      ...
    </div>

  </header>

The header is a grid and within it are two grid__items.  In this case, both grid__items have "medium-up--one-half".  This means that when the screen is tablet-sized or larger, the grid__item will be one-half of the total width.  Remove "medium-up--one-half" so that each grid__item will instead be the total width, which is the default behavior.

 

Final Result: Code Results

                           Frontend Example                                                                    Final Code Example

Frontend ExampleFrontend Example

 Venture-theme-full-width-collection-description-codingVenture-theme-full-width-collection-description-coding

Color Highlight References:

  • Yellow= Alignment of Collection Title text
  • Blue= Alignment of Collection Description text
  • Black= Alignment of Collection Filters such as Filter by, Sort by
0 Likes
Highlighted
New Member
5 0 0
thanks for the tip but it did not work for me this is the code I did by
following along did I miss something or typed it wrong I added a " before
text center is this the issue?

_________________
{% paginate collection.products by 36 %}






{{ collection.title }}
{% if current_tags %}
– {% assign title_tags = current_tags | join: ', ' %}
{{ title_tags }}
{% endif %}

{% if collection.description != blank %}

{{ collection.description }}

{% endif %}


{% section 'collection-filters' %}





{% for product in collection.products %}

{% include 'product-card', product: product %}

{% else %}
{% comment %}
Add default products to help with onboarding for collections/all
only.

The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if shop.products_count == 0 %}


{% assign collection_index = 1 %}
{% for i in (1..10) %}
{% case i %}
{% when 7 %}
{% assign collection_index = 1 %}
{% when 8 %}
{% assign collection_index = 2 %}
{% when 9 %}
{% assign collection_index = 3 %}
{% when 10 %}
{% assign collection_index = 4 %}
{% endcase %}





{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{%
endcapture %}
{{ 'product-' | append: current |
placeholder_svg_tag: 'placeholder-svg' }}




{{
'homepage.onboarding.product_title' | t }}


$19.99



{% assign view_string_length = 'products.product.view'
| t | size %}
{{
'products.product.view' | t }}




{% assign collection_index = collection_index | plus: 1 %}
{% endfor %}


{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}

{{ 'collections.general.no_matches' | t }}



{% endif %}
{% endfor %}


{% if paginate.pages > 1 %}

{% endif %}



{% endpaginate %}
0 Likes
Tourist
5 0 0

This is the overall code needed for Venture - Snowboards theme if your using a different sub theme other than snowboards the code will be different but not by much.

 

 

{% paginate collection.products by 36 %}


div class="page-width">

<header class="grid section-header text-center">
<div class="grid__item section-header__item">
<h1 class="section-header__title">

{{ collection.title }}
{% if current_tags %}
&ndash; {% assign title_tags = current_tags | join: ', ' %}
{{ title_tags }}
{% endif %}

</h1>

{% if collection.description != blank %}

<div class="grid__item section-header__subtext text-left">

{{ collection.description }}

</div>

{% endif %}

</div>

<div class="grid__item medium-up--text-right section-header__item">
{% section 'collection-filters' %}
</div>

</header>

<div class="grid grid--no-gutters grid--uniform">

{% for product in collection.products %}
<div class="grid__item small--one-half medium-up--one-fifth">
{% include 'product-card', product: product %}
</div>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all
only.

The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if shop.products_count == 0 %}

<div class="grid__item">
<div class="grid grid--no-gutters grid--uniform">

{% assign collection_index = 1 %}
{% for i in (1..10) %}
{% case i %}
{% when 7 %}
{% assign collection_index = 1 %}
{% when 8 %}
{% assign collection_index = 2 %}
{% when 9 %}
{% assign collection_index = 3 %}
{% when 10 %}
{% assign collection_index = 4 %}
{% endcase %}

<div class="grid__item small--one-half medium-up--one-fifth">
<a href="/admin/products" class="product-card">
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image">


{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
<div class="product-card__info">
<div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="product-card__price">
$19.99
</div>
</div>
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div>
</a>
</div>
{% assign collection_index = collection_index | plus: 1 %}
{% endfor %}
</div>
</div>
{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item small--text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% endfor %}
</div>

{% if paginate.pages > 1 %}
<div class="pagination">
{{ paginate | default_pagination | replace: '« Previous',
'←' | replace: 'Next »', '→' }}
</div>
{% endif %}

</div>

{% endpaginate %}

0 Likes